refactor: refactor: modify nonstandard component's name (#1910)

BREAKING CHANGE: #### 取消从 `src/index.ts` 文件导出的子组件 `import { AvatarGroup } from '@gio-design/components';` 的用法需要更换为 `import { Avatar } from '@gio-design/components'; const { Group: AvatarGroup } = Avatar;` 1. AvatarGroup 2. CheckboxGroup 3. RadioGroup 4. Tab 5. Step 6. Text 7. Title 8. InputButton 9. InputNumber 10. Password 11. TextArea 12. IconButton #### src/popconfig 文件夹更名为 src/pop-confirm 如果有引入了该文件夹下的模块，请更改为 `import { PopConfirmProps } from '@gio-design/components/es/pop-confirm'` #### Toggles 组件更名为 Toggle #### SwitchGroupProps 类型更名为 SwitchProps #### 一些组件的 props 更名 1. Collapse: ```diff interface CollapseProps { ... - destoryOnHide + destroyOnHide } ``` 2. Popover: ```diff interface PopoverProps { ... - distoryOnHide + destroyOnHide } ``` 3. CascaderOptions: `childrens` -> `items` (传给 Cascader 的 options 数组中，之前的 `childrens` 字段更换为了 `items`) ```diff interface CascaderItemProps extends BaseItemProps { ... - childrens?: CascaderItemProps[]; + items?: CascaderItemProps[]; } ``` #### 一些组件的 interface 文件更名 1. Cascader: interfance.ts -> interface.ts 1. List: interfance.ts -> interface.ts 1. ListPicker: interfance.ts -> interface.ts Co-authored-by: maxin <maxin@growingio.com>
growingio · Apr 14, 2022 · 0762d21 · 0762d21 · vercel · Apr 14, 2022
1 parent 44c18c9
commit 0762d21
Show file tree

Hide file tree

Showing 163 changed files with 979 additions and 902 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,5 @@
 *.d.ts
+node_modules/
+dist/
+es/
+storybook-static/
diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -9,7 +9,7 @@ import {
   CloseCircleFilled,
   CloseOutlined,
 } from '@gio-design/icons';
-import IconButton from '../button/IconButton';
+import Button from '../button';
 import { AlertProps } from './interfaces';
 
 export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
@@ -55,7 +55,7 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
           {description && <div className={classnames(`${prefixCls}-content-description`)}>{description}</div>}
         </div>
         {closeable && (
-          <IconButton
+          <Button.IconButton
             className={classnames(`${prefixCls}-closeButton`)}
             onClick={closeAlert}
             tabIndex={0}
@@ -64,7 +64,7 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
             size="small"
           >
             <CloseOutlined />
-          </IconButton>
+          </Button.IconButton>
         )}
       </div>
     ) : null;

diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
@@ -6,6 +6,8 @@ import { usePrefixCls } from '@gio-design/utils';
 import Tooltip from '../tooltip';
 import { AvatarProps } from './interfaces';
 import composeRef from '../utils/composeRef';
+import WithSubComponent from '../utils/withSubComponent';
+import AvatarGroup from './AvatarGroup';
 
 const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
   (
@@ -122,4 +124,6 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
   }
 );
 
-export default Avatar;
+export default WithSubComponent(Avatar, {
+  Group: AvatarGroup,
+});
diff --git a/src/avatar/AvatarGroup.tsx b/src/avatar/AvatarGroup.tsx
@@ -43,7 +43,7 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = (props: AvatarGroupProps)
   }
 
   return (
-    <div className={classString} style={style} test-dataId="avatarGroup" {...restProps}>
+    <div className={classString} style={style} data-testid="avatarGroup" {...restProps}>
       {children}
     </div>
   );

diff --git a/src/avatar/demos/Avatar.stories.tsx b/src/avatar/demos/Avatar.stories.tsx
@@ -4,15 +4,14 @@ import { AppOutlined, EditOutlined, SettingOutlined, UserOutlined } from '@gio-d
 import Docs from './AvatarPage';
 import Avatar, { AvatarProps } from '../index';
 import '../style';
-import AvatarGroup from '../AvatarGroup';
 import Dropdown from '../../dropdown';
 import { List } from '../..';
 
 export default {
   title: 'Upgraded/Avatar',
   component: Avatar,
   subcomponents: {
-    AvatarGroup,
+    'Avatar.Group': Avatar.Group,
   },
   parameters: {
     docs: {
@@ -121,7 +120,7 @@ export const Fallbacks = () => (
 
 export const Grouped = () => (
   <>
-    <AvatarGroup
+    <Avatar.Group
       number={4}
       users={[
         { name: 'Jay Chou', backgroundColor: 'purple' },

diff --git a/src/avatar/demos/AvatarPage.tsx b/src/avatar/demos/AvatarPage.tsx
@@ -119,7 +119,7 @@ export default function ListPage() {
       <Description>
         {formatMessage({
           defaultMessage:
-            '使用 `<AvatarGroup />` 组件并传入 `users` 参数，可以将头像排列成一组。用 `number` 参数来限制渲染的头像数量',
+            '使用 `<Avatar.Group />` 组件并传入 `users` 参数，可以将头像排列成一组。用 `number` 参数来限制渲染的头像数量',
         })}
       </Description>
       <Description>

diff --git a/src/avatar/index.tsx → src/avatar/index.ts b/src/avatar/index.tsx → src/avatar/index.ts
diff --git a/src/avatar/interfaces.ts b/src/avatar/interfaces.ts
@@ -73,9 +73,7 @@ export interface UserAvatarType extends AvatarProps {
   name: string;
 }
 
-export interface AvatarGroupProps {
-  className?: string;
-  style?: React.CSSProperties;
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * 展示的头像数，如果超过此参数，剩余的头像将会隐藏
    * @default 5

diff --git a/src/avatar/style/index.ts b/src/avatar/style/index.ts
@@ -1,2 +1,2 @@
-import '../../tooltip/index';
+import '../../tooltip/style';
 import './index.less';
diff --git a/src/button/demos/Button.stories.tsx b/src/button/demos/Button.stories.tsx
@@ -1,17 +1,18 @@
 import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { PlusOutlined, FilterOutlined, FolderOutlined } from '@gio-design/icons';
-import Button from '../index';
-import { ButtonProps, IconButtonProps } from '../interface';
-import '../style';
+import Button, { ButtonProps, IconButtonProps } from '..';
 import Docs from './ButtonPage';
-import Checkbox from '../../checkbox/Checkbox';
+import Checkbox from '../../checkbox';
+import '../style';
+import '../../checkbox/style';
 
-const { IconButton } = Button;
 export default {
   title: 'Upgraded/Button',
   component: Button,
-  subcomponents: { 'Button.IconButton': Button.IconButton },
+  subcomponents: {
+    'Button.IconButton': Button.IconButton,
+  },
   argTypes: {
     prefix: {
       control: { type: 'text' }, // 不约束react_node会传入对象导致报错
@@ -53,15 +54,15 @@ export const Types: Story<ButtonProps> = () => (
     <Button prefix={<PlusOutlined />} type="text">
       text
     </Button>
-    <IconButton type="primary">
+    <Button.IconButton type="primary">
       <PlusOutlined />
-    </IconButton>
-    <IconButton type="secondary">
+    </Button.IconButton>
+    <Button.IconButton type="secondary">
       <PlusOutlined />
-    </IconButton>
-    <IconButton type="text">
+    </Button.IconButton>
+    <Button.IconButton type="text">
       <PlusOutlined />
-    </IconButton>
+    </Button.IconButton>
   </>
 );
 export const Disabled: Story<ButtonProps> = () => (
@@ -83,18 +84,18 @@ export const Disabled: Story<ButtonProps> = () => (
 
 export const IconOnly: Story<IconButtonProps> = () => (
   <>
-    <IconButton>
+    <Button.IconButton>
       <FilterOutlined />
-    </IconButton>
-    <IconButton type="secondary">
+    </Button.IconButton>
+    <Button.IconButton type="secondary">
       <FilterOutlined />
-    </IconButton>
-    <IconButton type="text">
+    </Button.IconButton>
+    <Button.IconButton type="text">
       <FilterOutlined />
-    </IconButton>
-    <IconButton type="secondary" style={{ fontSize: '20px' }}>
+    </Button.IconButton>
+    <Button.IconButton type="secondary" style={{ fontSize: '20px' }}>
       <FilterOutlined />
-    </IconButton>
+    </Button.IconButton>
   </>
 );
 
@@ -112,9 +113,9 @@ export const Sizes: Story<ButtonProps> = () => (
     <Button size="normal" type="text">
       text
     </Button>
-    <IconButton size="normal" type="secondary">
+    <Button.IconButton size="normal" type="secondary">
       <FilterOutlined />
-    </IconButton>
+    </Button.IconButton>
     <br />
     <Button size="small">small</Button>
     <Button size="small" type="secondary">
@@ -126,9 +127,9 @@ export const Sizes: Story<ButtonProps> = () => (
     <Button size="small" type="text">
       text
     </Button>
-    <IconButton size="small" type="secondary">
+    <Button.IconButton size="small" type="secondary">
       <FilterOutlined />
-    </IconButton>
+    </Button.IconButton>
   </>
 );
 
@@ -195,7 +196,7 @@ export const Loading: Story<ButtonProps> = () => {
       >
         Click Me !
       </Button>
-      <IconButton
+      <Button.IconButton
         size="normal"
         type="secondary"
         loading={loading2}
@@ -207,7 +208,7 @@ export const Loading: Story<ButtonProps> = () => {
         }}
       >
         <PlusOutlined />
-      </IconButton>
+      </Button.IconButton>
     </>
   );
 };

diff --git a/src/button/demos/ButtonPage.tsx b/src/button/demos/ButtonPage.tsx
@@ -102,7 +102,7 @@ export default function ButtonPage() {
       <Description>
         {formatMessage({
           defaultMessage:
-            '有些时候你可能希望为某些按钮设置图标，以增强应用程序的用户体验。可以通过设置 prefix, suffix 为Svg图标来实现',
+            '有些时候你可能希望为某些按钮设置图标，以增强应用程序的用户体验。可以通过设置 prefix, suffix 为 Svg 图标来实现',
         })}
       </Description>
       <Canvas>
@@ -112,7 +112,7 @@ export default function ButtonPage() {
       <Description>
         {formatMessage({
           defaultMessage:
-            '图标按钮通常位于应用栏和工具栏中。 通过 Button.IconButton组件，配合Svg图标使用。可以通过设置IconButton 的style.fontSize修改图标的大小',
+            '图标按钮通常位于应用栏和工具栏中。 通过 Button.IconButton 组件，配合 Svg 图标使用。可以通过设置 Button.IconButton 的 style.fontSize 修改图标的大小',
         })}
       </Description>
       <Canvas>
@@ -132,17 +132,17 @@ export default function ButtonPage() {
       <Subheading>{formatMessage({ defaultMessage: 'Block 按钮' })}</Subheading>
       <Description>
         {formatMessage({
-          defaultMessage: '可以通过设置Button 的style.width=100% 使按钮适合其父宽度',
+          defaultMessage: '可以通过设置 Button 的 style.width=100% 使按钮适合其父宽度',
         })}
       </Description>
       <Canvas>
         <Story id="upgraded-button--block-button" />
       </Canvas>
-      <Subheading>{formatMessage({ defaultMessage: '按钮的active状态' })}</Subheading>
+      <Subheading>{formatMessage({ defaultMessage: '按钮的 active 状态' })}</Subheading>
       <Description>
         {formatMessage({
           defaultMessage:
-            '按钮在非禁用状态下包含hover/active样式。可以设置active=true 来给按钮添加一个active状态。可以用于按钮与Dropdown组合下拉菜单时，当下拉列表展开时给按钮一个激活状态',
+            '按钮在非禁用状态下包含 hover/active 样式。可以设置 active=true 来给按钮添加一个 active 状态。可以用于按钮与 Dropdown 组合下拉菜单时，当下拉列表展开时给按钮一个激活状态',
         })}
       </Description>
       <Canvas>

diff --git a/src/button/index.ts b/src/button/index.ts
@@ -1,10 +1,8 @@
 import WithSubComponent from '../utils/withSubComponent';
-import InternalButton from './Button';
+import Button from './Button';
 import IconButton from './IconButton';
 
-const Button = WithSubComponent(InternalButton, { IconButton });
+export type { ButtonProps, ButtonType, IconButtonProps } from './interface';
+export { IconButton };
 
-export type { ButtonProps, IconButtonProps, ButtonType } from './interface';
-export { Button, IconButton };
-
-export default Button;
+export default WithSubComponent(Button, { IconButton });