Storybook

介绍

Storybook是帮助前端组件开发的开源工具，可以支持React，Vue，Angular等框架。

它的网站首页这样说道：storybook 为UI组件提供一个独立的沙箱环境，在这里无论是edge case还是难于遇到的状态都可以造出来。可以把use case 像故事一样展现出来。

平常的组件开发，程序猿需要把组件单独放置在一个页面不断的调试，非常不人性化。而storybook就单独为开发人员提供了一个页面，将组件放置在他们提供的页面中清晰可见。

简单的说，如果我们是开发react组件，就不需要启动react的打包编译启动页面浏览组件，只需要启动storybook为我们内置的页面即可浏览组建

这样，单个组件的样式更好的展示出来。而且自动生成组件所需的API表

安装

这里我们以React app为例，如何在React脚手架中配置storybook

注意新旧版本示例文件有所不同!!!

• 根目录执行：npx -p @storybook/cli sb init
  • 自动配置项目并生成实例文件，如下：

• 启动：yarn run storybook
  • 左边就是组件的目录

介绍

打开Header.stories.jsx文件

我们可以在metadata 里面定义一些参数（parameters）这样可以提供一些配置上的灵活性。

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

export default {
  title: 'Example/Header', //---左侧目录配置
  component: Header, //---指定具体的组件
  parameters: { //---自定义参数
    layout: 'fullscreen',
  },
};

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

export const LoggedIn = Template.bind({});
LoggedIn.args = {
  user: {
    name: 'Jane Doe',
  },
};

export const LoggedOut = Template.bind({});
LoggedOut.args = {};

LoggedIn.args是配置组件属性的默认值

配合Styled-components

配置Styled-components主题

因为storybook是独立于react creat app的，所以需要为storybook再配置一下主题

• 在.storybook文件下创建preview.js文件

• import React from "react";
  import { addDecorator,addParameters } from "@storybook/react";
  import { ThemeProvider } from "styled-components";
  import theme from '../src/theme'; //---theme为全局变量配置，类似less的全局变量配置文件
  
  import 'story.css';
  
  addDecorator((storyFn)=>(
    <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
  ))
  

更多…