storybook2 --- React

Posted 2023-03-09

参考技术A react 项目

create react app + 下面命令

Note: 项目中必须有package.json ， 否则上面的命令会报错

1- 按照依赖

2- 配置脚本

3- Create the main file (告诉storybook去哪找stories)

4- write stories

每个story是组件的一个状态，如上例：按钮组件的两个实例
Button
├── With Text
└── With Emoji
5- 启动storybook

1- 获取完整的webpack默认配置
// .storybook/main.js

执行命令

2- webpackFinal添加配置
函数
参数： 第一个参数是storybook使用的webpack配置，第二个参数是接收的来自storybook的对象， 可以告诉你这些配置来自哪里
For example, here’s a .storybook/main.js to add Sass support:

添加插件配置

Using Your Existing Config---merge two config

默认情况下，Storybook加载根.babelrc文件并加载这些配置。但有时这些选择可能会导致故事书抛出错误。
在这种情况下，您可以为Storybook提供一个定制的.babelrc。为此，在Storybook config目录中创建一个名为.babelrc文件的文件（默认情况下，它是.Storybook）。
然后Storybook将只从该文件加载Babel配置。目前我们不支持package.json中的 Babel config

1- Typescript configuration presets

2- Setting up TypeScript with ts-loader

3- Setting up TypeScript with babel-loader

3- Using TypeScript with the TSDocgen addon
storybook info addon 能自动为每个组件生成属性表文档， 但是不适用与typescript
解决方案：react docgen typescript loader预处理typescript文件，以向Info插件提供所需的内容，webpack配置如上
组件正常使用info即可

请参阅react docgen typescript loader文档，以向typescript接口写入属性说明和其他注释。
可以在.storybook/preview.js中添加其他的说明

注意：对于只导出为默认值的组件，无法生成组件docgen信息。通过使用命名导出导出组件，可以解决此问题。

4- Setting up Jest tests
This is an example jest.config.js file for jest:

6- Building your TypeScript Storybook

使用 Storybook 进行 React-table[v7] 渲染

【中文标题】使用 Storybook 进行 React-table[v7] 渲染

【英文标题】：React-table[v7] rendering with Storybook

【发布时间】：2020-05-02 17:58:15

【问题描述】：

我正在尝试在 Storybook https://storybook.js.org/ 中呈现 react-table 组件

Error: Uncaught TypeError: Cannot read property 'map' of undefined
at decorateColumnTree (vendors~main.4c20d65610ba8d62ac56.bundle.js:210768)
at vendors~main.4c20d65610ba8d62ac56.bundle.js:211338
at mountMemo (vendors~main.4c20d65610ba8d62ac56.bundle.js:186644)
at Object.useMemo (vendors~main.4c20d65610ba8d62ac56.bundle.js:186866)
at Object.useMemo (vendors~main.4c20d65610ba8d62ac56.bundle.js:217699)
at useTable (vendors~main.4c20d65610ba8d62ac56.bundle.js:211337)
at Table (main.4c20d65610ba8d62ac56.bundle.js:17507)
at renderWithHooks (vendors~main.4c20d65610ba8d62ac56.bundle.js:186083)
at mountIndeterminateComponent (vendors~main.4c20d65610ba8d62ac56.bundle.js:188317)
at beginWork$1 (vendors~main.4c20d65610ba8d62ac56.bundle.js:189461)

根据错误的罪魁祸首，decorateColumnTree 似乎正在接收未定义的列参数。 https://github.com/tannerlinsley/react-table/blob/1d8ffb18f7afc862db5d4f1da5cfc6781ed10553/src/hooks/useTable.js#L166-L169

storybook version: ^5.1.9

react-table version: ^7.0.0-rf.15

【参考方案1】：

好吧，过了一段时间，我想通了。这主要是数据和变量范围的问题。

最初，我是这样做的

import dummyData from './mockData'

table.addDecorator(withKnobs).add('Table', () =>
  React.createElement(() => 
    return (
      <Table
        columns=dummyData.columns
        data=dummyData.data
      />
    )
  )
)

但是，dummyData 在React.createElement 中未定义，所以我选择这样做：

table.addDecorator(withKnobs).add('NextTable', () =>
  React.createElement(() => 
    return (
      <MockTableComponent />
    )
  )
)

模拟数据和模拟列在MockTableComponent 中被记忆，它正在呈现<Table />