Storybook
examples
>
tutorial
reactのtutorial
type safeみが向上したらしい
Stroybookの1つ1つの構成
コンポーネント
ストーリー
ストーリー
1つのComponentに対し、複数のstoryを作っていく感じ
onClick系のdummyはどうやって渡すか
良い感じの運用方法
表示順が云々
Examples
storybook-deps-addonを使ってComponentの依存関係を表示する
VSCode上でStroybookを表示するやつ
addonがおおい
>Storybookの一部としてReact用に特化したモジュールです。Reactコンポーネントをビジュアルで管理し、視覚的にテストするためのツールとして役立ちます。
>a11yはアクセシビリティ(accessibility)の略です。このアドオンは、製作中のコンポーネントがアクセシビリティのベストプラクティスに従っているかをチェックするためのものです。
>Storyshotsアドオンは、Storybookのストーリーを瞬間的にスナップショットテストできるツールです。これにより、コードが予期せずに変更されるのを防ぐことができます。
> アクションアドオンを使うと、コンポーネントが発生させるイベント(コールバックの呼び出しやユーザーによるインタラクションなど)をストーリーブックUI上にロギングすることができます。
コマンド一つで、Componentとstoriesのテンプレを生成する
Storybook の中から別の Storybook を参照できる