fix: add some storybook

xsky-fe · Jun 5, 2023 · 59929e7 · 59929e7
1 parent 44b22a2
commit 59929e7
Show file tree

Hide file tree

Showing 25 changed files with 390 additions and 156 deletions.
diff --git a/src/components/Navigation/style.scss b/src/components/Navigation/style.scss
@@ -11,6 +11,7 @@
   text-align: center;
   width: 100%;
   z-index: 99;
+  color: $white;
   box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, .15);
 }
 

diff --git a/stories/Alert.stories.tsx b/stories/Alert.stories.tsx
@@ -1,36 +1,47 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { Alert } from '../src';
+import { Alert as BsAlert } from '../src';
+import { AlertProps } from '../src/interface';
 
-storiesOf('Alert', module)
-  .add('error', () => (
-    <div>
-      <h3>对齐方式</h3>
-      <p>居左对齐</p>
-      <Alert bsStyle="error"  showIcon>
-      这里是 error 级别
-      </Alert>
-      <p>居中对齐</p>
-      <Alert bsStyle="error"  textAlign='center' showIcon>
-      这里是 error 级别
-      </Alert>
-      <p>内置提示</p>
-      <Alert bsStyle="error"  textAlign='inline' showIcon>
-      这里是 error 级别
-      </Alert>
-      <h3>关闭功能</h3>
-      <Alert bsStyle="error" showIcon dismissDirection="right" onDismiss={() =>{}}>
-      这里是 error 级别 <a href="#">点击操作</a>
-      </Alert>
-    </div>
-  ))
-  .add('info', () => (
-    <Alert bsStyle="info" showIcon>
-      这里是 info 级别 <a href="#">点击操作</a>
-    </Alert>
+const STATUS = ['warning', 'info', 'error'];
+const Alert = (props: Partial<AlertProps>) => {
+  return (
+    <>
+      {STATUS.map(variant => (
+        <BsAlert bsStyle={variant as AlertProps['bsStyle']} {...props}>
+          This is a {variant} alert!
+        </BsAlert>
+      ))}
+    </>
+  );
+};
+
+storiesOf('DATA SHOW | Alert', module)
+  .add('default', () => <Alert />)
+  .add('icon', () => <Alert showIcon />)
+  .add('align', () => (
+    <>
+      <p>
+        <h3>left</h3>
+        <Alert textAlign="left" showIcon />
+      </p>
+      <p>
+        <h3>center</h3>
+        <Alert textAlign="center" showIcon />
+      </p>
+      <p>
+        <h3>inline</h3>
+        <Alert textAlign="inline" showIcon />
+      </p>
+    </>
   ))
-  .add('warning', () => (
-    <Alert bsStyle="warning">
-      这里是 warning 级别 <a href="#">点击操作</a>
-    </Alert>
+  .add('operation', () => (
+    <>
+      <Alert bsStyle="warning" showIcon dismissDirection="right" onDismiss={() => {}}>
+        This is a warning alert with close and click!
+        <a href="#" style={{ paddingLeft: 8 }}>
+          click here
+        </a>
+      </Alert>
+    </>
   ));
diff --git a/stories/Badge.stories.tsx b/stories/Badge.stories.tsx
@@ -4,5 +4,35 @@ import { Badge } from '../src';
 
 storiesOf('DATA SHOW | Badge', module)
   .add('default', () => (
-    <Badge count="关闭" status="default" />
-  ))
+    <>
+      <Badge count="关闭" status="default" />
+      <Badge count="健康" status="success" />
+      <Badge count="通知" status="info" />
+      <Badge count="紧急" status="critical" />
+      <Badge count="警告" status="warning" />
+      <Badge count="错误" status="danger" />
+      <Badge count="默认" />
+    </>
+  ))
+  .add('dot', () => (
+    <>
+      <Badge dot text="关闭" status="default" />
+      <span style={{ paddingLeft: '40px' }} />
+      <Badge dot text="健康" status="success" />
+      <span style={{ paddingLeft: '40px' }} />
+      <Badge dot text="通知" status="info" />
+      <span style={{ paddingLeft: '40px' }} />
+      <Badge dot text="紧急" status="critical" />
+      <span style={{ paddingLeft: '40px' }} />
+      <Badge dot text="警告" status="warning" />
+      <span style={{ paddingLeft: '40px' }} />
+      <Badge dot text="错误" status="danger" />
+    </>
+  ))
+  .add('size', () => (
+    <>
+      <Badge dot text="关闭" status="default" />
+      <Badge dot text="关闭" status="default" size="middle" />
+      <Badge dot text="关闭" status="default" size="large" />
+    </>
+  ));
diff --git a/stories/Breadcrumb.stories.tsx b/stories/Breadcrumb.stories.tsx
@@ -2,10 +2,9 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Breadcrumb, BreadcrumbItem } from '../src';
 
-storiesOf('Panel', module)
-  .add('basic', () => (
-    <Breadcrumb>
-      <BreadcrumbItem href="#">资源列表1</BreadcrumbItem>
-      <BreadcrumbItem href="#">资源列表2</BreadcrumbItem>
-    </Breadcrumb>
-  ))
+storiesOf('Components | Breadcrumb', module).add('default', () => (
+  <Breadcrumb>
+    <BreadcrumbItem href="#">资源列表1</BreadcrumbItem>
+    <BreadcrumbItem href="#">资源列表2</BreadcrumbItem>
+  </Breadcrumb>
+));
diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Button } from '../src';
 import { Placement } from 'react-bootstrap/esm/types';
+import { ButtonToolbar } from 'react-bootstrap';
+import { DropdownButton, Icon } from '../src';
 
 storiesOf('DATA SHOW | Button', module)
   .add('default', () => {
@@ -71,7 +73,7 @@ storiesOf('DATA SHOW | Button', module)
       </div>
     );
   })
-  .add('toolTipButton', () => {
+  .add('toolTip button', () => {
     const DisabledTooltip: { children: React.ReactNode; placement: Placement } = {
       children: <span>don't allowed to click</span>,
       placement: 'top',
@@ -104,4 +106,26 @@ storiesOf('DATA SHOW | Button', module)
         </Button>
       </div>
     );
+  })
+  .add('group button', () => {
+    return (
+      <div style={{ margin: '10px' }}>
+        <ButtonToolbar>
+          <Button data-action="CreateOsd" variant="primary">
+            创建
+          </Button>
+          <DropdownButton
+            title="操作"
+            id="dropdown-operations"
+            variant="info"
+            modifer="table-toolbar"
+            menu={['操作-1', '操作-2', '操作-3']}
+          />
+
+          <Button data-action="RefreshOsd" variant="info">
+            <Icon type="plus-line" />
+          </Button>
+        </ButtonToolbar>
+      </div>
+    );
   });
diff --git a/stories/Collapse.stories.tsx b/stories/Collapse.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react';
-import { Collapse } from 'react-bootstrap';
+import { Collapse, Card } from 'react-bootstrap';
 import { Button } from '../src';
 
 storiesOf('Transitions | Collapse', module).add('default', () =>
@@ -10,7 +10,13 @@ storiesOf('Transitions | Collapse', module).add('default', () =>
       <>
         <Button onClick={() => setOpen(!open)}>click</Button>
         <Collapse in={open}>
-          <div style={{ marginTop: 10, width: 300, height: 1000, backgroundColor: 'grey' }}>Collapse</div>
+          <div id="example-collapse-text">
+            <Card body style={{ width: '400px' }}>
+              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
+              ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
+              sapiente ea proident.
+            </Card>
+          </div>
         </Collapse>
       </>
     );

diff --git a/stories/Dropdown.stories.tsx b/stories/Dropdown.stories.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Dropdown } from '../src';
 
-storiesOf('Dropdown', module)
-  .add('default', () => (
-    <Dropdown title="标题" children={<div style={{ padding: '5px 10px' }}>内容</div>} id="dropdown" />
-  ))
+storiesOf('Components | Dropdown', module).add('default', () => (
+  <Dropdown title="标题" children={<div style={{ padding: '5px 10px' }}>内容</div>} id="dropdown" />
+));
diff --git a/stories/DropdownButton.stories.tsx b/stories/DropdownButton.stories.tsx
@@ -4,7 +4,7 @@ import { DropdownButton } from '../src';
 import DropdownButtonDemo from './demos/DropdownButtonDemo';
 import { InputGroup } from 'react-bootstrap';
 
-storiesOf('DropdownButton', module)
+storiesOf('Components | DropdownButton', module)
   .add('size', () => (
     <div>
       <DropdownButtonDemo />

diff --git a/stories/InputDropdown.stories.tsx b/stories/InputDropdown.stories.tsx
@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { InputDropdown } from '../src';
 import { FormControl, InputGroup } from 'react-bootstrap';
 
-storiesOf('InputDropdown', module).add('default', () => {
+storiesOf('Form | InputDropdown', module).add('default', () => {
   const Demo = () => {
     const [value, updateValue] = React.useState('MB');
     return (

diff --git a/stories/InputGroup.stories.tsx b/stories/InputGroup.stories.tsx
@@ -9,7 +9,7 @@ storiesOf('Form | InputGroup', module)
       <Button>选择文件</Button>
     </InputGroup>
   ))
-  .add('hasAddonText', () => (
+  .add('has addon', () => (
     <div>
       <p>
         <div>后缀</div>
@@ -27,7 +27,7 @@ storiesOf('Form | InputGroup', module)
       </p>
     </div>
   ))
-  .add('hasDropdownButton', () => {
+  .add('has dropdown', () => {
     const Demo = () => {
       const [isHour, setIsHour] = React.useState(true);
       const menu = [

diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Button, Modal, DatePicker } from '../src';
+import { ModalProps } from '../src/interface';
+import { Form } from 'react-bootstrap';
 
-const ModalPicker = () => {
+const ModalPicker = (props?: Partial<ModalProps>) => {
   const [show, setShow] = React.useState(false);
   const handleClick = () => setShow(true);
   const handleHide = () => setShow(false);
@@ -16,16 +18,43 @@ const ModalPicker = () => {
         show={show}
         onHide={handleHide}
         onOk={handleHide}
-        hideFooter
         preventDragByTitle
+        {...props}
       >
         <DatePicker defaultValue="2019-08-13 12:02:53" />
       </Modal>
     </div>
   );
 };
 
+const ModalSizePicker = () => {
+  const SIZES = [['sm', '小'], ['', '中'], ['lg', '大'], ['xl', '最大']];
+  const [size, setSize] = React.useState('lg');
+  return (
+    <div>
+      <div>
+        {SIZES.map(([val, text]) => (
+          <Form.Check
+            inline
+            name="size"
+            type="radio"
+            id={text}
+            label={text}
+            value={val}
+            onClick={() => {
+              if (val !== size) {
+                setSize(val);
+              }
+            }}
+          />
+        ))}
+      </div>
+      <ModalPicker size={size as ModalProps['size']} />
+    </div>
+  );
+};
 storiesOf('DATA SHOW | Modal', module)
-  .add('modal picker', () => (
-    <ModalPicker />
-  ))
+  .add('default', () => <ModalPicker />)
+  .add('size', () => <ModalSizePicker />)
+  .add('center', () => <ModalPicker centered />)
+  .add('hide footer', () => <ModalPicker hideFooter />);
diff --git a/stories/Nav.stories.tsx b/stories/Nav.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Nav } from '../src';
+
+storiesOf('Components | Nav', module).add('tabs', () => {
+  const monitorTabs = [
+    {
+      title: '用户业务',
+      key: 'users',
+    },
+    {
+      title: '复制',
+      key: 'copy',
+    },
+    {
+      title: '生命周期',
+      key: 'flow',
+    },
+  ];
+  return (
+    <div>
+      <Nav
+        variant="tabs"
+        defaultActiveKey="users"
+        onSelect={selectedKey => alert(`selected ${selectedKey}`)}
+      >
+        {monitorTabs.map(tab => {
+          return (
+            <Nav.Item>
+              <Nav.Link eventKey={tab.key}>{tab.title}</Nav.Link>
+            </Nav.Item>
+          );
+        })}
+      </Nav>
+    </div>
+  );
+});