Merge pull request #91 from AElf-devops/release/v1.0.0

feat: add chat icon and interactive icon

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

@@ -68,7 +68,6 @@ const IconSearch: React.FC = () => {
 
   const renderCategories = useMemo<React.ReactNode | React.ReactNode[]>(() => {
     const { searchKey = '', theme } = displayState;
-
     const categoriesResult = Object.keys(categories)
       .map((key) => {
         let iconList = categories[key as CategoriesKeys];

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

@@ -2,10 +2,6 @@ import * as AntdIcons from '@aelf-design/internal-icons';
 
 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 other: string[] = [];
 
 export const categories: Record<string, string[]> = {

.dumi/theme/builtins/IconSearch/icon-config.json

@@ -1,4 +1,25 @@
 {
+  "chat": [
+    "Album",
+    "Attach",
+    "Camera",
+    "ChatNew",
+    "Chat",
+    "Group",
+    "Keyboard",
+    "Mute",
+    "Pin",
+    "QrCode",
+    "RedPacket",
+    "Smile",
+    "Transfer",
+    "Unmute",
+    "Unpin",
+    "UserAdd",
+    "UserAdded",
+    "UserFind",
+    "UserProfile"
+  ],
   "direction": [
     "Backtop",
     "DownArrow",
@@ -20,5 +41,48 @@
     "UpArrow",
     "Up"
   ],
-  "suggestion": ["Add", "Check", "Minus"]
+  "interactive": [
+    "Artboard",
+    "Calendar",
+    "Clear",
+    "Copy",
+    "Delete",
+    "Download",
+    "Edit",
+    "Exit",
+    "EyeInvisible",
+    "Eye",
+    "Filter",
+    "FingerPrint",
+    "Lock",
+    "Menu",
+    "More",
+    "MoreVertical",
+    "Refresh",
+    "Scan",
+    "Search",
+    "ShareExternal",
+    "ShareInternal",
+    "Star",
+    "Switch",
+    "Upload",
+    "Wallet"
+  ],
+  "suggestion": [
+    "AddCircle",
+    "Add",
+    "CheckCircle",
+    "Check",
+    "Circle",
+    "CloseCircle",
+    "Close",
+    "ExclamationCircle",
+    "InfoCircle",
+    "MinusCircle",
+    "Minus",
+    "MoreCircle",
+    "QuestionCircle",
+    "Stop",
+    "TimeCircle"
+  ]
 }

docs/icon.md

@@ -1,10 +1,10 @@
 ---
-nav: icons
+nav: Icons
 group:
   title: Display
   order: 3
 ---
 
-## 图标列表
+## Icon List
 
 <IconSearch></IconSearch>

packages/component/src/provider.tsx

@@ -123,6 +123,10 @@ const AELFDProvider = (props: IAelfdThemeProviderProps) => {
       theme={(appearance: ThemeAppearance) => {
         const comp = {
           ...props.theme?.components,
+          Button: {
+            colorPrimary: appearance === 'dark' ? '#1370DD' : '#127FFF',
+            ...props.theme?.components?.Button,
+          },
           Input: {
             paddingBlock: 11,
             paddingBlockSM: 7,

packages/internal-icons/src/components/chat/AlbumOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/album.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'AlbumOutlined';
+export const AlbumOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+AlbumOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/AttachOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/attach.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'AttachOutlined';
+export const AttachOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+AttachOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/CameraOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/camera.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'CameraOutlined';
+export const CameraOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+CameraOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/ChatNewOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/chat-new.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'ChatNewOutlined';
+export const ChatNewOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+ChatNewOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/ChatOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/chat.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'ChatOutlined';
+export const ChatOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+ChatOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/GroupOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/group.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'GroupOutlined';
+export const GroupOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+GroupOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/KeyboardOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/keyboard.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'KeyboardOutlined';
+export const KeyboardOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+KeyboardOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/MuteOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/mute.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'MuteOutlined';
+export const MuteOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+MuteOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/PinOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/pin.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'PinOutlined';
+export const PinOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+PinOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/QrCodeOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/qr-code.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'QrCodeOutlined';
+export const QrCodeOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+QrCodeOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/RedPacketOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/red-packet.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'RedPacketOutlined';
+export const RedPacketOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+RedPacketOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/SmileOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/smile.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'SmileOutlined';
+export const SmileOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+SmileOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/TransferOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/transfer.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'TransferOutlined';
+export const TransferOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+TransferOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/UnmuteOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/unmute.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'UnmuteOutlined';
+export const UnmuteOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+UnmuteOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/UnpinOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/unpin.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'UnpinOutlined';
+export const UnpinOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+UnpinOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/UserAddOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/user-add.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'UserAddOutlined';
+export const UserAddOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+UserAddOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/UserAddedOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/user-added.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'UserAddedOutlined';
+export const UserAddedOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+UserAddedOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/UserFindOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/user-find.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'UserFindOutlined';
+export const UserFindOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+UserFindOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/UserProfileOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/chat/user-profile.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'UserProfileOutlined';
+export const UserProfileOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+UserProfileOutlined.displayName = componentName;

packages/internal-icons/src/components/chat/index.tsx

@@ -0,0 +1,19 @@
+export * from './AlbumOutlined';
+export * from './AttachOutlined';
+export * from './CameraOutlined';
+export * from './ChatNewOutlined';
+export * from './ChatOutlined';
+export * from './GroupOutlined';
+export * from './KeyboardOutlined';
+export * from './MuteOutlined';
+export * from './PinOutlined';
+export * from './QrCodeOutlined';
+export * from './RedPacketOutlined';
+export * from './SmileOutlined';
+export * from './TransferOutlined';
+export * from './UnmuteOutlined';
+export * from './UnpinOutlined';
+export * from './UserAddOutlined';
+export * from './UserAddedOutlined';
+export * from './UserFindOutlined';
+export * from './UserProfileOutlined';

packages/internal-icons/src/components/interactive/ArtboardOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/interactive/artboard.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'ArtboardOutlined';
+export const ArtboardOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+ArtboardOutlined.displayName = componentName;

packages/internal-icons/src/components/interactive/CalendarOutlined.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../../icon/AelfIcon';
+import AelfSVGComponent from '../../svgs/interactive/calendar.svg';
+import { IconProps } from '../../type';
+
+const componentName = 'CalendarOutlined';
+export const CalendarOutlined = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <AelfIcon component={AelfSVGComponent} ref={ref} {...props} />;
+});
+CalendarOutlined.displayName = componentName;