storyBook浅试

目录

• 开发
  • 快速安装
  • 配置ts
  • 编写组件说明文档
  • 常用的Addon
• 自定义配置
  • 自定义html头
  • 自定义标题链接等
  • 自定义主题
• 优缺点对比
• 相关链接

开发

快速安装

npx -p @storybook/cli sb init
# 也可以全局按照cli后getstorybook命令init
npm run storybook 

配置ts

配合cra的话，首先看一下react-scripts版本，3以上配置的应该是babel7自动可以支持ts的，如果使用cra的话，babel的ts设置就已经开启了，而storybook会去使用cra的配置，所以根本不需要去注入配置。

webpack自定义配置loader支持ts等

• 按照配置这个loaderreact-docgen-typescript-loader

// .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文件即可。默认是如下的目录

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

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 })(() => (
    
    
  
  )),
  { notes: `计费选择组件` }
)
.add("BuyShopCheckBlockItem",withInfo({ inline: true })(() => (
  
  

))
) 

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',
}); 

相关链接

• 文档
• 5.1文档
• 优秀的文章

juejin.im/post/5cf395… www.cnblogs.com/mrzhu/p/102… medium.com/ingenious/s…