【備忘録④】React & TypeScript & Webpack4 & Babel7 & dev-server の最小構成ボイラープレートの作成 -Storybookの導入-
この記事はQiitaの記事をエクスポートしたものです。内容が古くなっている可能性があります。
モジュール追加
# Storybookをインストール $ npm install -D @storybook/cli # プロジェクトへ移動 $ cd <プロジェクトパス> # Storybookの設定ファイル等の雛形を作成 $ npx -p @storybook/cli sb init
「.storybook」ディレクトリに設定ファイルが作成される。
「stories」ディレクトリにストーリーのサンプルが作成される。
.storybook ├── config.js └── webpack.config.js stories └── index.stories.js
package.jsonにStorybook起動、ビルド用コマンドが自動で追加される。
"storybook": "start-storybook -p 6006", "build-storybook": "build-storybook"
また、基本となるアドオンとプロジェクトに使用しているフレームワーク（ここではReact）用のもジュルも自動で追加される。
"@storybook/addon-actions": "^5.1.9", "@storybook/addon-links": "^5.1.9", "@storybook/addons": "^5.1.9", "@storybook/react": "^5.1.9",
起動確認
$ npm run storybook
「localhost:6006」にアクセス。
アドオンの追加
便利なアドオンを追加する。
| モジュール名 | バージョン | 詳細 |
|---|---|---|
| @storybook/addon-knobs | 5.1.9 | プロパティを変更できる画面を追加 |
| @storybook/addon-viewport | 5.1.9 | ビューポートを切り替えるボタンを追加 |
| react-docgen-typescript-loader | 3.1.0 | ストーリーの例とか説明を追加 |
| @storybook/addon-info | 5.1.9 | TypeScriptの型からコンポーネントのプロパティ説明を追加 |
| @storybook/addon-console | 1.2.1 | Actionsタブにコンソールログを表示する |
| react-docgen-typescript-webpack-plugin | 1.1.0 | react-docgen-typescript-loader用の追加モジュール |
モジュールをインストールする。
$ npm install -D @storybook/addon-knobs @storybook/addon-viewport react-docgen-typescript-loader @storybook/addon-info @storybook/addon-console react-docgen-typescript-webpack-plugin
TypeScriptで使用するので型定義も追加する。
$ npm install -D @types/storybook__react @types/storybook__addon-info @types/storybook__addon-actions @types/storybook__addon-knobs @types/storybook__addon-links
アドオン追加・設定
ここら辺が参考になる
https://storybook.js.org/docs/addons/using-addons/
「.storybook」ディレクトリの下にaddons.jsファイルを作成する。
# .storybook/addons.js import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; import '@storybook/addon-knobs/register'; import '@storybook/addon-viewport/register'; import '@storybook/addon-console';
設定ファイルを修正
# .storybook/config.js
import { configure, addDecorator } from '@storybook/react';
import { setConsoleOptions } from '@storybook/addon-console';
import { withInfo } from '@storybook/addon-info';
import { withKnobs } from '@storybook/addon-knobs';
setConsoleOptions({
panelExclude: [],
});
const req = require.context('../src', true, /.stories.(tsx|js)$/);
function loadStories() {
addDecorator(withInfo);
addDecorator(withKnobs);
req.keys().forEach(req);
}
configure(loadStories, module);
# .storybook/webpack.config.js
const path = require("path");
const SRC_PATH = path.join(__dirname, '../src');
module.exports = ({
config
}) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
include: [SRC_PATH],
use: [{
loader: require.resolve('babel-loader'),
options: {
presets: [
['react-app', {
flow: false,
typescript: true
}]
],
}
},
{
loader: require.resolve('react-docgen-typescript-loader')
}
]
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
確認用コンポーネントの作成
ボタンクリック時の動作、テキストの変更、表示切り替えが設定できる簡単なコンポーネントを用意する。
# src/component/Button/index.tsx
import React from 'react';
export interface IButtonProps {
text: string;
flag?: boolean;
action(): void;
}
const Button = (props: IButtonProps) => {
const { text, flag, action } = props;
return (
<React.Fragment>
{ flag && <p>{text}</p> }
<button onClick={ action }>Button</button>
</React.Fragment>
);
};
export default Button;
Storybookでの動作確認用コンポーネントを作成する。
# src/component/Button/index.stories.tsx
import React from 'react';
import {storiesOf} from '@storybook/react';
import {text, boolean} from '@storybook/addon-knobs';
import {action} from '@storybook/addon-actions';
import Button from '../Button';
const components = storiesOf('Components', module);
components.add('Button', () => (
<Button
text={text('テキスト', 'ボタンですよ')}
flag={boolean('テキスト表示', true)}
action={action('ボタンを押した!')}
/>
));
起動確認
$ npm run storybook
「localhost:6006」にアクセス。
ボタンクリック時の動作、テキストの変更、表示切り替えができることを確認。
以上で確認完了。
作成したボイラープレートは こちら
