対象

既存のReact/NextプロジェクトにStorybookを追加したい方。
Typescriptの絶対参照の有効化の方法もあります。

Storybookとは

公式ホームページが参考になります。
簡単に言えば、
コンポーネント単位でUIや挙動をチェックできる
というもの。

導入

npx を使うのが最も簡単な方法

npx sb init

それぞれの環境に合わせてインストールしてくれる

追加されるもの

├─.storybook
│      main.js
│      preview.js
│      
├─src
│  └─stories
│      Button.tsx
│      Button.stories.tsx
│      Button.css
│      ...

src/stories/

初めに追加されるこれらのファイルはExampleなので不必要なら消してよい

/.storybook/main.js

設定ファイル

絶対パス指定を有効にする方法
デフォルトでは import ~ from "~/..." ではエラーが発生します
以下を追記してください

+ const path = require('path')
+ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')


mudule.export = {
  ...
+   webpackFinal(config) {
+   config.resolve.modules = [
+      ...(config.resolve.modules || []),
+      path.resolve(__dirname, '../src')
+    ]

+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      new TsconfigPathsPlugin()
+    ]
+    return config;
+  },
 ...
}

Storybookサーバーの起動

yarn storybook

デフォルトポートは6006

基本的なコード

Storybookの機能Actions(onClickやonChangeなど)やControls(PropsをGUI上で変更できる)を有効にするためにはStorybook特有の書き方が必要となる。
詳しくはDocを参照してください

最も簡単な例

フォルダ構成

src
├─components
│   └─ atoms
│       └─ Button
│            index.tsx
│            style.tsx
├─stories
│   ├─ Button.stories.tsx

Storiesを記述するファイル

Button.stories.tsx

import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { Button } from "~/components/atoms/Button";

// 必須
export default {
  title: "Atoms/Button",
  component: Button,
} as ComponentMeta<typeof Button>;


// 任意
const Template: ComponentStory<typeof Button> = (args) => (
  <Button {...args} />
);

export const Primary = Template.bind({});
Primary.args = {
    // Add props
};

export const Noraml = Template.bind({});
Normal.args = {
    // Add props
};

Storybookの導入と絶対参照の有効化

対象