Storybook

[WangShuXian6]

Storybook

storybook是一套UI组件的开发环境，可以浏览组件库，查看每个组件的不同状态，交互式开发测试组件，目前支持react、vue、angular等前端框架。

https://storybook.js.org/tutorials/intro-to-storybook/react/zh-CN/get-started/ Storybook React 教程 | Storybook Tutorials

在已有项目中安装

这将安装所有需要的依赖项。支持typescript 将自动检测项目类型并安装相关依赖

npx -p @storybook/cli sb init

命令

  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },

示例

以上脚本将自动给出示例文件 Button.tsx

import React from 'react'
import './button.css'

export interface ButtonProps { /**

• Is this the principal call to action on the page? */ primary?: boolean /**
• What background color to use */ backgroundColor?: string /**
• How large should the button be? */ size?: 'small' | 'medium' | 'large' /**
• Button contents */ label: string /**
• Optional click handler */ onClick?: () => void }

/**

• Primary UI component for user interaction */ export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => { const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary' return ( <button type="button" className={['storybook-button', storybook-button--${size}, mode].join(' ')} style={{ backgroundColor }} {...props}

  {label} ) }

>Button.stories.tsx
```tsx
import React from 'react'
import { ComponentStory, ComponentMeta } from '@storybook/react'

import { Button } from './Button'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Example/Button',
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    backgroundColor: { control: 'color' }
  }
} as ComponentMeta<typeof Button>

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />

export const Primary = Template.bind({})
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {
  primary: true,
  label: 'Button'
}

export const Secondary = Template.bind({})
Secondary.args = {
  label: 'Button'
}

export const Large = Template.bind({})
Large.args = {
  size: 'large',
  label: 'Button'
}

export const Small = Template.bind({})
Small.args = {
  size: 'small',
  label: 'Button'
}

button.css

.storybook-button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
border-radius: 3em;
cursor: pointer;
display: inline-block;
line-height: 1;
}
.storybook-button--primary {
color: white;
background-color: #1ea7fd;
}
.storybook-button--secondary {
color: #333;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}
.storybook-button--small {
font-size: 12px;
padding: 10px 16px;
}
.storybook-button--medium {
font-size: 14px;
padding: 11px 20px;
}
.storybook-button--large {
font-size: 16px;
padding: 12px 24px;
}

[WangShuXian6]

bug

Default export of the module has or is using private name 'HeaderProps'.ts(4082)

只需要在相应的组件Header.tsx中将类型HeaderProps导出即可 也就是将interface HeaderProps 改为 export interface HeaderProps

无法运行时

去掉 storybook/main.js addons @storybook/preset-create-react-app

this.getOptions is not a function

https://github.com/storybookjs/presets/issues/195

将 sass-loader 降级到 10.1.1 固定style-loader版本为2.0.0 把 @storybook/preset-create-react-app从storybook/main.js文件中删除。 `css-loader@5.2.6

yarn remove sass-loader && yarn add sass-loader@10.1.1
yarn remove style-loader && yarn add style-loader@2.0.0 // still not working for me
yarn remove css-loader && yarn add css-loader@5.2.6

TypeError: Failed to fetch dynamically imported module: stories.tsx

https://github.com/storybookjs/storybook/issues/11989 添加路径别名 add aliases in storybook config 将以下内容添加到.storybook/main.js： 路径要与tsconfig,vite保持一致

module.exports = {
async viteFinal(config, { configType }) {
return mergeConfig(config, {
resolve: {
alias: { '@': path.resolve(path.dirname(__dirname), "src")},
},
});
},
};

tsconfig.json

"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}

vite.config.ts

resolve: {
alias: [
{
find: /^~/,
replacement: pathResolve('node_modules') + '/'
},
{
find: /@\//,
replacement: pathResolve('src') + '/'
}
]
},

[WangShuXian6]

Storybook 的 SCSS 预设

https://github.com/storybookjs/presets/tree/master/packages/preset-scss

yarn add -D @storybook/preset-scss css-loader sass sass-loader style-loader

然后将以下内容添加到.storybook/main.js：

module.exports = {
  addons: ['@storybook/preset-scss'],
};

高级用法

你可以通过使用 @storybook/preset-scss 的 Object addon 声明来传递配置，并在 options 键下添加配置。 你可以使用styleLoaderOptions、cssLoaderOptions和sassLoaderOptions键将配置传入预设的webpack加载器。 请看每个加载器的文档以了解有效的选项。 你可以通过正常的字符串声明来注册其他附加组件。

module.exports = {
  addons: [
    {
      name: '@storybook/preset-scss',
      options: {
        cssLoaderOptions: {
           modules: true,
           localIdentName: '[name]__[local]--[hash:base64:5]',
        }
      }
    },
    // You can add other presets/addons by using the string declaration
    '@storybook/preset-typescript',
    '@storybook/addon-actions',
  ]
}

[WangShuXian6]

Storybook 的 less 预设

yarn add storybook-preset-less -D

然后将以下内容添加到.storybook/main.js：

module.exports = {
addons: ['storybook-preset-less'],
};