- コンポーネントを作成する
- storyを作成する
- ドキュメントを作成する
.jsxファイルでコンポーネントを作成する
ホバーアニメーション > カード の例）
/src/stories/hover/card/Card.jsx
.stories.jsxファイルでstoryを作成する
ホバーアニメーション > カード の例）
/src/stories/hover/card/Card.stories.jsx
.mdxファイルでドキュメントを作成する
ホバーアニメーション > カード の例）
/src/stories/hover/card/Card.mdx
.mdxファイルはマークダウンを機能拡張したファイル形式です。
マークダウンのように書きつつ、Reactコンポーネントの読み込みなどが実行できます。
ドキュメント内でstoryを表示させるには下記のようなコードを記述します。
<Story id="hover-card--default" />
id属性値は【グループ名】-【コンポーネント名】--【タイプ】を指定します。