本文已参与「新人创作礼」活动，一起开启掘金创作之路。

// .story/main.js
const path = require("path");

module.exports = {
  stories: ['../stories/**/*.stories.js', '../stories/**/*.stories.tsx'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-info'
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: require.resolve('babel-loader'),
          options: {
            presets: [['react-app', { flow: false, typescript: true }]],
          },
        },
        {
          loader: require.resolve("react-docgen-typescript-loader"),
          options: {
            tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
          },
        }
      ],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
}

编写组件说明文档

在stories目录下创建js/tsx/ts文件即可。默认是如下的目录

image (1).png

也可以自定义配置目录结构。

import React from 'react';
import { BuyShopCheckBlock,BuyShopCheckBlockItem } from '../src/buyshopcheck';
import { storiesOf } from "@storybook/react";
import { withInfo } from "@storybook/addon-info";
import { action } from "@storybook/addon-actions";
import { Button } from '@storybook/react/demo';

const stories = storiesOf("组件", module);

stories.add(
  "BuyShopCheckBlock",
  withInfo({ inline: true })(() => (
    <BuyShopCheckBlock blockType='shop-checkblock-1'>
    <BuyShopCheckBlockItem chargeMode="activied" id="0" cantChange></BuyShopCheckBlockItem>
  </BuyShopCheckBlock>
  )),
  { notes: `计费选择组件` }
)
.add("BuyShopCheckBlockItem",withInfo({ inline: true })(() => (
  <BuyShopCheckBlock blockType='shop-checkblock-2'>
  <BuyShopCheckBlockItem chargeMode="activied" id="0" cantChange></BuyShopCheckBlockItem>
</BuyShopCheckBlock>
))
)

withInfo:添加props参数等

常用的Addon

addon-actions：组件操作事件，如click、change
addon-links：链接，如某个Story中单击按钮，链接到另一个Story中
addon-notes：Story的备注
addon-options：调整StoryBook的外观
addon-knobs：在页面上改变变量

自定义配置

自定义html头

.storybook目录下创建preview-head.html文件创建后的标签就会被加载到iframe里，但是不会加载到UI主界面

自定义body

同上，创建preview-body.htm文件

自定义标题链接等

.storybook目录下创建manage.js文件

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
import tencent from './tencent';

addons.setConfig({
  theme: {
      ...themes.light,
      brandTitle: 'Tencent',
  }
});

自定义主题

.storybook目录创建主题文件，再如上代码引入主题名即可

// theme:tencent.js
/*
 * @Author: Calamus
 * @Descripttion: 
 * @version: 
 * @Date: 2020-07-14 16:25:48
 * @LastEditors: Calamus
 * @LastEditTime: 2020-07-14 16:27:54
 */ 
import { create } from '@storybook/theming/create';

export default create({
  base: 'light',

  colorPrimary: 'hotpink',
  colorSecondary: 'deepskyblue',

  // UI
  appBg: 'white',
  appContentBg: 'silver',
  appBorderColor: 'grey',
  appBorderRadius: 4,

  // Typography
  fontBase: '"Open Sans", sans-serif',
  fontCode: 'monospace',

  // Text colors
  textColor: 'black',
  textInverseColor: 'rgba(255,255,255,0.9)',

  // Toolbar default and active colors
  barTextColor: 'silver',
  barSelectedColor: 'black',
  barBg: 'hotpink',

  // Form colors
  inputBg: 'white',
  inputBorder: 'silver',
  inputTextColor: 'black',
  inputBorderRadius: 4,

  brandTitle: 'Tencent',
  brandUrl: 'https://example.com',
//   brandImage: 'https://placehold.it/350x150',
});

storyBook浅试

目录

开发

快速安装

配置ts

webpack自定义配置loader支持ts等