trancore / auto-create_storybook

Storybookの自動生成スクリプト用リポジトリ

🔈概要

• ReactのコンポーネントからStorybookのファイルを自動生成してみたの記事を読み、storybookの自動生成を自分でも試してみたくなりました。
• 基本的には写経しているものになりますが、一部カスタマイズしている部分があります。

📡使用ライブラリ、フレームワーク

ライブラリ・フレームワーク	用途
React.js	JavaScriptライブラリ。
Storybook	UIコンポーネントカタログ。
Node.js	JavaScriptランタイム。Scriptを実行する。
esbuild	JavaScriptバンドラ。
esbuild-register	esbuildでTypeScriptをトランスパイルしながら実行できるようにする。
ts-morph	TypeScriptコードを操作および解析するためのライブラリ。

📝スクリプトについて

😺npm scripts

node --loader esbuild-register/loader -r esbuild-register .storybook/scripts/autoCreateStorybook.ts"

このファイルは、node.jsで実行することを想定しています。

その際、esbuild-registerを使用することで、TypeScriptのまま実行できるようにしています。

😻説明

Storybookファイルを自動生成するスクリプトは、/.storybook/scripts/autoCreateStorybook.tsに記載しています。

コードの詳細は、上記ファイルを参照してください。

ここでは、このスクリプトを使ってできることを説明していきます
（これも上記ファイルを読んでいただければ分かりますが、理解が容易になるためここでも記載しています）。

🛣️ファイルパスについて

まず、COMPONENTS_PATHに自動生成したいコンポーネントが配置されている親ディレクトリを指定してください。
これを指定することで、そのディレクトリ配下にあるコンポーネントファイルのstorybookファイルを自動生成します。

COMPONENT_DIRECTORY_PATHは、環境によっては修正する必要があります。
今の設定値では、実行するファイルからの相対パスを使用してCOMPONENTS_PATHまでのパスを指定しています。なので、ディレクトリ構成が異なる場合は、これらを考慮する必要があります。

🪢引数について

このスクリプト（npm scripts）を実行すると、このスクリプトのmain関数であるcreateStorybooks関数が実行されます。
その際、3つの引き数が必要になります。

• directoryPath
storybbokを生成したいコンポーネントが保存されたディレクトリパス。COMPONENTS_PATHと同じです(!?)。
• equalsToAbsolutePath
storybookのサイドバー表示をディレクトリと同じにする。

  true	false

• anotherStorybookPath
storybookファイルを、生成したいコンポーネントと同じディレクトリに配置したくない場合、文字列を指定するとsrc配下にその文字列でディレクトリが生成されます。

  storybooksを指定	何も指定しない

🍤テンプレートについて

実際にStorybookファイルとして生成されるテンプレートは、テンプレートリテラルで記載されている箇所になります。

このテンプレートにSelectableとPattern1を記載しています。
Selectableは、StorybookWebツールで任意にコントロール値を変えるためのコンポーネントを意図して、作成しています。
一方Pattern1は、そのコンポーネントを使って特定のパターンを作成することが決まっている場合に、カタログとして登録することを意図して、作成しています。

🙅‍♂️このスプリクトでできないこと

このスクリプトでは、あまり複雑なことはできません。例えば、以下のようなことになります。

• オブジェクトや独自の型には対応していないため、その部分は自動生成できません（手動で記載するようにしています）。
  ※ 他のデータ型については対応できていないだけです（Dateなど）。。。
  • 理由としては、以下になります。
    • この辺りの型やモックデータ生成は文字列操作してコード生成しているため、対応に終わりがなくなってしまう。
    • 特にオブジェクトの場合、ネストなど再帰的な対応が必要になり、これを文字列操作で実現するのは辛い。
    • 上記よりスクリプトが肥大化してしまう恐れがある。
• 自動生成時は、デフォルトに設定されているモックデータしか表示できません。
  • 例えば、いろいろな文言をテキスト表示したい、という場合や、配列の要素をよしなに出す、というようなことはできません。
  • これは、Storybookのコンポーネントカタログとしてパターン表示する機能があり、それを充実していただいた方が良いと思っています。
  • なので、その機能でもってデータパターンなどを作成していただくため、ここでは簡易的なモックデータしか設定していません。
• 自動でコンポーネントカタログドキュメントを作成してくれるautodocsですが、任意のコンポーネントパターンを表示しない、ということはまだできません。
  • そのため、ドキュメントにはSelectableは不要なのですが、残ったままになってしまっています。
  • ちなみに、この件に関しては、issueが建てられており、P-Rにも上がっているようです。