fix: remove react interface from semi-foundation #923 (#925)

Co-authored-by: shijia.me <[email protected]>

package.json

@@ -166,7 +166,7 @@
     "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-semi-design": "^0.0.1",
+    "eslint-plugin-semi-design": "latest",
     "fs-extra": "^8.1.0",
     "glob": "^7.1.7",
     "html-webpack-plugin": "^3.2.0",

packages/semi-eslint-plugin/README-zh_CN.md

@@ -50,6 +50,15 @@ import { Button } from '@douyinfe/semi-ui';
 import Button from '../button';
 ```
 
+### ✅ 不能在 semi-foundation 引用 React 或 ReactDOM
+
+```javascript
+// ❌ 
+// packages/semi-foundation/input/foundation.ts
+import React from 'react';
+import ReactDOM from 'react-dom';
+```
+
 ## 相关资料
 
 - eslint plugin 文档：https://eslint.org/docs/developer-guide/working-with-plugins

packages/semi-eslint-plugin/README.md

@@ -50,6 +50,15 @@ import Button from '../button';
 
 ```
 
+### ✅ Should not import React or ReactDOM in semi-foundation
+
+```javascript
+// ❌ 
+// packages/semi-foundation/input/foundation.ts
+import React from 'react';
+import ReactDOM from 'react-dom';
+```
+
 ## Related docs
 
 - eslint plugin doc：https://eslint.org/docs/developer-guide/working-with-plugins

packages/semi-eslint-plugin/__tests__/index.js

@@ -40,5 +40,15 @@ ruleTester.run('no-import', rule['no-import'], {
             filename: 'packages/semi-ui/inputNumber/index.tsx',
             errors: [{ message: messages.unexpectedImportSelf }]
         },
+        {
+            code: "import React from 'react'",
+            filename: 'packages/semi-foundation/input/foundation.ts',
+            errors: [{ message: messages.unexpectedReactImport }]
+        },
+        {
+            code: "import React from 'react-dom'",
+            filename: 'packages/semi-foundation/input/foundation.ts',
+            errors: [{ message: messages.unexpectedReactImport }]
+        },
     ]
 });

packages/semi-eslint-plugin/src/rules/no-import.ts

@@ -16,7 +16,8 @@ const rule: Rule.RuleModule = {
             unexpected: "Unexpected import statement, semi ui should not be used as a dependency of semi foundation",
             unexpectedLodashES: "Unexpected import statement, please use lodash instead of lodash-es.",
             unexpectedRelativeImport: "Unexpected import statement, please use module name instead of relative path.",
-            unexpectedImportSelf: 'Unexpected import statement, please use relative paths to import modules in the same package.'
+            unexpectedImportSelf: 'Unexpected import statement, please use relative paths to import modules in the same package.',
+            unexpectedReactImport: "Unexpected import statement, React should not be used as a dependency of semi foundation"
         },
         schema: [],
     },
@@ -34,6 +35,9 @@ const rule: Rule.RuleModule = {
                     if (importName.includes('semi-ui')) {
                         context.report({ node, messageId: "unexpected" });
                     }
+                    if (importName.includes('react') || importName.includes('react-dom')) {
+                        context.report({ node, messageId: "unexpectedReactImport" });
+                    }
                 }
 
                 if (isFoundationFile || isUIFile) {

packages/semi-foundation/anchor/foundation.ts

@@ -2,7 +2,6 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { isArray, get } from 'lodash';
 import scrollIntoView, { CustomBehaviorOptions } from 'scroll-into-view-if-needed';
 import { cssClasses } from './constants';
-import React from 'react';
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -21,7 +20,7 @@ export interface AnchorAdapter<P = Record<string, any>, S = Record<string, any>>
     getAnchorNode: (selector: string) => HTMLElement;
     getContentNode: (selector: string) => HTMLElement;
     notifyChange: (currentLink: string, previousLink: string) => void;
-    notifyClick: (e: React.MouseEvent<HTMLElement>, link: string) => void;
+    notifyClick: (e: any, link: string) => void;
     canSmoothScroll: () => boolean;
 }
 

packages/semi-foundation/calendar/foundation.ts

@@ -41,7 +41,8 @@ export interface EventObject {
     allDay?: boolean;
     start?: Date;
     end?: Date;
-    children?: React.ReactNode;
+    // children?: React.ReactNode;
+    children?: any;
 }
 
 export interface ParsedEventsWithArray {

packages/semi-foundation/datePicker/foundation.ts

@@ -125,12 +125,12 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     disabledDate?: DisabledDateType;
     disabledTime?: DisabledTimeType;
     dropdownClassName?: string;
-    dropdownStyle?: React.CSSProperties;
+    dropdownStyle?: Record<string, any>;
     endDateOffset?: DateOffsetType;
     format?: string;
     getPopupContainer?: () => HTMLElement;
     inputReadOnly?: boolean;
-    inputStyle?: React.CSSProperties;
+    inputStyle?: Record<string, any>;
     max?: number;
     motion?: Motion;
     multiple?: boolean;
@@ -146,7 +146,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     spacing?: number;
     startDateOffset?: DateOffsetType;
     stopPropagation?: boolean | string;
-    style?: React.CSSProperties;
+    style?: Record<string, any>;
     timePickerOpts?: any; // TODO import timePicker props
     timeZone?: string | number;
     type?: Type;

packages/semi-foundation/datePicker/inputFoundation.ts

@@ -45,7 +45,7 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     type?: Type;
     showClear?: boolean;
     format?: string;
-    inputStyle?: React.CSSProperties;
+    inputStyle?: Record<string, any>;
     inputReadOnly?: boolean;
     validateStatus?: ValidateStatus;
     prefixCls?: string;

packages/semi-foundation/datePicker/monthsGridFoundation.ts

@@ -40,10 +40,14 @@ const dateCalcFns = {
 type Type = ArrayElement<typeof strings.TYPE_SET>;
 
 interface MonthsGridElementProps {
-    navPrev?: React.ReactNode;
-    navNext?: React.ReactNode;
-    renderDate?: () => React.ReactNode;
-    renderFullDate?: () => React.ReactNode;
+    // navPrev?: React.ReactNode;
+    navPrev?: any;
+    // navNext?: React.ReactNode;
+    navNext?: any;
+    // renderDate?: () => React.ReactNode;
+    renderDate?: () => any;
+    // renderFullDate?: () => React.ReactNode;
+    renderFullDate?: () => any;
 }
 
 export type PanelType = 'left' | 'right';

packages/semi-foundation/form/utils.ts

@@ -5,7 +5,11 @@ import AsyncValidator from 'async-validator';
 import { cloneDeep, toPath } from 'lodash';
 import { FieldValidateTriggerType, BasicTriggerType, ComponentProps, WithFieldOption } from './interface';
 
-export function getDisplayName(WrappedComponent: React.ComponentType | any) {
+/**
+ * 
+ * @param WrappedComponent React.ComponentType | any
+ */
+export function getDisplayName(WrappedComponent: any) {
     const originName = WrappedComponent.displayName || WrappedComponent.name;
     return originName ? `SemiField${originName}` : 'SemiField';
 }

yarn.lock

@@ -10935,10 +10935,10 @@ eslint-plugin-react@^7.20.6, eslint-plugin-react@^7.24.0:
     semver "^6.3.0"
     string.prototype.matchall "^4.0.6"
 
-eslint-plugin-semi-design@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-semi-design/-/eslint-plugin-semi-design-0.0.1.tgz#e918a43e5b633a4352e173086c150e5e59b800e7"
-  integrity sha512-Gtd4rNrb/hPmn+/SimRTjOZ3d3NoR2SzW8t1uS6/uHjf7pcXOISUqY4709qOwF0EeU7FJHRIJyB4mFOUUs3/jw==
+eslint-plugin-semi-design@latest:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-semi-design/-/eslint-plugin-semi-design-2.13.0.tgz#63440c65f5430849c338291ace0f31b90074fdc7"
+  integrity sha512-qqXwnJ1yupZyLzR86pkxp16BeMx7UtvKYyTTQ/prlyyZMW6C4MVbyD1f3LWIsGiWAMjtgS8q5XE/z3enTRx6HQ==
 
 eslint-rule-composer@^0.3.0:
   version "0.3.0"