UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Design System】Storybookのデザインシステム

自分の中ではデザインシステムを管理するツールにStorybookはマストになっているが、そのStorybookコミュニティが使っているデザインシステムが公開されていたのでみてみた

ちなみに実際使用しているのはStorybookコミュニティが運営する以下の3サイト

  • Storybook homepage
  • LearnStorybook.com
  • Chromatic.com

Storybook自体のUIには使われていないみたい

github.com

目的

ReadmeによるとStorybookデザインシステムは、UIコンポーネントを中央管理して、複数のプロジェクトに何度も貼り付けて使用できるようにするために構築されている

これにより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コミュニティが開発者のためのデザインシステムを考えたらしい

その構築方法は以下に書かれていた

storybook.js.org

以下のような章立てになっている

f:id:uggds:20211009124009p:plain:w200

テスト戦略が気になる

Test to maintain quality | Storybook Tutorials

特に気になったのがStorybookコミュニティが開発しているChromaticというUIテストツール

www.chromatic.com

シンプルできれいな見ための管理画面

f:id:uggds:20211009125453p:plain

ビジュアルリグレッションテストなどができるみたい

f:id:uggds:20211009125538p:plain

その他にもアクセシビリティテストなど別のテスト戦略のことも書かれているので試してみたい