Storybook

https://gyazo.com/23596b4dbf8b3fd61c6d3cb94440376d

examples

https://gyazo.com/7ffc24a9bf3b6152d6868316739528eb https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy#sorting-stories

#WIP

CSF (Storybook)

story

tutorial

https://storybook.js.org/tutorials/intro-to-storybook/react/ja/get-started/

reactのtutorial

story.to.design

https://story.to.design/

StorybookからFigmaに変換

https://storybook.js.org/blog/improved-type-safety-in-storybook-7/

Storybook v7

type safeみが向上したらしい

Stroybookの1つ1つの構成

コンポーネント

ストーリー

1つのComponentに対し、複数のstoryを作っていく感じ

storyとは #??

#??

onClick系のdummyはどうやって渡すか

良い感じの運用方法

Next.js & TypeScript環境にStorybookを追加

表示順が云々

https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy

https://qiita.com/keitakn/items/982d7e6cdfc294c82a95#必要な設定ファイルを作成する

Examples

https://storybook.js.org/docs/examples/

https://medium.com/@minodisk/storybookの旨味をしゃぶり尽くす-4828e73325e2

https://blog.mamansoft.net/2017/11/16/visual-regression-testing-with-react-story-book/

https://tech.mercari.com/entry/2018/12/19/123834

https://medium.com/storybookjs/discover-dependencies-in-storybook-49264d361e21

storybook-deps-addonを使ってComponentの依存関係を表示する

VSCode Extension

https://marketplace.visualstudio.com/items?itemName=async-aesop.aesop

VSCode上でStroybookを表示するやつ

reg-suit

reg-viz

https://github.com/reg-viz/storycap

Interactive stories

addonがおおい

@storybook/addon-essentials

@storybook/addon-links

@storybook/react

Storybookの一部としてReact用に特化したモジュールです。Reactコンポーネントをビジュアルで管理し、視覚的にテストするためのツールとして役立ちます。gpt-4.icon

@storybook/addon-a11y

a11yはアクセシビリティ（accessibility）の略です。このアドオンは、製作中のコンポーネントがアクセシビリティのベストプラクティスに従っているかをチェックするためのものです。gpt-4.icon

@storybook/addon-storyshots

Storyshotsアドオンは、Storybookのストーリーを瞬間的にスナップショットテストできるツールです。これにより、コードが予期せずに変更されるのを防ぐことができます。gpt-4.icon

@storybook/addon-actions

アクションアドオンを使うと、コンポーネントが発生させるイベント（コールバックの呼び出しやユーザーによるインタラクションなど）をストーリーブックUI上にロギングすることができます。gpt-4.icon

@storybook/addon-interactions

@storybook/nextjs

https://storybook.js.org/recipes/next

Chromatic

腐らないUIテストのためのStorybook + Storyshots

https://recruit-tech.co.jp/blog/2020/12/15/culture-and-automation/

Hygen

.storiesのScaffold Generateをするやつ

コマンド一つで、Componentとstoriesのテンプレを生成する

faclip

Storybook composition

https://blog.ryota-ka.me/posts/2021/01/31/storybook-composition

Storybook の中から別の Storybook を参照できる