storybook 1

介绍

组件开发环境，可以更直观、无依赖地开发和展示组件

Writing Stories

一个组件对应一个story

a story is a function that returns something that can be rendered to screen.

import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from './Button';

export default {
  component: Button,  // 组件
  title: 'Button', // storybook启动后界面左边展示地文案
};

export const text = () => Hello Button;

export const emoji = () => (
  
    
         
    
  
);

Story file location

• 组件文件同一路径
• src同路径

Loading stories

Stories are loaded in the .storybook/main.js file or .storybook/preview.js file.

• 通过文件名引入stories(如果你的stories文件放在src/components文件下，你可以使用下面方式引用）

// .storybook/main.js
module.exports = {
stories: ['../src/components/**/*.stories.js'],
};

• 你也可以在 .storybook/preview.js中引入所有的stories

import { configure } from '@storybook/react';
configure(require.context('../src/components', true, /\.stories\.js$/), module);

如果stories放在多个路径，可以使用数组

import { configure } from '@storybook/react';

configure(
  [
    require.context('../src/components', true, /\.stories\.js$/),
    require.context('../lib', true, /\.stories\.js$/),
  ],
  module
);

枚举引入

import { configure } from '@storybook/react';
const loaderFn = () => [
  require('./welcome.stories.js'),
  require('./prelude.stories.js'),
  require('./button.stories.js'),
  require('./input.stories.js'),
];
configure(loaderFn, module);

混合引入

import { configure } from '@storybook/react';

const loaderFn = () => {
  const allExports = [require('./welcome.stories.js')];
  const req = require.context('../src/components', true, /\.stories\.js$/);
  req.keys().forEach(fname => allExports.push(req(fname)));
  return allExports;
};

configure(loaderFn, module);

If you are using the storiesOf API directly, or are using @storybook/react-native where CSF is unavailable, you should use a loader function with no return value:

import { configure } from '@storybook/react';

const loaderFn = () => {
  // manual loading
  require('./welcome.stories.js');
  require('./button.stories.js');

  // dynamic loading, unavailable in react-native
  const req = require.context('../src/components', true, /\.stories\.js$/);
  req.keys().forEach(fname => req(fname));
};

configure(loaderFn, module);

Decorators

• global decorator : applied in the Storybook config files
  // .storybook/preview.js:

import React from 'react';
import { addDecorator } from '@storybook/react';

addDecorator(storyFn => 
{storyFn()}
);

• component/local decorators

import React from 'react';
import MyComponent from './MyComponent';

export default {
  title: 'MyComponent',
  decorators: [storyFn => 
{storyFn()}
],
};

export const normal = () => ;
export const special = () => ;
special.story = {
  decorators: [storyFn => 
{storyFn()}
],
};