🙌

三目並べをStorybookにする

na8esin

2024/06/08に公開

はじめに

reactのチュートリアルやっていて、コンポーネントをどんどん追加したくなりましたが、後でStorybookを導入した時にStoryを作りやすい感じのコンポーネントにしておきたくて調べてみました（そんなのあるのか？）。

既存のプロジェクトにStorybook追加

事前に調べた感じだと、storybookに関しては、Chromaticで公開, アプリ(3目並べ)に関しては引き続きGitHub Pagesがいいかなと思いました。

話はそれますが、Storybookのチュートリアルをざっと眺めてみたんですが、Reduxが登場したり、mswを使ったAPIのインターセプトの方法が出てきたりかなり難易度が高かったです。
少なくともReduxのチュートリアルは、ざっと眺めていく必要がありそうです。
※初学者にはかなりきつそう

まず、Toggleのstoriesを追加

最低限動くようにしてみました。

Toggleだけだとこんなものですね。

Storybook上ではこんな感じで動きます。

難易度が高そうなSquareコンポーネントのstoriesを作成

Squareはpropsも色々あって、複雑そうです。
cssがindex.cssみたいな共通のところにあったり、まだ追加してない機能(勝利に繋がったラインの色を変える)も実装したかったので、別のファイルに分離しました。

さらに、こっちは、Toggleと違って、styled-componentsを使ってみました。
styled-componentsの方は、若干学習コストがあるが、柔軟性がある感じでしょうか。
その柔軟性を利用して、勝利ラインの一部かどうかをpropsとして渡して、色を変えることにしました。

storiesも最初はこんな感じで用意してみました

Square.stories.ts

import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { Square } from "./Square";

const meta = {
  title: "Square",
  component: Square,
  tags: ["autodocs"],
  args: {
    onSquareClick: fn()
  },
} satisfies Meta<typeof Square>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    value: null,
    partOfWonLine: false,
  }
};

autodocsでエラー

Square.storiesのDocsでエラーが発生しました。

type SquareValue = "X" | "O" | nullこんな感じの型をpropsのvalueという値に設定してるんですが、下記のようなエラーが発生して、うまく動きませんでした。

このエラーはこんな感じのコードで怒られる時と同じですね。

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <div>{{}}</div>
      {/* ↑ここでエラーになる */}
    </div>
  );
}

↓あたりのissueが関係そうに見えます。。。

うーん、難しい。

ただ、npx storybook@latest initで生成された、ExampleのButton.tsxはsize?: 'small' | 'medium' | 'large';みたいな型があるので、なんでだろ？と思ったんですが、nullがどうやら悪さをするようで、削除するとさっきのエラーは出なくなりました。

でも、今更nullを削除すると動作が変わって困るので、若干調べてみました。
色々調べてみたところ、autodocsの機能は、react-docgenを利用しているようで、そこに問題があるようだと。
なので、下記で先ほどの型を入力してみました。
https://react-docgen.dev/playground
入力結果↓

↑を見ると赤で囲った部分のnullのところにvalueがなくて、何か変な感じがします。
ただ、ここからは深みにハマる予感がしたので、調査はやめにして、argTypesを使って下記のようにすることで乗り切りました。

storybookでの表示↓