【storybook】你需要一款能在独立环境下开发组件并生成可视化控件文档的框架吗？（二）

---

回顾

上篇博客地址：

https://blog.csdn.net/tuzi007a/article/details/129192502

说了部分用法。

---

继续说说用法

配置文件介绍

开发环境的配置都在.storybook目录中，里面包含了2个文件

main.js
preview.js

先看main.js文件。

该文件是在安装了storybook后自动生成的，里面本身就包含了支持当前框架在开发环境的配置，

我们所要做的是在配置上进行补充，比如支持less sass scss等，增加addon插件，修改

stories加载目录，修改打包工具版本和对应功能等。

module.exports = {
  stories: [ // 生成可视化UI控件文档时，会加载哪些文件
    // stories目录下的所有.stories.mdx文件
    "../stories/**/*.stories.mdx",
    // stories目录下的所有.stories.js .jsx .ts .tsx文件
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
	// 用于配置storybook的插件
	// 在安装storybook后，这里会自动加载一些常用插件
  ],
  babel: async (options) => {
	// ...options
	// babel的配置我们一般在根目录下的`.babelrc.js`中处理
  }, 
  // 你使用的框架对应的storybook版本
  // 比如react框架对应的storybook版本是"@storybook/react"
  framework: "xxx", 
  // 核心打包工具配置
  // 比如使用storybook的哪个版本，用webpack5的哪个版本打包，是否懒加载，是否要缓存等
  core: {
    builder: {
      name: 'webpack5',
      options: {
        lazyCompilation: true,
        fsCache: true
      }
    },
  },
  webpackFinal: async (config, { configType }) => {
	// 这里写入webpack的补充配置
	// 不要试图去修改入口和出口
	// config是一个配置对象，要配置哪个参数，就从config中调用配置项，然后进行追加，
	// 比如config.module.rules.push({...})用来增加loader的配置
	// config.devtool = “xxx-source-map”用来增加source-map的配置
	// config.plugins.push(xxx)用来增加webpack plugin的配置

	// 最后要返回配置内容 固定写法
	return config;
  }
}

---

再来看看preview.js文件

它主要用于控制story的渲染，在渲染story时提供一些数据上的配置。

它有3个配置项，

• decorators
• parameters
• globalTypes

下面进行一一介绍。

decorators

它是一个数组，负责为story提供渲染数据，可以对单个story使用，也可以对某个组件使用，

还可以放在全局配置里，因此它有如下多种写法，

第一种：对单个story使用

// Button.stories.jsx

import React from 'react';
import { Button } from './Button';

export default {
  title: "Example/Button",
  component: Button

const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.decorators = [
  (Story) => (
    <div style={{ margin: '3em' }}>
      <Story />
    </div>
  ),
];

配置结果：
当前如果选择查看Primary这个story的话，会增加3em的margin

而选择查看其他story的时候则不会：

第二种，对以Button组件为模板的story使用

// Button.stories.jsx

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
  decorators: [
    (Story) => (
      <div style={{ margin: '3em' }}>
        <Story />
      </div>
    ),
  ],
};

配置后，可以看到所有以Button为模板的story，它们的margin都增加了3em：


而以其他组件为模板的story则不会：

第三种，对全局的story和组件使用，这需要在.storybook/preview.js中配置：

// .storybook/preview.js

import React from 'react';

export const decorators = [
  (Story) => (
    <div style={{ margin: '3em' }}>
      <Story />
    </div>
  ),
];

然后就可以看到，所有的story都增加了3em的margin：

---

parameters

它是一个对象，是用来控制如下内容的：

比如背景色选项，事件，控制器显示等。

先来看下安装storybook后自动生成的.storybook/preview.js下关于parameters全局配置文件：

export const parameters = {
  // 配置事件显示，如果组件中的props参数是on+大写字母，就当作事件处理，比如onClick
  actions: { argTypesRegex: "^on[A-Z].*" },
  // 控制器
  controls: {
    matchers: {
      // 如果props参数里有background或者color，就把控制器显示成选色器的样子
      color: /(background|color)$/i,
      // 如果props参数是Date，就把该参数对应的控制器显示成时间选择器的样式
      date: /Date$/,
    },
  },
}

parameters同样有三种配置方式，分别对单个story生效、对以某个组件为模板的story生效

和全局生效。下面就以backgrounds配置项为例来说说。就是这里：

该配置项用来控制可视化UI文档的背景主题色，默认有两种，light和dark，默认选择是light，

也就是图中显示的白色，选择dark，就会显示成黑色：

现在要重新设置选择项，让主题色有红色，绿色和蓝色的选择项。

第一种方式：对单个story配置：

// Button.stories.jsx

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};
Primary.parameters = {
  backgrounds: {
    values: [
      { name: 'red', value: '#f00' },
      { name: 'green', value: '#0f0' },
      { name: 'blue', value: '#00f' },
    ],
  },
};

此时选择查看Primary这个story，就可以选择背景色了：

点击这里选择背景色：

可以看到可分别选择红黄蓝三种颜色，而其他story下，就不具备这个选择。

第二种方式，对以某个组件为模板的story生效：

import React from 'react';
import { Button } from '../src';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  parameters: {
    backgrounds: {
      values: [
        { name: 'red', value: '#f00' },
        { name: 'green', value: '#0f0' },
        { name: 'blue', value: '#00f' },
      ],
    },
  }
};

第三种方式，就是在preview.js中配置全局主题背景色

// .storybook/preview.js

export const parameters = {
  backgrounds: {
    values: [
      { name: 'red', value: '#f00' },
      { name: 'green', value: '#0f0' },
    ],
  },
};

---

globalTypes

这个是全局生效的配置，可以设置主题色，工具条等。

可参考文档：

https://storybook.js.org/docs/react/essentials/toolbars-and-globals

全局配置示例：

// .storybook/preview.js

export const globalTypes = {
  theme: { // 主题
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'light',
    toolbar: {
      icon: 'circlehollow',
      // Array of plain string values or MenuItem shape (see below)
      items: ['light', 'dark'],
      // Property that specifies if the name of the item will be displayed
      showName: true,
      // Change title based on selected value
      dynamicTitle: true,
    },
  },
};

---