Open5
React 向け Storybook のチュートリアル
haseyuyStorybook
- コンポーネント群をアプリケーションに組み込まず開発できる。localhost 起動で、開発時点で動作チェックしながら進めることができてとても便利。
haseyuyStorybook には基本となる 2 つの階層があります。コンポーネントとその子供となるストーリーです。各ストーリーはコンポーネントに連なるものだと考えてください。コンポーネントには必要なだけストーリーを記述することができます。
コンポーネント
- ストーリー
- ストーリー
- ストーリー
haseyuyストーリーファイルを作成
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',
},
};
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"
}
}
.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].*" },
}