概要

HygenとStorybookを導入した。 Hygenによりコンポーネントの新規作成時にファイルを自動生成してくれる。また、Storybookによりコンポーネントの管理・開発がしやすくなる。

使い方

Hygen

% yarn generate:component
✔ What is the name of the component? (e.g. MyButton) · MyButton
✔ Where is the directory of the component? (e.g. components/buttons) · components/buttons
✔ Do you want to create a storybook for this component? · No / Yes

Loaded templates: _templates
       added: components/buttons/MyButton/index.stories.tsx
       added: components/buttons/MyButton/index.tsx

次のPRでページの自動生成もできるようにする。

Storybook

自動生成されたindex.stories.tsxを編集する。実際に表示されそうなPropsのパターンをなるべく網羅する。

開発時は以下のコマンドでサーバを起動することができる。 http://localhost:6006

yarn storybook

デプロイは以下のコマンドで可能。

yarn build-storybook

hibiki31 / virty

Add Hygen and Storybook #72

概要

使い方

Hygen

Storybook