Merge pull request #85 from AElf-devops/feature/doc-upload

feat: add icon preview

.dumi/theme/builtins/IconSearch/Category.tsx

@@ -3,7 +3,7 @@ import { message } from 'antd';
 import { useIntl } from 'dumi';
 
 import CopyableIcon from './CopyableIcon';
-import { type CategoriesKeys } from './fields';
+import { CategoryNames, type CategoriesKeys } from './fields';
 import { type ThemeType } from './IconSearch';
 
 interface CategoryProps {
@@ -41,7 +41,7 @@ const Category: React.FC<CategoryProps> = (props) => {
 
   return (
     <div>
-      <h3>{intl.formatMessage({ id: `app.docs.components.icon.category.${title}` })}</h3>
+      <h3>{CategoryNames[title]}</h3>
       <ul className="anticons-list">
         {icons.map((name) => (
           <CopyableIcon

.dumi/theme/builtins/IconSearch/IconSearch.tsx

@@ -8,13 +8,11 @@ import { debounce } from 'lodash-es';
 
 import Category from './Category';
 import { categories, CategoriesKeys } from './fields';
-import { CircleFilledIcon, FilledIcon } from './themeIcons';
+import { FilledIcon, OutlinedIcon } from './themeIcons';
 
 export enum ThemeType {
   Filled = 'Filled',
-  CircleFilled = 'CircleFilled',
-  Colorful = 'Colorful',
-  CircleColorful = 'CircleColorful',
+  Outlined = 'Outlined',
 }
 
 const allIcons: Record<string, any> = AntdWeb3Icons;
@@ -32,14 +30,14 @@ const options = (
   onlyIcon?: boolean,
 ): SegmentedProps['options'] => [
   {
-    value: ThemeType.CircleFilled,
-    icon: <AntdIcon component={CircleFilledIcon} />,
-    label: !onlyIcon && formatMessage({ id: 'app.docs.components.icon.circle-filled' }),
+    value: ThemeType.Outlined,
+    icon: <AntdIcon component={OutlinedIcon} />,
+    label: !onlyIcon && 'Outlined',
   },
   {
     value: ThemeType.Filled,
     icon: <AntdIcon component={FilledIcon} />,
-    label: !onlyIcon && formatMessage({ id: 'app.docs.components.icon.filled' }),
+    label: !onlyIcon && 'Filled',
   },
 ];
 
@@ -55,7 +53,7 @@ const IconSearch: React.FC = () => {
   const { styles } = useStyle();
   const [displayState, setDisplayState] = useState<IconSearchState>({
     searchKey: '',
-    theme: ThemeType.CircleColorful,
+    theme: ThemeType.Outlined,
   });
 
   const newIconNames: string[] = [];
@@ -126,7 +124,7 @@ const IconSearch: React.FC = () => {
             onChange={handleChangeTheme}
           />
           <Input.Search
-            placeholder={intl.formatMessage({ id: 'app.docs.components.icon.search.placeholder' })}
+            placeholder="Search icons here, click icon to copy code"
             style={{ flex: 1, marginInlineStart: 16 }}
             allowClear
             autoFocus

.dumi/theme/builtins/IconSearch/fields.ts

@@ -1,53 +1,42 @@
-import * as AntdWeb3Icons from '@aelf-design/internal-icons';
+import * as AntdIcons from '@ant-design/icons/lib/icons';
 
-const all = Object.keys(AntdWeb3Icons)
-  .map((n) => n.replace(/(CircleColorful|Colorful|Filled|CircleFilled)$/, ''))
+const all = Object.keys(AntdIcons)
+  .map((n) => n.replace(/(Outlined|Filled|TwoTone)$/, ''))
   .filter((n, i, arr) => arr.indexOf(n) === i);
 
-const chain = [
-  'Arbitrum',
-  'Bitcoin',
-  'BSC',
-  'Ethereum',
-  'Optimism',
-  'Polygon',
-  'Sui',
-  'Tron',
-  'Base',
-  'Avalanche',
-  'Fantom',
-  'Celo',
-  'Cronos',
-  'Moonbeam',
-  'Solana',
-];
-
-const token = ['DAI', 'WBTC', 'AAVE', 'USDT'];
-
-const tool = [
-  'CoinbaseWallet',
-  'Etherscan',
-  'MetaMask',
-  'WalletConnect',
-  'TokenPocket',
-  'Safeheron',
-  'Uniswap',
-  'PancakeSwap',
-  'SushiSwap',
-  'Phantom',
-  'OkxWallet',
-];
-
-const datum = [...chain, ...token, ...tool];
+// 方向指示类图标
+const direction = ['CircleCloseIcon', 'ClearIcon'];
+
+// 提示建议类图标
+const suggestion: string[] = [];
+
+// 交互按钮图标
+const interaction: string[] = [];
+
+// 聊天图标
+const chat: string[] = [];
+
+const datum = [...direction, ...suggestion, ...interaction, ...chat];
 
 const other = all.filter((n) => !datum.includes(n));
 
 export const categories = {
-  chain,
-  token,
-  tool,
+  direction,
+  suggestion,
+  interaction,
+  chat,
   other,
 };
 
+export const CategoryNames = {
+  direction: '方向指示类图标',
+  suggestion: '提示建议类图标',
+  interaction: '交互按钮图标',
+  chat: '聊天图标',
+  other: '其他图标',
+};
+
+export default categories;
+
 export type Categories = typeof categories;
 export type CategoriesKeys = keyof Categories;

.dumi/theme/builtins/IconSearch/themeIcons.tsx

@@ -7,24 +7,23 @@ type CustomIconComponent = React.ComponentType<
 
 export const FilledIcon: CustomIconComponent = (props) => {
   const path =
-    'M864 64H160C107 64 64 107 64 160v7' +
-    '04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' +
-    '0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-' +
-    '12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4' +
-    ' 12 12v680c0 6.6-5.4 12-12 12z';
+    'M864 64H160C107 64 64 107 64 160v' +
+    '704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +
+    '0c0-53-43-96-96-96z';
   return (
     <svg {...props} viewBox="0 0 1024 1024">
       <path d={path} />
     </svg>
   );
 };
 
-export const CircleFilledIcon: CustomIconComponent = (props) => {
+export const OutlinedIcon: CustomIconComponent = (props) => {
   const path =
-    'M16 512c0 273.932 222.066 496 496 49' +
-    '6s496-222.068 496-496S785.932 16 512 16 16 238.' +
-    '066 16 512z m496 368V144c203.41 0 368 164.622 3' +
-    '68 368 0 203.41-164.622 368-368 368z';
+    'M864 64H160C107 64 64 107 64 160v7' +
+    '04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' +
+    '0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-' +
+    '12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4' +
+    ' 12 12v680c0 6.6-5.4 12-12 12z';
   return (
     <svg {...props} viewBox="0 0 1024 1024">
       <path d={path} />

packages/component/src/Input/index.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 import {
-  CircleCloseIcon,
-  ClearIcon,
+  CircleCloseIconOutlined,
   EyeInvisibleOutlinedIcon,
   EyeTwoToneIcon,
   IconProps,
@@ -42,7 +41,7 @@ const getClearIcon = (
         onClear?.(e);
       }}
     >
-      <CircleCloseIcon
+      <CircleCloseIconOutlined
         color={token?.colorBorder}
         hoverColor={token?.Table?.headerBg}
         activeColor={token?.colorTextDisabled}

packages/component/src/Upload/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
-import { ClearIcon, FileIcon } from '@aelf-design/internal-icons';
+import { ClearIconFilled, FileIcon } from '@aelf-design/internal-icons';
 import { Upload as AntdUpload, UploadProps as AntdUploadProps, Image } from 'antd';
 import { useTheme } from 'antd-style';
 import { UploadFile } from 'antd/es/upload';
@@ -42,7 +42,7 @@ function UploadItemRender({
               actions.remove();
             }}
           >
-            <ClearIcon
+            <ClearIconFilled
               color={token.colorPrimary}
               hoverColor={token.colorPrimaryHover}
               activeColor={token.colorPrimaryActive}
@@ -69,7 +69,7 @@ function UploadItemRender({
             actions.remove();
           }}
         >
-          <ClearIcon
+          <ClearIconFilled
             color={token.colorPrimary}
             hoverColor={token.colorPrimaryHover}
             activeColor={token.colorPrimaryActive}

packages/component/src/icon/index.md

@@ -0,0 +1,10 @@
+---
+nav: Components
+group:
+  title: Display
+  order: 3
+---
+
+## 图标列表
+
+<IconSearch></IconSearch>

packages/component/src/icon/index.ts

@@ -0,0 +1,5 @@
+const Icon: React.FC = () => {
+  return null;
+};
+
+export default Icon;

packages/internal-icons/src/components/CircleClose.tsx

@@ -4,17 +4,19 @@ import { AelfIcon } from '../icon/AelfIcon';
 import AelfSVGComponent from '../svgs/circle-close.svg';
 import { type IconProps } from '../type';
 
-const componentName = 'CircleCloseIcon';
-export const CircleCloseIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
-  return (
-    <AelfIcon
-      component={AelfSVGComponent}
-      componentName={componentName}
-      defaultWidth={16}
-      defaultHeight={16}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-CircleCloseIcon.displayName = componentName;
+const componentName = 'CircleCloseIconOutlined';
+export const CircleCloseIconOutlined = React.forwardRef<HTMLSpanElement, IconProps>(
+  (props, ref) => {
+    return (
+      <AelfIcon
+        component={AelfSVGComponent}
+        componentName={componentName}
+        defaultWidth={16}
+        defaultHeight={16}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+CircleCloseIconOutlined.displayName = componentName;

packages/internal-icons/src/components/ClearIcon.tsx

@@ -4,8 +4,8 @@ import { AelfIcon } from '../icon/AelfIcon';
 import AelfSVGComponent from '../svgs/clear-icon.svg';
 import { type IconProps } from '../type';
 
-const componentName = 'ClearIcon';
-export const ClearIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+const componentName = 'ClearIconFilled';
+export const ClearIconFilled = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   return (
     <AelfIcon
       component={AelfSVGComponent}
@@ -17,4 +17,4 @@ export const ClearIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, re
     />
   );
 });
-ClearIcon.displayName = 'ClearIcon';
+ClearIconFilled.displayName = componentName;