opensumi · bytemain · Jan 30, 2024 · Jan 26, 2024 · Jan 29, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,11 +1,16 @@
+const path = require('path');
+
+const rulesDirPlugin = require('eslint-plugin-rulesdir');
+rulesDirPlugin.RULES_DIR = path.join(__dirname, 'scripts', 'eslint_rules', 'rules');
+
 module.exports = {
   env: {
     browser: true,
     es6: true,
     node: true,
   },
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'eslint-plugin-import', 'unused-imports'],
+  plugins: ['@typescript-eslint', 'rulesdir', 'import', 'unused-imports'],
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
@@ -188,5 +193,6 @@ module.exports = {
         ],
       },
     ],
+    'rulesdir/classnames-import-rule': ['error'],
   },
 };
diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "url": "[email protected]:opensumi/core.git"
   },
   "devDependencies": {
+    "@ast-grep/napi": "^0.17.1",
     "@opensumi/ide-dev-tool": "workspace:*",
     "@types/debug": "^4.1.5",
     "@types/fs-extra": "^9.0.13",
@@ -109,6 +110,7 @@
     "eslint-config-prettier": "^8.4.0",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-rulesdir": "^0.2.2",
     "eslint-plugin-unused-imports": "^2.0.0",
     "git-rev-sync": "^3.0.1",
     "got": "^12.1.0",

diff --git a/packages/comments/src/browser/comments-zone.view.tsx b/packages/comments/src/browser/comments-zone.view.tsx
@@ -1,4 +1,4 @@
-import clx from 'classnames';
+import cls from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -81,8 +81,8 @@ const CommentsZone: React.FC<ICommentProps> = observer(({ thread, widget }) => {
   }, []);
 
   return (
-    <div className={clx(thread.options.threadClassName, styles.comment_container)}>
-      <div className={clx(thread.options.threadHeadClassName, styles.head)}>
+    <div className={cls(thread.options.threadClassName, styles.comment_container)}>
+      <div className={cls(thread.options.threadHeadClassName, styles.head)}>
         <div className={styles.review_title}>{threadHeaderTitle}</div>
         <InlineActionBar<ICommentThreadTitle>
           menus={commentThreadTitle}

diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx
@@ -1,10 +1,10 @@
-import clx from 'classnames';
+import cls from 'classnames';
 import React from 'react';
 
 import './styles.less';
 
 export const Badge: React.FC<{} & React.HTMLAttributes<HTMLSpanElement>> = ({ className, children, ...restProps }) => (
-  <span className={clx('kt-badge', className)} {...restProps}>
+  <span className={cls('kt-badge', className)} {...restProps}>
     {children}
   </span>
 );
diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import React from 'react';
 
 import { Dropdown } from '../dropdown';
@@ -104,15 +104,15 @@ export const Button = React.memo(
     onVisibleChange,
     ...otherProps
   }: ButtonProps<T>): React.ReactElement<ButtonProps<T>> => {
-    const classes = classNames('kt-button', className, {
+    const classes = cls('kt-button', className, {
       [`kt-${type}-button-loading`]: loading,
       [`ghost-${type}-button`]: ghost && !loading && type !== 'link',
       [`${type}-button`]: type,
       [`${size}-button-size`]: size,
       ['ghost-button']: ghost && type !== 'link',
       ['block-button']: block,
     });
-    const iconClesses = classNames(className, {
+    const iconClasses = cls(className, {
       ['kt-clickable-icon']: !!onClick,
     });
 
@@ -123,7 +123,7 @@ export const Button = React.memo(
           disabled={disabled}
           icon={icon}
           onClick={loading || disabled ? noop : onClick}
-          className={iconClesses}
+          className={iconClasses}
           iconClass={iconClass}
           {...otherProps}
         />

diff --git a/packages/components/src/checkbox/index.tsx b/packages/components/src/checkbox/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import React from 'react';
 
 import { warning } from '../utils/warning';
@@ -24,17 +24,18 @@ export const CheckBox: React.FC<
 > = ({ insertClass, className, label, size = 'default', disabled, checked, wrapTabIndex, ...restProps }) => {
   warning(!insertClass, '`insertClass` was deprecated, please use `className` instead');
 
-  const cls = classNames('kt-checkbox', insertClass, className, {
-    'kt-checkbox-large': size === 'large',
-    'kt-checkbox-disabled': disabled,
-  });
-
   const checkboxProps = restProps;
 
   checkboxProps['checked'] = checked ?? false;
 
   return (
-    <label className={cls} tabIndex={wrapTabIndex}>
+    <label
+      className={cls('kt-checkbox', insertClass, className, {
+        'kt-checkbox-large': size === 'large',
+        'kt-checkbox-disabled': disabled,
+      })}
+      tabIndex={wrapTabIndex}
+    >
       <span className='kt-checkbox-lump'>
         <input type='checkbox' disabled={disabled} {...checkboxProps} />
         <span className='kt-checkbox-icon'>

diff --git a/packages/components/src/dialog/index.tsx b/packages/components/src/dialog/index.tsx
@@ -1,4 +1,4 @@
-import clx from 'classnames';
+import cls from 'classnames';
 import React from 'react';
 
 import { Button } from '../button';
@@ -83,15 +83,15 @@ export const Dialog: React.FC<IDialogProps> = ({
           {icon && (
             <div
               style={{ color: icon.color }}
-              className={clx('kt-dialog-icon', getIcon(icon.className) || getContextIcon(icon.className))}
+              className={cls('kt-dialog-icon', getIcon(icon.className) || getContextIcon(icon.className))}
             />
           )}
           <div className={'kt-dialog-content_area'}>
             {type !== 'basic' && title && <p className={'kt-dialog-content_title'}>{title}</p>}
             <span className={'kt-dialog-message'}>{message}</span>
           </div>
           {closable && type !== 'basic' && (
-            <button className={clx('kt-dialog-closex', getIcon('close'))} onClick={onClose}></button>
+            <button className={cls('kt-dialog-closex', getIcon('close'))} onClick={onClose}></button>
           )}
         </div>
         {messageType !== MessageType.Empty && type !== 'basic' && (

diff --git a/packages/components/src/dropdown/dropdown-button.tsx b/packages/components/src/dropdown/dropdown-button.tsx
@@ -1,5 +1,5 @@
 import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 
 import { Button } from '../button';
@@ -92,7 +92,7 @@ const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
   const [leftButtonToRender, rightButtonToRender] = buttonsRender([leftButton, rightButton]);
 
   return (
-    <div {...restProps} className={classNames(prefixCls, className)}>
+    <div {...restProps} className={cls(prefixCls, className)}>
       {leftButtonToRender}
       <Dropdown {...dropdownProps}>{rightButtonToRender}</Dropdown>
     </div>

diff --git a/packages/components/src/dropdown/dropdown.tsx b/packages/components/src/dropdown/dropdown.tsx
@@ -1,5 +1,5 @@
 import RightOutlined from '@ant-design/icons/RightOutlined';
-import classNames from 'classnames';
+import cls from 'classnames';
 import RCDropdown from 'rc-dropdown';
 import React, { PropsWithChildren } from 'react';
 
@@ -113,7 +113,7 @@ export default class Dropdown extends React.Component<PropsWithChildren<DropDown
     const child = React.Children.only(children) as React.ReactElement<any>;
 
     const dropdownTrigger = React.cloneElement(child, {
-      className: classNames(child.props.className, `${prefixCls}-trigger`),
+      className: cls(child.props.className, `${prefixCls}-trigger`),
       disabled,
     });
 

diff --git a/packages/components/src/icon/icon.tsx b/packages/components/src/icon/icon.tsx
@@ -1,4 +1,4 @@
-import clx from 'classnames';
+import cls from 'classnames';
 import React from 'react';
 
 import { defaultIconMap, defaultIconfont } from './iconfont/iconManager';
@@ -116,7 +116,7 @@ const IconBase = function <T>(props: IconProps<T>, ref: React.Ref<HTMLSpanElemen
       title={tooltip}
       onClick={onClick}
       ref={ref}
-      className={clx('kt-icon', iconClx, className, {
+      className={cls('kt-icon', iconClx, className, {
         'kt-icon-loading': loading,
         'kt-icon-disabled': !!disabled,
         [`kt-icon-${size}`]: !!size,

diff --git a/packages/components/src/icon/iconfont-cn.tsx b/packages/components/src/icon/iconfont-cn.tsx
@@ -1,4 +1,4 @@
-import clx from 'classnames';
+import cls from 'classnames';
 import React from 'react';
 
 import { _InternalIcon, IconProps } from './icon';
@@ -90,7 +90,7 @@ export function createFromIconfontCN<T>(options: CustomIconOptions = {}) {
 
       const iconShapeClx = getIconShapeClxList(iconShapeOptions);
       return (
-        <_InternalIcon {...extraCommonProps} {...restProps} className={clx(className, iconShapeClx)} ref={ref}>
+        <_InternalIcon {...extraCommonProps} {...restProps} className={cls(className, iconShapeClx)} ref={ref}>
           {content}
         </_InternalIcon>
       );

diff --git a/packages/components/src/input/Input.tsx b/packages/components/src/input/Input.tsx
@@ -1,4 +1,4 @@
-import clx from 'classnames';
+import cls from 'classnames';
 import React from 'react';
 
 import { Icon } from '../icon';
@@ -187,15 +187,15 @@ export const Input = React.forwardRef<HTMLInputElement, IInputBaseProps>((props,
       return null;
     }
     return (
-      <div className={clx('kt-input-addon', klassName)} {...persistFocusProps}>
+      <div className={cls('kt-input-addon', klassName)} {...persistFocusProps}>
         {React.Children.map(addonNodes, (child) =>
           React.isValidElement(child) ? React.cloneElement(child!, persistFocusProps) : null,
         )}
       </div>
     );
   };
 
-  const inputClx = clx('kt-input', className, {
+  const inputClx = cls('kt-input', className, {
     [`kt-input-${size}`]: size,
     ['kt-input-disabled']: props.disabled,
   });

diff --git a/packages/components/src/input/InputNumber.tsx b/packages/components/src/input/InputNumber.tsx
@@ -1,5 +1,5 @@
 import type { ValueType } from '@rc-component/mini-decimal';
-import clx from 'classnames';
+import cls from 'classnames';
 import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
 import RcInputNumber from 'rc-input-number';
 import React from 'react';
@@ -24,7 +24,7 @@ export const InputNumber: React.FC<InputNumberProps> = (props: InputNumberProps)
     }
   };
 
-  const inputClx = clx('kt-input', 'kt-input-number', className, {
+  const inputClx = cls('kt-input', 'kt-input-number', className, {
     [`kt-input-${size}`]: size,
     ['kt-input-disabled']: disabled,
   });

diff --git a/packages/components/src/input/ValidateInput.tsx b/packages/components/src/input/ValidateInput.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import React from 'react';
 
 import { IInputBaseProps, Input } from './Input';
@@ -36,15 +36,15 @@ export const ValidateInput = React.forwardRef<HTMLInputElement, ValidateInputPro
       setValidateMessage(validateInfo);
     }, [validateInfo]);
 
-    const validateClx = classNames({
+    const validateClx = cls({
       'validate-error': validateMessage && validateMessage.type === VALIDATE_TYPE.ERROR,
       'validate-warning': validateMessage && validateMessage.type === VALIDATE_TYPE.WARNING,
       'validate-info': validateMessage && validateMessage.type === VALIDATE_TYPE.INFO,
     });
 
     const renderValidateMessage = () => {
       if (validateMessage && validateMessage.message) {
-        return <div className={classNames('validate-message', validateClx, { popup })}>{validateMessage.message}</div>;
+        return <div className={cls('validate-message', validateClx, { popup })}>{validateMessage.message}</div>;
       }
     };
 
@@ -78,11 +78,11 @@ export const ValidateInput = React.forwardRef<HTMLInputElement, ValidateInputPro
     };
 
     return (
-      <div className={classNames('input-box', { popup })}>
+      <div className={cls('input-box', { popup })}>
         <Input
           type={type}
           ref={ref}
-          className={classNames(className, validateMessage, validateClx)}
+          className={cls(className, validateMessage, validateClx)}
           onChange={handleChange}
           {...restProps}
         />

diff --git a/packages/components/src/menu/index.tsx b/packages/components/src/menu/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import RcMenu, { Divider, ItemGroup } from 'rc-menu';
 import React from 'react';
 import { polyfill } from 'react-lifecycles-compat';
@@ -264,7 +264,7 @@ class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
     const menuOpenMotion = this.getOpenMotionProps(menuMode!);
 
     const prefixCls = customizePrefixCls || 'kt-inner-menu';
-    const menuClassName = classNames(className, {
+    const menuClassName = cls(className, {
       [`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(),
     });
 

diff --git a/packages/components/src/modal/Modal.tsx b/packages/components/src/modal/Modal.tsx
@@ -1,5 +1,5 @@
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
-import classNames from 'classnames';
+import cls from 'classnames';
 import PropTypes from 'prop-types';
 import Dialog from 'rc-dialog';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
@@ -212,7 +212,7 @@ export default class Modal extends React.Component<PropsWithChildren<ModalProps>
         {...restProps}
         getContainer={getContainer}
         prefixCls={prefixCls}
-        wrapClassName={classNames({ [`${prefixCls}-centered`]: !!centered }, wrapClassName)}
+        wrapClassName={cls({ [`${prefixCls}-centered`]: !!centered }, wrapClassName)}
         footer={footer === undefined ? defaultFooter : footer}
         visible={visible}
         mousePosition={mousePosition}

diff --git a/packages/components/src/notification/index.tsx b/packages/components/src/notification/index.tsx
@@ -1,4 +1,4 @@
-import clx from 'classnames';
+import cls from 'classnames';
 import React from 'react';
 
 import { IAction } from '@opensumi/ide-core-common';
@@ -37,7 +37,7 @@ export function open<T = string>(
   return new Promise((resolve) => {
     const args: ArgsProps = {
       key,
-      className: clx('kt-notification-wrapper', {
+      className: cls('kt-notification-wrapper', {
         ['kt-notification-info']: type === MessageType.Info,
         ['kt-notification-error']: type === MessageType.Error,
         ['kt-notification-warn']: type === MessageType.Warning,
@@ -50,26 +50,26 @@ export function open<T = string>(
       },
       btn: buttons
         ? buttons.map((button, index) => {
-          const isStringButton = typeof button === 'string';
-          const buttonProps = {
-            className: `${clx('kt-notification-button')}${isStringButton ? '' : button.class}`,
-            ghost: isStringButton ? index === 0 : !button.primary,
-            key: isStringButton ? button : button.id,
-            onClick: () => {
-              resolve(button as any);
+            const isStringButton = typeof button === 'string';
+            const buttonProps = {
+              className: `${cls('kt-notification-button')}${isStringButton ? '' : button.class}`,
+              ghost: isStringButton ? index === 0 : !button.primary,
+              key: isStringButton ? button : button.id,
+              onClick: () => {
+                resolve(button as any);
                 antdNotification.close(key);
                 if (!isStringButton) {
                   button.run();
                 }
-            },
-          };
-          const text = isStringButton ? button : button.label;
-          return (
-            <Button size='small' {...buttonProps}>
-              {text}
-            </Button>
-          );
-        })
+              },
+            };
+            const text = isStringButton ? button : button.label;
+            return (
+              <Button size='small' {...buttonProps}>
+                {text}
+              </Button>
+            );
+          })
         : null,
       message,
       description,