feat: add or update sotries of alert, avatar and button

affects: @gio-design/components

packages/components/jest.config.js

@@ -21,6 +21,11 @@ module.exports = {
       '<rootDir>/__mocks__/fileMock.js',
     'iconfont.js': '<rootDir>/__mocks__/iconMock.js',
   },
-  collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/index.{ts,tsx}', '!src/**/interface.ts'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/index.{ts,tsx}',
+    '!src/**/interfaces.ts',
+    '!src/**/*.stories.{ts,tsx}',
+  ],
   coverageDirectory: './coverage/',
 };

packages/components/src/components/alert/Alert.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+
+import Alert from './index';
+import { AlertProps } from './interfaces';
+import './style';
+
+export default {
+  title: 'Components/Basic/Alert',
+  component: Alert,
+} as Meta;
+
+const Template: Story<AlertProps> = (args) => <Alert {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  type: 'success',
+  message: 'Success Alert',
+};

packages/components/src/components/alert/alert.tsx

@@ -1,21 +1,8 @@
-import React, { ReactNode, useState } from 'react';
+import React, { useState } from 'react';
 import classnames from 'classnames';
-
+import _ from 'lodash';
 import { CheckCircleFilled, WarningFilled, InformationFilled, CloseCircleFilled, Close } from '@gio-design/icons';
-
-interface AlertProps {
-  afterClose?: any;
-  // banner?: boolean;
-  closeable?: boolean;
-  colseText?: string | ReactNode;
-  description?: string | ReactNode;
-  icon?: ReactNode;
-  message?: string | ReactNode;
-  showIcon?: boolean;
-  type?: string;
-  onClose?: any;
-  size?: string;
-}
+import { AlertProps } from './interfaces';
 
 const Alert: React.FC<AlertProps> = (props: AlertProps) => {
   const [alertStatus, setAlertStatus] = useState(true);
@@ -32,7 +19,6 @@ const Alert: React.FC<AlertProps> = (props: AlertProps) => {
   } = props;
 
   const getIcon = () => {
-    const { type, showIcon } = props;
     switch (type) {
       case 'success':
         return <CheckCircleFilled color="#00875A" />;
@@ -72,7 +58,14 @@ const Alert: React.FC<AlertProps> = (props: AlertProps) => {
             {description || null}
           </div>
         </div>
-        <div className="gio-alert-closeIcon" style={{ display: closeable ? 'block' : 'none' }} onClick={closeAlert}>
+        <div
+          className="gio-alert-closeIcon"
+          style={{ display: closeable ? 'block' : 'none' }}
+          onClick={closeAlert}
+          role="button"
+          tabIndex={0}
+          onKeyPress={_.noop}
+        >
           {colseText || <Close />}
         </div>
       </div>

packages/components/src/components/alert/index.tsx

@@ -1,3 +1,4 @@
 import Alert from './alert';
 
+export { AlertProps } from './interfaces';
 export default Alert;

packages/components/src/components/alert/interfaces.ts

@@ -0,0 +1,38 @@
+export interface AlertProps {
+  /**
+   指定警告提示的样式
+   */
+  type?: 'success' | 'info' | 'warning' | 'error';
+  /**
+   指定警告的尺寸
+   */
+  size?: 'small' | 'middle';
+  /**
+   是否显示关闭按钮
+   */
+  closeable?: boolean;
+  /**
+   自定义关闭按钮
+   */
+  colseText?: React.ReactNode;
+  /**
+   警告提示的辅助性文字介绍
+   */
+  description?: React.ReactNode;
+  /**
+   警告提示内容
+   */
+  message?: React.ReactNode;
+  /**
+   是否显示辅助图标
+   */
+  showIcon?: boolean;
+  /**
+   自定义图标，showIcon 为 true 时有效
+   */
+  icon?: React.ReactNode;
+  /**
+   关闭时触发的回调函数
+   */
+  onClose?: () => void;
+}

packages/components/src/components/avatar/Avatar.stories.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 
 import Avatar from './index';
-import { AvatarProps } from './interface';
+import { AvatarProps } from './interfaces';
 import './style';
 
 export default {
-  title: 'Components/Basic/Avatar',
+  title: 'Components/Functional/Avatar',
   component: Avatar,
 } as Meta;
 

packages/components/src/components/avatar/Avatar.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import classNames from 'classnames';
 import { More } from '@gio-design/icons';
+import { isNil } from 'lodash';
 import Tooltip from '../tooltip';
-import { AvatarProps } from './interface';
+import { AvatarProps } from './interfaces';
 import { ConfigContext } from '../config-provider';
 import composeRef from '../../utils/composeRef';
-import { isNil } from 'lodash';
 
 const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props: AvatarProps, ref: React.Ref<HTMLSpanElement>) => {
   const {
@@ -85,6 +85,7 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props: AvatarProp
     );
 
   return renderTooltip(
+    // eslint-disable-next-line react/jsx-props-no-spreading
     <span ref={mergedRef} className={classString} {...rest}>
       {renderMore()}
       {renderAvatar()}

packages/components/src/components/avatar/AvatarGroup.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
 import Avatar from './Avatar';
-import { AvatarGroupProps, UserAvatarType } from './interface';
+import { AvatarGroupProps, UserAvatarType } from './interfaces';
 import { ConfigContext } from '../config-provider';
 
 const AvatarGroup: React.FC<AvatarGroupProps> = (props: AvatarGroupProps) => {
@@ -11,20 +11,21 @@ const AvatarGroup: React.FC<AvatarGroupProps> = (props: AvatarGroupProps) => {
   const prefixCls = getPrefixCls('avatar');
 
   let children = null;
-  const renderAvatarGroup = (users: UserAvatarType[]) =>
-    users.map((user, idx) => (
-      <Avatar key={idx} displayTooltip={displayTooltip} placement={placement} {...user}>
+  const renderAvatarGroup = (sliceUsers: UserAvatarType[]) =>
+    sliceUsers.map((user) => (
+      <Avatar key={user.name} displayTooltip={displayTooltip} placement={placement} {...user}>
         {user.name}
       </Avatar>
     ));
-  const renderAvatarRest = (users: UserAvatarType[]) => (
-    <Avatar className={`${prefixCls}-rest`} omit={false}>{`+${users.length}`}</Avatar>
+  const renderAvatarRest = (restUsers: UserAvatarType[]) => (
+    <Avatar className={`${prefixCls}-rest`} omit={false}>{`+${restUsers.length}`}</Avatar>
   );
   const classString = classNames(className, `${prefixCls}-group`);
 
   if (users.length === 0) {
     return null;
-  } else if (users.length <= number) {
+  }
+  if (users.length <= number) {
     children = renderAvatarGroup(users);
   } else {
     const sliceUsers = _.slice(users, 0, number - 1);

packages/components/src/components/avatar/index.tsx

@@ -2,4 +2,4 @@ import Avatar from './Avatar';
 
 export default Avatar;
 export { default as AvatarGroup } from './AvatarGroup';
-export { AvatarProps, UserAvatarType, AvatarGroupProps } from './interface';
+export { AvatarProps, UserAvatarType, AvatarGroupProps } from './interfaces';

packages/components/src/components/avatar/interface.ts → packages/components/src/components/avatar/interfaces.ts

@@ -13,17 +13,47 @@ export type tooltipPlacement =
   | 'bottomRight';
 
 export interface AvatarProps {
+  /**
+   设置头像的尺寸大小
+   */
   size?: 'small' | 'default' | 'large' | 'huge';
   droppable?: boolean;
+  /**
+    设置头像的尺寸大小
+   */
   src?: string;
+  /**
+   是否省略用户名称
+   */
   omit?: boolean;
+  /**
+   自定义混入 `CSS` 类
+   */
   className?: string;
-  children?: string;
+  /**
+   自定义混入 `CSS` 样式
+   */
   style?: React.CSSProperties;
+  /**
+   气泡框位置，可选 12 个方位
+   */
   placement?: tooltipPlacement;
+  /**
+   自定义 `CSS` 类前缀
+   */
   prefixCls?: string;
+  /**
+   用 `Tooltip` 显示用户名
+   */
   displayTooltip?: boolean;
+  /**
+   自定义气泡框的内容
+   */
   tooltipTitle?: React.ReactNode;
+  /**
+   设置字符，用作用户头像
+   */
+  children?: string;
 }
 
 export interface UserAvatarType {

packages/components/src/components/button/Button.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 
 import Button from './index';
-import { ButtonProps } from './interface';
+import { ButtonProps } from './interfaces';
 import './style';
 
 export default {

packages/components/src/components/button/button.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { LoadingOutlined } from '@gio-design/icons';
 import { ConfigContext } from '../config-provider';
 import SizeContext from '../config-provider/SizeContext';
-import { ButtonProps } from './interface';
+import { ButtonProps } from './interfaces';
 import { cloneElement } from '../../utils/reactNode';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
@@ -20,10 +20,10 @@ function insertSpace(child: React.ReactChild, needInserted: boolean) {
   }
   const SPACE = needInserted ? ' ' : '';
   if (
-    typeof child !== 'string'
-    && typeof child !== 'number'
-    && isString(child.type)
-    && isTwoCNChar(child.props.children)
+    typeof child !== 'string' &&
+    typeof child !== 'number' &&
+    isString(child.type) &&
+    isTwoCNChar(child.props.children)
   ) {
     return cloneElement(child, {
       children: child.props.children.split('').join(SPACE),
@@ -139,7 +139,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   if (icon && !innerLoading) {
     iconNode = icon;
   } else if (innerLoading) {
-    iconNode = <LoadingOutlined rotating />
+    iconNode = <LoadingOutlined rotating />;
   }
 
   const kids = children || children === 0 ? spaceChildren(children, isNeedInserted() && autoInsertSpace) : null;

packages/components/src/components/button/index.tsx

@@ -1,6 +1,6 @@
 import Button from './button';
 
-export { ButtonProps, ButtonType } from './interface';
+export { ButtonProps, ButtonType } from './interfaces';
 
 export { SizeType as ButtonSize } from '../config-provider/SizeContext';