自分の中ではデザインシステムを管理するツールにStorybookはマストになっているが、そのStorybookコミュニティが使っているデザインシステムが公開されていたのでみてみた
ちなみに実際使用しているのはStorybookコミュニティが運営する以下の3サイト
- Storybook homepage
- LearnStorybook.com
- Chromatic.com
Storybook自体のUIには使われていないみたい
目的
ReadmeによるとStorybookデザインシステムは、UIコンポーネントを中央管理して、複数のプロジェクトに何度も貼り付けて使用できるようにするために構築されている
これによりUIが簡単に構築できるようにしている
やっていること
やっていないこと
- すべての新しいコンポーネントを最初から書き直す
- コンポーネントのビジュアルデザインをオーバーホールする
- And Design やMaterial Design などの一般的な設計システムとの争い
→Ant Designを知らなかったので後日調べる
技術スタック
技術スタックは以下
- React
- Styled-components
- Storybook-docs
自身のプロジェクトではStyled-componentsを使っているのでアップデートの時にStorybookとの連携などを気にしているが、StorybookコミュニティがStyled-componentsを使っているのが知れてちょっと安心した
ソースツリーを見た感じコンポーネントは基本的に一つのディレクトリにまとめていて、AtomicDesignなどの概念を使って階層分けはしていない
storiesファイルも同じcomponentsディレクトリに配置している
https://github.com/storybookjs/design-system/tree/master/src/components
デザインシステム入門
このデザインシステムの運用を通して、Storybookコミュニティが開発者のためのデザインシステムを考えたらしい
その構築方法は以下に書かれていた
以下のような章立てになっている
テスト戦略が気になる
Test to maintain quality | Storybook Tutorials
特に気になったのがStorybookコミュニティが開発しているChromaticというUIテストツール
シンプルできれいな見ための管理画面
ビジュアルリグレッションテストなどができるみたい
その他にもアクセシビリティテストなど別のテスト戦略のことも書かれているので試してみたい