add eslint, update doc for dropdown

AElfProject · Mar 8, 2024 · f6ad379 · f6ad379
1 parent 89c566e
commit f6ad379
Show file tree

Hide file tree

Showing 10 changed files with 462 additions and 172 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,42 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true,
+    "jest": true,
+    "node": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "@typescript-eslint"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-explicit-any": "off",
+    "tailwindcss/classnames-order": "warn",
+    "tailwindcss/no-custom-classname": "warn",
+    "tailwindcss/no-contradicting-classname": "error"
+  }
+}
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/package.json b/package.json
@@ -66,6 +66,8 @@
     "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
     "@types/react-copy-to-clipboard": "^5.0.7",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "@umijs/fabric": "^4.0.1",
     "@vitest/coverage-v8": "^1.1.0",
     "aelf-design": "workspace:*",
@@ -77,6 +79,10 @@
     "classnames": "^2.3.2",
     "dumi": "^2.2.16",
     "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "ethers": "^6.9.1",
     "father": "^4.3.8",
@@ -93,7 +99,7 @@
     "typescript": "^5.3.3",
     "viem": "^2.0.0",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "~1.1.0"
+    "vitest": "^1.3.1"
   },
   "ci": {
     "type": "aci",

diff --git a/packages/component/src/DatePicker/index.md b/packages/component/src/DatePicker/index.md
@@ -7,15 +7,15 @@ group:
 
 # DatePicker
 
-## for PC
+## For PC
 
 <code src="./demos/pc.tsx"></code>
 
 ### API
 
 refer to [DatePicker](https://ant-design.antgroup.com/components/date-picker-cn#%E5%85%B1%E5%90%8C%E7%9A%84-api)
 
-### token
+### Token
 
 ```js
 <AELFDProvider theme={{
@@ -30,19 +30,19 @@ refer to [DatePicker](https://ant-design.antgroup.com/components/date-picker-cn#
 }}>
 ```
 
-### other token
+### Supported token
 
 refer to [DatePicker](https://ant.design/components/date-picker-cn#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token)
 
-## for Mobile
+## For Mobile
 
 <code src="./demos/mobile.tsx"></code>
 
 ### API
 
 refer to [Picker](https://mobile.ant.design/zh/components/picker/#%E5%B1%9E%E6%80%A7-2)
 
-### token
+### Token
 
 Inherited global token, no extended token, follows global token specification
 

diff --git a/packages/component/src/Dropdown/demos/basic.tsx b/packages/component/src/Dropdown/demos/basic.tsx
@@ -24,16 +24,16 @@ const App: React.FC = () => {
     <div>
       <Space size={100}>
         <Dropdown size="small" menu={{ items, selectable: true, defaultSelectedKeys: ['1'] }}>
-          <Typography.Text>small (hover me)</Typography.Text>
+          <Typography.Title level={7}>small (hover me)</Typography.Title>
         </Dropdown>
         <Dropdown size="medium" menu={{ items, selectable: true, defaultSelectedKeys: ['1'] }}>
-          <Typography.Text>medium</Typography.Text>
+          <Typography.Title level={7}>medium</Typography.Title>
         </Dropdown>
         <Dropdown size="default" menu={{ items, selectable: true, defaultSelectedKeys: ['1'] }}>
-          <Typography.Text>default</Typography.Text>
+          <Typography.Title level={7}>default</Typography.Title>
         </Dropdown>
         <Dropdown size="large" menu={{ items, selectable: true, defaultSelectedKeys: ['1'] }}>
-          <Typography.Text>large</Typography.Text>
+          <Typography.Title level={7}>large</Typography.Title>
         </Dropdown>
       </Space>
     </div>

diff --git a/packages/component/src/Dropdown/index.md b/packages/component/src/Dropdown/index.md
@@ -7,25 +7,37 @@ group:
 
 # Dropdown
 
-1. 新增 props：size、offsetX、offsetY
+add props：size、offsetX、offsetY
 
 ## Basic Usage
 
 <code src="./demos/basic.tsx"></code>
 
-## 组件 Token
-
-```json
-Dropdown: {
-    // 控制组件项在鼠标悬浮且激活状态下的背景颜色。
-    controlItemBgActiveHover: appearance === 'dark' ? '#212121' : '#F8F8F8'
- },
+## Token
+
+```js
+<AELFDProvider theme={{
+  components:{
+    Dropdown: {
+      // Controls the background color of component items when the mouse is hovering and activated.
+      controlItemBgActiveHover: appearance === 'dark' ? '#212121' : '#F8F8F8'
+    }
+  }
+}}>
 ```
 
+## Supported Token
+
+refer to [Dropdown Token](https://ant.design/components/dropdown-cn/#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token)
+
 ## API
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| size | 设置下拉面板大小 | `small \| medium \| default \| large` | default | - |
-| offsetX | 下拉面板距离触发元素的横向偏移量 | number | 0 | - |
-| offsetY | 下拉面板距离触发元素的纵向偏移量 | number | 0 | - |
+| size | 设置下拉面板大小 | `small \| medium \| default \| large` | `default` | `1.0.0` |
+| offsetX | 下拉面板距离触发元素的横向偏移量 | number | `0` | `1.0.0` |
+| offsetY | 下拉面板距离触发元素的纵向偏移量 | number | `0` | `1.0.0` |
+
+## Supported API
+
+refer to [Dropdown API](https://ant.design/components/dropdown-cn#dropdown)
diff --git a/packages/component/src/Search/demos/size.tsx b/packages/component/src/Search/demos/size.tsx
@@ -6,7 +6,6 @@ function Demo() {
   return (
     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
       <Search inputSize="small" placeholder="search something..." />
-
       <Search inputSize="middle" placeholder="search something..." />
     </Space>
   );

diff --git a/packages/component/src/Search/demos/status.tsx b/packages/component/src/Search/demos/status.tsx
@@ -2,24 +2,6 @@ import React from 'react';
 import { Search } from 'aelf-design';
 import { Space } from 'antd';
 
-const items = [
-  {
-    key: '1',
-    label: <div className="w-[130px]">1st menu item</div>,
-    value: '1st menu item',
-  },
-  {
-    key: '2',
-    label: <div className="w-[130px]">2nd menu item</div>,
-    value: '2nd menu item',
-  },
-  {
-    key: '3',
-    label: <div className="w-[130px]">3rd menu item</div>,
-    value: '3rd menu item',
-  },
-];
-
 function Demo() {
   return (
     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>

diff --git a/packages/component/src/Search/demos/withSearchIcon.tsx b/packages/component/src/Search/demos/withSearchIcon.tsx
@@ -2,24 +2,6 @@ import React from 'react';
 import { Search } from 'aelf-design';
 import { Space } from 'antd';
 
-const items = [
-  {
-    key: '1',
-    label: <div className="w-[130px]">1st menu item</div>,
-    value: '1st menu item',
-  },
-  {
-    key: '2',
-    label: <div className="w-[130px]">2nd menu item</div>,
-    value: '2nd menu item',
-  },
-  {
-    key: '3',
-    label: <div className="w-[130px]">3rd menu item</div>,
-    value: '3rd menu item',
-  },
-];
-
 function Demo() {
   return (
     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>