Merge pull request #90 from AElf-devops/feat/icons-nav

icon config auto generate
AElfProject · Mar 25, 2024 · ffd6c74 · ffd6c74
2 parents b5be9f7 + ab4c4f4
commit ffd6c74
Show file tree

Hide file tree

Showing 45 changed files with 141 additions and 179 deletions.
diff --git a/.dumi/theme/builtins/IconSearch/IconSearch.tsx b/.dumi/theme/builtins/IconSearch/IconSearch.tsx
@@ -75,7 +75,7 @@ const IconSearch: React.FC = () => {
         if (searchKey) {
           const matchKey = searchKey
             .replace(new RegExp(`^<([a-zA-Z]*)\\s/>$`, 'gi'), (_, name) => name)
-            .replace(/(Colorful|Filled|CircleFilled)$/gi, '')
+            .replace(/(Colorful|Filled|CircleFilled|Outlined)$/gi, '')
             .toLowerCase();
           iconList = iconList.filter((iconName) => iconName.toLowerCase().includes(matchKey));
         }

diff --git a/.dumi/theme/builtins/IconSearch/fields.ts b/.dumi/theme/builtins/IconSearch/fields.ts
@@ -1,40 +1,24 @@
-import * as AntdWeb3Icons from '@aelf-design/internal-icons';
+import * as AntdIcons from '@aelf-design/internal-icons';
 
-const all = Object.keys(AntdWeb3Icons)
+const categoriesConfig = require('./icon-config.json');
+
+const all = Object.keys(AntdIcons)
   .map((n) => n.replace(/(Outlined|Filled|TwoTone)$/, ''))
   .filter((n, i, arr) => arr.indexOf(n) === i);
 
-// 方向指示类图标
-const direction = ['CircleCloseIcon', 'ClearIcon'];
-
-// 提示建议类图标
-const suggestion: string[] = [];
-
-// 交互按钮图标
-const interaction: string[] = [];
-
-// 聊天图标
-const chat: string[] = [];
+const other: string[] = [];
 
-const datum = [...direction, ...suggestion, ...interaction, ...chat];
-
-const other = all.filter((n) => !datum.includes(n));
-
-export const categories = {
-  direction,
-  suggestion,
-  interaction,
-  chat,
+export const categories: Record<string, string[]> = {
+  ...categoriesConfig,
   other,
 };
-
-export const CategoryNames = {
-  direction: '方向指示类图标',
-  suggestion: '提示建议类图标',
-  interaction: '交互按钮图标',
-  chat: '聊天图标',
-  other: '其他图标',
-};
+export const CategoryNames = Object.keys(categories).reduce(
+  (ace, key) => {
+    ace[key] = key;
+    return ace;
+  },
+  {} as Record<string, string>,
+);
 
 export default categories;
 

diff --git a/.dumi/theme/builtins/IconSearch/icon-config.json b/.dumi/theme/builtins/IconSearch/icon-config.json
@@ -0,0 +1,24 @@
+{
+  "direction": [
+    "Backtop",
+    "DownArrow",
+    "DownDouble",
+    "Down",
+    "Fullscreen",
+    "FullsreenExit",
+    "LeftArrow",
+    "Left",
+    "MenuFold",
+    "MenuUnfold",
+    "RightArrow",
+    "Right",
+    "RollBack",
+    "RotateLeft",
+    "SwapLeft",
+    "Swap",
+    "SwapRight",
+    "UpArrow",
+    "Up"
+  ],
+  "suggestion": ["Add", "Check", "Minus"]
+}
diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -7,7 +7,6 @@ const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
   const { pathname } = useLocation();
   const [color] = usePrefersColor();
-  console.log('color----', color);
   return (
     <>
       <SiteThemeProvider appearance={color}>

diff --git a/package.json b/package.json
@@ -5,11 +5,12 @@
   "workspaces": [
     "packages/*"
   ],
+  "type": "module",
   "packageManager": "[email protected]",
   "files": [],
   "scripts": {
-    "start": "dumi dev",
-    "dev": "dumi dev",
+    "start": "./scripts/generate-icon-config.js && dumi dev",
+    "dev": "./scripts/generate-icon-config.js && dumi dev",
     "dev:lib": "pnpm run --parallel --if-present --recursive --filter \"@aelf-design/*\" dev",
     "build": "pnpm run --if-present --recursive build",
     "build:docs": "dumi build",
@@ -73,6 +74,7 @@
     "antd": "^5.13.2",
     "antd-style": "^3.6.1",
     "babel-plugin-inline-react-svg-v2": "^2.0.2",
+    "chalk": "^5.3.0",
     "classnames": "^2.3.2",
     "dumi": "^2.2.17",
     "eslint": "^8.56.0",

diff --git a/packages/internal-icons/src/components/CircleClose.tsx b/packages/internal-icons/src/components/CircleClose.tsx
@@ -7,9 +7,7 @@ import { type IconProps } from '../type';
 const componentName = 'CircleCloseIconOutlined';
 export const CircleCloseIconOutlined = React.forwardRef<HTMLSpanElement, IconProps>(
   (props, ref) => {
-    return (
-      <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-    );
+    return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
   },
 );
 CircleCloseIconOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/ClearIcon.tsx b/packages/internal-icons/src/components/ClearIcon.tsx
@@ -6,8 +6,6 @@ import { type IconProps } from '../type';
 
 const componentName = 'ClearIconFilled';
 export const ClearIconFilled = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 ClearIconFilled.displayName = componentName;
diff --git a/packages/internal-icons/src/components/CloseIcon.tsx b/packages/internal-icons/src/components/CloseIcon.tsx
@@ -6,8 +6,6 @@ import { type IconProps } from '../type';
 
 const componentName = 'CloseIcon';
 export const CloseIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 CloseIcon.displayName = 'CloseIcon';
diff --git a/packages/internal-icons/src/components/CopyIcon.tsx b/packages/internal-icons/src/components/CopyIcon.tsx
@@ -6,8 +6,6 @@ import { type IconProps } from '../type';
 
 const componentName = 'CopyIcon';
 export const CopyIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 CopyIcon.displayName = componentName;
diff --git a/packages/internal-icons/src/components/DownArrowIcon.tsx b/packages/internal-icons/src/components/DownArrowIcon.tsx
@@ -6,8 +6,6 @@ import { type IconProps } from '../type';
 
 const componentName = 'DownArrowIcon';
 export const DownArrowIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 DownArrowIcon.displayName = 'DownArrowIcon';
diff --git a/packages/internal-icons/src/components/EyeInvisibleOutlinedIcon.tsx b/packages/internal-icons/src/components/EyeInvisibleOutlinedIcon.tsx
@@ -8,13 +8,7 @@ const componentName = 'EyeInvisibleOutlinedIcon';
 export const EyeInvisibleOutlinedIcon = React.forwardRef<HTMLSpanElement, IconProps>(
   (props, ref) => {
     return (
-      <AelfIcon
-        component={AelfSVGComponent}
-        componentName={componentName}
-        style={{ fontSize: '18px' }}
-        ref={ref}
-        {...props}
-      />
+      <AelfIcon component={AelfSVGComponent} style={{ fontSize: '18px' }} ref={ref} {...props} />
     );
   },
 );

diff --git a/packages/internal-icons/src/components/EyeTwoToneIcon.tsx b/packages/internal-icons/src/components/EyeTwoToneIcon.tsx
@@ -6,8 +6,6 @@ import { type IconProps } from '../type';
 
 const componentName = 'EyeTwoToneIcon';
 export const EyeTwoToneIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 EyeTwoToneIcon.displayName = 'EyeTwoToneIcon';
diff --git a/packages/internal-icons/src/components/FileIcon.tsx b/packages/internal-icons/src/components/FileIcon.tsx
@@ -7,13 +7,7 @@ import { type IconProps } from '../type';
 const componentName = 'FileIcon';
 export const FileIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   return (
-    <AelfIcon
-      component={AelfSVGComponent}
-      componentName={componentName}
-      style={{ fontSize: '56px' }}
-      ref={ref}
-      {...props}
-    />
+    <AelfIcon component={AelfSVGComponent} style={{ fontSize: '56px' }} ref={ref} {...props} />
   );
 });
 FileIcon.displayName = componentName;
diff --git a/packages/internal-icons/src/components/Keyboard.tsx b/packages/internal-icons/src/components/Keyboard.tsx
@@ -6,8 +6,6 @@ import { type IconProps } from '../type';
 
 const componentName = 'Keyboard';
 export const Keyboard = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 Keyboard.displayName = componentName;
diff --git a/packages/internal-icons/src/components/NextButtonIcon.tsx b/packages/internal-icons/src/components/NextButtonIcon.tsx
@@ -9,7 +9,6 @@ export const NextButtonIcon = React.forwardRef<HTMLSpanElement, IconProps>((prop
   return (
     <AelfIcon
       component={AelfSVGComponent}
-      componentName={componentName}
       style={{
         width: '16px',
         height: '60px',

diff --git a/packages/internal-icons/src/components/PrevButtonIcon.tsx b/packages/internal-icons/src/components/PrevButtonIcon.tsx
@@ -9,7 +9,6 @@ export const PrevButtonIcon = React.forwardRef<HTMLSpanElement, IconProps>((prop
   return (
     <AelfIcon
       component={AelfSVGComponent}
-      componentName={componentName}
       style={{
         width: '16px',
         height: '60px',

diff --git a/packages/internal-icons/src/components/ProgressErrorIcon.tsx b/packages/internal-icons/src/components/ProgressErrorIcon.tsx
@@ -9,7 +9,6 @@ export const ProgressErrorIcon = React.forwardRef<HTMLSpanElement, IconProps>((p
   return (
     <AelfIcon
       component={AelfSVGComponent}
-      componentName={componentName}
       style={{
         fontSize: '24px',
       }}

diff --git a/packages/internal-icons/src/components/ProgressSuccessIcon.tsx b/packages/internal-icons/src/components/ProgressSuccessIcon.tsx
@@ -9,7 +9,6 @@ export const ProgressSuccessIcon = React.forwardRef<HTMLSpanElement, IconProps>(
   return (
     <AelfIcon
       component={AelfSVGComponent}
-      componentName={componentName}
       style={{
         fontSize: '24px',
       }}

diff --git a/packages/internal-icons/src/components/QueryIcon.tsx b/packages/internal-icons/src/components/QueryIcon.tsx
@@ -9,7 +9,6 @@ export const QueryIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, re
   return (
     <AelfIcon
       component={AelfSVGComponent}
-      componentName={componentName}
       style={{
         fontSize: '18px',
       }}

diff --git a/packages/internal-icons/src/components/UploadIcon.tsx b/packages/internal-icons/src/components/UploadIcon.tsx
@@ -7,13 +7,7 @@ import { type IconProps } from '../type';
 const componentName = 'UploadIcon';
 export const UploadIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   return (
-    <AelfIcon
-      component={AelfSVGComponent}
-      style={{ fontSize: '40px' }}
-      componentName={componentName}
-      ref={ref}
-      {...props}
-    />
+    <AelfIcon component={AelfSVGComponent} style={{ fontSize: '40px' }} ref={ref} {...props} />
   );
 });
 UploadIcon.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/BacktopOutlined.tsx b/packages/internal-icons/src/components/direction/BacktopOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'BacktopOutlined';
 export const BacktopOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 BacktopOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/DownArrowOutlined.tsx b/packages/internal-icons/src/components/direction/DownArrowOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'DownArrowOutlined';
 export const DownArrowOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 DownArrowOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/DownDoubleOutlined.tsx b/packages/internal-icons/src/components/direction/DownDoubleOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'DownDoubleOutlined';
 export const DownDoubleOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 DownDoubleOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/DownOutlined.tsx b/packages/internal-icons/src/components/direction/DownOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'DownOutlined';
 export const DownOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 DownOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/FullscreenOutlined.tsx b/packages/internal-icons/src/components/direction/FullscreenOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'FullscreenOutlined';
 export const FullscreenOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 FullscreenOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/FullsreenExitOutlined.tsx b/packages/internal-icons/src/components/direction/FullsreenExitOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'FullsreenExitOutlined';
 export const FullsreenExitOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 FullsreenExitOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/LeftArrowOutlined.tsx b/packages/internal-icons/src/components/direction/LeftArrowOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'LeftArrowOutlined';
 export const LeftArrowOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 LeftArrowOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/LeftOutlined.tsx b/packages/internal-icons/src/components/direction/LeftOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'LeftOutlined';
 export const LeftOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 LeftOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/MenuFoldOutlined.tsx b/packages/internal-icons/src/components/direction/MenuFoldOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'MenuFoldOutlined';
 export const MenuFoldOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 MenuFoldOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/MenuUnfoldOutlined.tsx b/packages/internal-icons/src/components/direction/MenuUnfoldOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'MenuUnfoldOutlined';
 export const MenuUnfoldOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 MenuUnfoldOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/RightArrowOutlined.tsx b/packages/internal-icons/src/components/direction/RightArrowOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'RightArrowOutlined';
 export const RightArrowOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 RightArrowOutlined.displayName = componentName;
diff --git a/packages/internal-icons/src/components/direction/RightOutlined.tsx b/packages/internal-icons/src/components/direction/RightOutlined.tsx
@@ -6,8 +6,6 @@ import { IconProps } from '../../type';
 
 const componentName = 'RightOutlined';
 export const RightOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
-  );
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
 });
 RightOutlined.displayName = componentName;