React-story-book的使用

项目地址传送门Github

项目中的痛点

• create-react-app入口文件不适合管理组件库，更加适合页面开发
• 缺少行为追踪个和属性调试功能

story-book的特点

• 分开展示各个组价不同属性下的状态
• 能追踪组件的行为并且具有属性调试功能
• 可以为组件自动生成文档和属性列表
• 适用React、Vue、Angular

一、安装story-book

npx -p @storybook/cli sb init
or
npx sb init
版本为6.3.2

二、启动story-book

yarn storybook or npm run storybook

三、写一个自己的case

import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'

import Button from './button'

const defaultButton = () => (
 <Button onClick={action('clicked')}> default button </Button>
)
storiesOf('Button Component', module)
 .add('Button', defaultButton)

四、typeScript的支持

• 官方文档中有typeScript Config
• 当前版本6.3支持typeScript，所以不用配置，下面关于TS的配置都不用做
• 兼容不支持的版本ex:5
• • 在.storybook文件夹下新建webpack.config.js
• • 在.story/webpack.config.js中添加如下👇Code：

• • module.exports = ({ config }) => {
    config.module.rules.push({
    test: /\.tsx?$/,
    use: [
      {
        loader: require.resolve("babel-loader"),
        options: {
          presets: [require.resolve("babel-preset-react-app")]
        }
      },
      // 自动生成文档的
      require.resolve("react-docgen-typescript-loader")
    ]
    });
    //处理什么后缀名的文件
    config.resolve.extensions.push(".ts", ".tsx");
    return config;
    };
    

• • 添加完后，可以addons.js修改为以.ts为后缀结束的文件了
• • 修改同文件夹下的config.ts

• • 	configure(require.context('../src',true,/\.stories\.tsx$/),module)
    

• • 修改src/stories下的文件后缀，重启storybook

五、写文档的方式：

• Component Story Format（CSF）
• MDX syntax
• storiesOf API 例

• • import React from 'react' 
    import { storiesOf } from '@stroybook/react'
    import { action } from '@storybook/addon-action'
    
    import  Button from './button'
    //2、默认按钮
    const defaultButton = ()=>(
    	<Button onClick={action('clicked')}>default Button</Button>
    ) 
    
    const buttonWithSize = ()=>(
    	<>
    		<Button size='sm'>small Button</Button>
    		<Button size='lg'>large Button</Button>	
    	</>
    )
    const buttonWithType = ()=>(
    <>
    	<Button btnType='danger'>danger Button</Button>	
    	<Button btnType='link' href='https://www.abide.com'>link Button</Button>	
    	<Button btnType='primary'>primary Button</Button>		
    </>
    )
    //1、
    storiesOf('Button Component (Title)', module )//module是默认参数
    //3、添加story
    	.add('默认 Button', defaultButton)
    	.add('不同尺寸的 Button',buttonWithSize)  
    	.add('不同类型的 Button',buttonWithType)
    

六、缺少样式

由于没有将全局的css引入到storybook的config配置中
6.3.2版本是添加到.story/preview.tsx中

import '../src/style/index.scss'

七、插件系统（Addons）

6.3.2版本已经内置了很多Addons，基础使用基本是不用添加其他的addon的。

• Decorators装饰器
• • 单独配置

• • const styles: React.CSSproperties={
    	textAlign:'center'
    }
    // 新建一个Decorator
    const CenterDecorator = (storyFn:any)=> <div style={styles}>{storyFn()}</div>
    
    //添加Decorator
    storiesOf('Button Component (Title)', module )
    	.addDecorator(CenterDecorator)
    

• • 全局.story/preview.tsx配置

• • //由于有jsx的语法所以需要导入React
    import React from 'react'
    //导入addDecorator
    import { addDecorator } from '@stroybook/react'
    const styles: React.CSSproperties={
    	textAlign:'center'
    }
    // 新建一个Decorator
    const CenterDecorator = (storyFn:any)=> <div style={styles}>{storyFn()}</div>
    addDecorator(CenterDecorator)
    

八、Info addon

1、生成一个标准文档
2、可以展示源代码，可以拷贝使用
3、可以生成组件的属性列表
4、已经支持了TS

• 安装info addon

•   npm i -D @storybook/addon-info
  

• 使用info addon

•  import { withInfo } from '@storybook/addon-info'
   addDecorator(withInfo)
  

• 给全局Stoty增加配置，添加到.story/preview.tsx

• • import React from 'react'
    import { addDecorator, configure, addParameters } from '@storybook/react';
    import { withInfo } from '@storybook/addon-info';
    import '../src/styles/index.scss'
    //如果这里报错，可以// @ts-ignore
    addDecorator(withInfo);
    // 添加配置
    addParameters({
      info: {
    	inline: true, // 直接显示信息，不需要点击图标
        header: false // 不显示头部，比较好看
     }
    })
    

• 给每个story增加单独的配置
• • 给整个stroy增加

• • import { addDecorator, configure, addParameters } from '@storybook/react';
    import { withInfo } from '@storybook/addon-info';
    storiesOf('Button Component (Title)', module )
    .addDecorator(withInfo);
    .addParameters({
    	info:{
    		text:`## 支持md写法`
    		inline:true,//默认展示组件相关信息
    	}
    })
    

• • 给每个case单独增加,就是将相关配置传递到第三个参数

• • .add('不同尺寸的 Button','buttonWithSize',{
    	info:{
    		inline:false,//默认展示组件相关信息
    	}
    })
    

九、完善属性表格，

• 将需要到处的组件除了以export default Button导出外，还需要以export导出
• 不需要下载docgen，不需要配置docgen

• • 需要在组件前加上 export
    export const Icon: React.FC<IconProps> = (props) => (<div>test</div>)
    

• 如果属性表格没有边框，则需要自己手动写些css
  我在styles目录下，新增了infoTable.scss，然后添加如下代码👇
  addon-info创建出的表格的·class·为info-table

• • 
    .info-table {
      	border-collapse: separate;
      	tr th,
      	td {
        padding: 4px;
        border: 1px solid gray;
      	}
    }
    

• 在全局index.scss导入这个infoTable.scss就好了

十、注释JSDoc

/** .... */
js /** 这是XXXX */

十一、全局美化样式

在config.tsx中

import { withInfo } from '@storybook/addon-info'
	
 const wrapperStyle:React.CSSProperties = {
	padding:'20px 40px'
 }
 const storyWrapper = (storyFn:any)=>{
 	<div style={wrapperStyle}>
 		<h2>组件演示</h2>
 		{storyFn()}
 	</div>
 }
addDecorator(storyWrapper)
addDecorator(withInfo)
addParameters({
		info:{
			text:`## 支持md写法`
			inline:true,//默认展示组件相关信息
			header:false
		}
	})