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>
  )
}

Button.stories.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

storybookjs/presets#195

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

yarn remove sass-loader && yarn add [email protected]
yarn remove style-loader && yarn add [email protected] // still not working for me
yarn remove css-loader && yarn add [email protected]

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

storybookjs/storybook#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'],
};