Open5

React 向け Storybook のチュートリアル

haseyuyhaseyuy

Storybook

  • コンポーネント群をアプリケーションに組み込まず開発できる。localhost 起動で、開発時点で動作チェックしながら進めることができてとても便利。
haseyuyhaseyuy

Storybook には基本となる 2 つの階層があります。コンポーネントとその子供となるストーリーです。各ストーリーはコンポーネントに連なるものだと考えてください。コンポーネントには必要なだけストーリーを記述することができます。

コンポーネント

  • ストーリー
  • ストーリー
  • ストーリー
haseyuyhaseyuy

ストーリーファイルを作成

Task.stories.js
import React from 'react';
import Task from './Task';

// Storybookにコンポーネントを認識させるために、export defaultで宣言する
export default {
    component: Task, // コンポーネント自体
    title: 'Task',   // Storybookのサイドバーにあるコンポーネントを参照する方法
}

// コンポーネントにストーリーが複数連なっているので,
// 各ストーリーを単一の Template 変数に割り当てる
const Template = args => <Task {...args} />;

// // Taskに対する3つのテスト用の状態を書いていく
export const Default = Template.bind({});
Default.args = {
    task: {
        id: '1',
        title: 'Task 1',
        state: 'TASK_INBOX',
        updateAt: new Date(2018, 0, 1, 9, 0),
    },
};

export const Pinned = Template.bind({});
Pinned.args = {
    task: {
        ...Default.args.task,
        state: 'TASK_PINNED',
    },
};

export const Archved = Template.bind({});
Archved.args = {
    task: {
        ...Default.args.task,
        state: 'TASK_ARCHIVED',
    },
};
haseyuyhaseyuy

Webpackの設定

  • Storybook displays your components in a custom web application built using Webpack.
.storybook/main.js
// Export a function that will be called by the Storybook UI.
module.exports = {
  // ストーリファイルのパスを定義
  "stories": ['../src/components/**/*.stories.js'],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "webpack5"
  }
}
haseyuyhaseyuy
.storybook/preview.js
import '../src/index.css'; //👈 The app's CSS file goes here

export const parameters = {
// アクションアドオンを使用することで、クリックした時などに Storybook の actions パネルにその情報を表示するコールバックを作成できます。これにより、ピン留めボタンを作成するとき、
// ボタンがクリックされたことがテスト用の UI 上で確認できます。
  actions: { argTypesRegex: "^on[A-Z].*" },
}