fix(storybook): fix storybook and bugs (#1502)

Co-authored-by: zhujiahong <zhujiahong@growingio.com>
growingio · Nov 22, 2021 · 104a427 · 104a427 · vercel · Nov 22, 2021
1 parent 561abe7
commit 104a427
Show file tree

Hide file tree

Showing 37 changed files with 351 additions and 169 deletions.
diff --git a/src/button/demos/Button.stories.tsx b/src/button/demos/Button.stories.tsx
@@ -10,6 +10,7 @@ import Docs from './ButtonPage';
 export default {
   title: 'Upgraded/Button',
   component: Button,
+  subcomponents: { IconButton: Button.IconButton },
   argTypes: {
     prefix: {
       control: { type: 'text' }, // 不约束react_node会传入对象导致报错

diff --git a/src/card/Card.tsx b/src/card/Card.tsx
@@ -4,7 +4,7 @@ import { usePrefixCls } from '@gio-design/utils';
 import { CardProps } from './interfaces';
 import WithRef from '../utils/withRef';
 
-const CardMeta = WithRef<HTMLDivElement, HTMLAttributes<CardProps> & CardProps>(
+export const Card = WithRef<HTMLDivElement, HTMLAttributes<CardProps> & CardProps>(
   (
     {
       fullWidthContent = false,
@@ -23,7 +23,6 @@ const CardMeta = WithRef<HTMLDivElement, HTMLAttributes<CardProps> & CardProps>(
       [`${prefixCls}-clickable`]: clickable,
       [`${prefixCls}-full-width-content`]: fullWidthContent,
     });
-    // const renderContent = children ? <div className={`${prefixCls}-content`}>{children}</div> : null;
 
     return (
       <div className={cardClassName} ref={ref} {...restProps}>
@@ -32,4 +31,13 @@ const CardMeta = WithRef<HTMLDivElement, HTMLAttributes<CardProps> & CardProps>(
     );
   }
 );
-export default CardMeta;
+
+Card.defaultProps = {
+  fullWidthContent: false,
+  disabled: false,
+  clickable: true,
+};
+
+Card.displayName = 'Card';
+
+export default Card;
diff --git a/src/card/demo/Card.stories.tsx b/src/card/demo/Card.stories.tsx
@@ -13,7 +13,7 @@ import { Item, List } from '../../list';
 import { Basic, Empty, TreeData } from '../../table/demos/Table.stories';
 import { HaveChildren } from '../../tabs/demos/Tabs.stories';
 import { Card, Divider } from '../..';
-import Text from '../../typograhy/text';
+import Text from '../../typography/text';
 
 export default {
   title: 'upgraded/Card',
@@ -58,7 +58,7 @@ const infoCardTemplate = () => (
     <Divider
       style={{
         width: '100%',
-        marginTop: '0px',
+        margin: '0px',
       }}
     />
     <Basic />
@@ -152,7 +152,7 @@ Default.args = {
         <Dropdown
           placement="bottomRight"
           content={
-            <List>
+            <List style={{ padding: '0' }}>
               <Item value="1">111111</Item>
               <Item value="2">222222</Item>
             </List>
@@ -226,7 +226,7 @@ onlyDes.args = {
           <Dropdown
             placement="bottomRight"
             content={
-              <List>
+              <List style={{ padding: '0' }}>
                 <Item value="1">111111</Item>
                 <Item value="2">222222</Item>
               </List>

diff --git a/src/card/demo/CardPage.tsx b/src/card/demo/CardPage.tsx
@@ -23,8 +23,10 @@ export default function CardPage() {
       <p>Upgrading Guide</p>
       <ul>
         <li>action属性支持，右上角标题可以放ReactNode</li>
-        <li>去除footer</li>
+        <li>去除footer,去除外部title</li>
         <li>支持fullWidthContent 让内容宽度拉满</li>
+        <li>底层div标签，支持div事件</li>
+        <li>tablecard 和infocard 可兼容</li>
       </ul>
       <Heading>{formatMessage({ defaultMessage: '代码演示' })}</Heading>
       <Subheading>{formatMessage({ defaultMessage: '简单结构' })}</Subheading>

diff --git a/src/card/index.tsx b/src/card/index.tsx
@@ -3,5 +3,5 @@ import CardMeta from './CardMeta';
 import WithSubComponent from '../utils/withSubComponent';
 
 export { CardProps, CardMetaProps } from './interfaces';
-
 export default WithSubComponent(Card, { Meta: CardMeta });
+export { Card, CardMeta };
diff --git a/src/cascader/demos/Cascader.stories.tsx b/src/cascader/demos/Cascader.stories.tsx
@@ -1,19 +1,24 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { PlusOutlined, FilterOutlined } from '@gio-design/icons';
-
 import { CascaderProps } from '../interfance';
 import Cascader from '../Cascader';
 import '../style';
 import './style.less';
 import CascaderItem from '../../list/inner/CascaderItem';
 import { List } from '../../list';
+import Docs from './CascaderPage';
 
 export default {
   title: 'Upgraded/Cascader',
   component: Cascader,
+  subcomponents: { CascaderItem },
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
 } as Meta;
-const defaultLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
 
 const defaultOptions = [
   {
@@ -51,83 +56,81 @@ const defaultOptions = [
     ],
   },
 ];
-const Template: Story<CascaderProps> = (props) => {
-  const options = defaultLabels.reduce(
-    (prev, curr) => [
-      ...prev,
-      {
-        label: `第${curr}条咸鱼`,
-        value: curr,
-        childrens: [
-          { label: '要', value: 'yes' },
-          { label: '不要', value: 'no' },
-        ],
-      },
-    ],
-    []
-  );
-  return (
-    <>
-      <div className="demo-box">
-        <Cascader options={defaultOptions} triggerProps={{ placeholder: '请选择' }} size="normal" {...props} />
-      </div>
-      <div className="demo-box">
-        <Cascader triggerProps={{ placeholder: '请选择', allowClear: false }} size="normal" {...props}>
-          <CascaderItem label="苹果" value="apple" disabled>
-            <List>
-              <CascaderItem label="切" value="cat">
-                <List>
-                  <CascaderItem label="坏了" value="bad" disabledTooltip="123123121" />
-                  <CascaderItem label="没坏" value="good" />
-                </List>
-              </CascaderItem>
-              <CascaderItem prefix="233" label="掰开" value="bye" />
-            </List>
-          </CascaderItem>
-        </Cascader>
-      </div>
-      <h3>自定义list,trigger宽度</h3>
-      <div className="demo-box">
-        <Cascader
-          options={options}
-          contentStyle={{ width: 240 }}
-          triggerProps={{ placeholder: '请选择', allowClear: false, style: { width: 240, textAlign: 'left' } }}
-          size="small"
-          {...props}
-        />
-      </div>
-      <h3>hide trigger Prefix</h3>
-      <div className="demo-box">
-        <Cascader
-          options={options}
-          overlayStyle={{ width: 240 }}
-          triggerProps={{ placeholder: '请选择', style: { width: 240, textAlign: 'left' } }}
-          size="small"
-          {...props}
-        />
-      </div>
-      <h3>prefix,suffix(如果设置prefix、suffix trigger在有值时会render Select的prefix、suffix)</h3>
-      <div className="demo-box">
-        <Cascader
-          options={options}
-          prefix={() => <PlusOutlined size="14px" />}
-          suffix={() => <FilterOutlined size="14px" />}
-          overlayStyle={{ width: 240 }}
-          triggerProps={{
-            placeholder: '请选择',
-            style: { width: 240, textAlign: 'left' },
-          }}
-          size="small"
-          {...props}
-        />
-      </div>
-    </>
-  );
-};
+const options = [...new Array(12)].map((_, index) => ({
+  label: `第${index}条咸鱼`,
+  value: index,
+  childrens: [
+    { label: '要', value: 'yes' },
+    { label: '不要', value: 'no' },
+  ],
+}));
+const demoTemplate: Story<CascaderProps> = (props) => (
+  <>
+    <h3>default传option</h3>
+    <div className="demo-box">
+      <Cascader options={defaultOptions} triggerProps={{ placeholder: '请选择' }} size="normal" {...props} />
+    </div>
+    <h3>default传jsx</h3>
+    <div className="demo-box">
+      <Cascader triggerProps={{ placeholder: '请选择', allowClear: false }} size="normal" {...props}>
+        <CascaderItem label="苹果" value="apple">
+          <List model="cascader">
+            <CascaderItem label="切" value="cat">
+              <List model="cascader">
+                <CascaderItem label="坏了" value="bad" />
+                <CascaderItem label="没坏" value="good" />
+              </List>
+            </CascaderItem>
+            <CascaderItem label="掰开" value="bye" />
+          </List>
+        </CascaderItem>
+      </Cascader>
+    </div>
+    <h3>自定义list,trigger宽度</h3>
+    <div className="demo-box">
+      <Cascader
+        options={options}
+        contentStyle={{ width: 240 }}
+        triggerProps={{ placeholder: '请选择', allowClear: false, style: { width: 240, textAlign: 'left' } }}
+        size="small"
+        {...props}
+      />
+    </div>
+    <h3>hide trigger Prefix</h3>
+    <div className="demo-box">
+      <Cascader
+        options={options}
+        overlayStyle={{ width: 240 }}
+        triggerProps={{ placeholder: '请选择', style: { width: 240, textAlign: 'left' } }}
+        size="small"
+        {...props}
+      />
+    </div>
+    <h3>prefix,suffix(如果设置prefix、suffix trigger在有值时会render Select的prefix、suffix)</h3>
+    <div className="demo-box">
+      <Cascader
+        options={options}
+        prefix={() => <PlusOutlined size="14px" />}
+        suffix={() => <FilterOutlined size="14px" />}
+        overlayStyle={{ width: 240 }}
+        triggerProps={{
+          placeholder: '请选择',
+          style: { width: 240, textAlign: 'left' },
+        }}
+        size="small"
+        {...props}
+      />
+    </div>
+  </>
+);
 
-export const Default = Template.bind({
+export const Demo = demoTemplate.bind({
   triggerProps: {
     placeholder: '请选择',
     allowClear: false,
   },
 });
+export const Default: Story<CascaderProps> = (args) => (
+  <Cascader {...args} options={defaultOptions} triggerProps={{ placeholder: '请选择' }} size="normal" />
+);
+Default.args = {};
diff --git a/src/cascader/demos/CascaderPage.tsx b/src/cascader/demos/CascaderPage.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Canvas, Title, Heading, Story, Subheading, ArgsTable } from '@storybook/addon-docs';
+import { useIntl } from 'react-intl';
+import Cascader from '../index';
+
+export default function CardPage() {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <Title>{formatMessage({ defaultMessage: 'Cascader 级联选择器' })}</Title>
+      <p>
+        {formatMessage({
+          defaultMessage: '递进式选择器',
+        })}
+      </p>
+      <p>Upgrading Guide</p>
+      <ul>
+        <li>null</li>
+      </ul>
+      <Heading>{formatMessage({ defaultMessage: '代码演示' })}</Heading>
+      <Subheading>{formatMessage({ defaultMessage: '样例' })}</Subheading>
+
+      <Canvas>
+        <Story id="upgraded-cascader--demo" />
+      </Canvas>
+      <Subheading>{formatMessage({ defaultMessage: '简单结构' })}</Subheading>
+
+      <Canvas>
+        <Story id="upgraded-cascader--default" />
+      </Canvas>
+
+      <Heading>{formatMessage({ defaultMessage: '参数说明' })}</Heading>
+      <ArgsTable of={Cascader} />
+    </>
+  );
+}
diff --git a/src/checkbox/group.tsx b/src/checkbox/group.tsx
@@ -7,10 +7,7 @@ import CheckboxGroupContext from './CheckboxGroupContext';
 import { CheckboxOptionType, CheckboxValueType, CheckboxGroupProps } from './interface';
 
 const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGroupProps<CheckboxValueType>> = (
-  props,
-  ref
-) => {
-  const {
+  {
     options = [],
     prefixCls: customizePrefixCls,
     defaultValue,
@@ -20,8 +17,9 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
     layout = 'horizontal',
     children,
     ...restProps
-  } = props;
-
+  },
+  ref
+) => {
   const [value, setValue] = React.useState<CheckboxValueType[]>(restProps.value || defaultValue || []);
   const [registeredValues, setRegisteredValues] = React.useState<CheckboxValueType[]>([]);
 

diff --git a/src/drawer/demos/DrawerPage.tsx b/src/drawer/demos/DrawerPage.tsx
@@ -17,7 +17,7 @@ export default function ListPage() {
       <p>Upgrading Guide</p>
       <ul>
         <li>
-          封装自rc-dialog
+          封装自rc-dialog，详情
           <a href="https://github.com/react-component/dialog">rc-dialog</a>
         </li>
       </ul>