mdx 形式で Story の Docs を書くようにする #53
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
uknmr
requested changes
Oct 3, 2022
| @@ -10,7 +10,6 @@ const Template: Story<ComponentProps<typeof CommonTable>> = (props) => ( | |||
| ) | |||
|
|
|||
| export const Default = Template.bind({}) | |||
| Default.storyName = '基本' | |||
There was a problem hiding this comment.
これは <Story story={Default} name="基本" /> が代替してくれる認識であってますか?
There was a problem hiding this comment.
名前は Story の近くに合ったほうが管理しやすいかも。Docs にすべてを記述しない場合もありそう。
Comment on lines
21
to
51
| <Heading>パターン</Heading> | ||
|
|
||
| <Subheading>基本</Subheading> | ||
|
|
||
| <Canvas> | ||
| <Story story={Default} name="基本" /> | ||
| </Canvas> | ||
|
|
||
| <Subheading>初期状態</Subheading> | ||
|
|
||
| <Canvas> | ||
| <Story story={InitialState} name="初期状態" /> | ||
| </Canvas> | ||
|
|
||
| <Subheading>検索結果なし</Subheading> | ||
|
|
||
| <Canvas> | ||
| <Story story={NoSearchResult} name="検索結果なし" /> | ||
| </Canvas> | ||
|
|
||
| <Subheading>1ページ未満</Subheading> | ||
|
|
||
| <Canvas> | ||
| <Story story={LessThanOnePage} name="1ページ未満" /> | ||
| </Canvas> | ||
|
|
||
| <Subheading>テーブルの説明なし</Subheading> | ||
|
|
||
| <Canvas> | ||
| <Story story={NoDescription} name="テーブルの説明なし" /> | ||
| </Canvas> |
There was a problem hiding this comment.
見た目は Canvas の方で確認した方が良いもするので、一旦各プロダクトへのリンクだけでも良い気がしました!
yamish123
commented
Oct 4, 2022
Comment on lines
1
to
15
| import { Canvas, Story, Title, Primary, Stories, Heading, Subheading } from '@storybook/addon-docs' | ||
|
|
||
| <Title /> | ||
| <br /> | ||
| <Heading>プロダクトごとの実装</Heading> | ||
|
|
||
| <Subheading>従業員サーベイ</Subheading> | ||
|
|
||
| - [コード](https://github.com/kufu/meyasu/blob/staging/client/src/app/components/presentations/blocks/CommonTable/CommonTable.tsx) | ||
| - [Storybook](https://staging--618dc41b452a67003aa1fedb.chromatic.com/?path=/story/blocks-commontable--default) | ||
|
|
||
| <Heading>Story</Heading> | ||
|
|
||
| <Primary /> | ||
| <Stories /> |
There was a problem hiding this comment.
各コンポーネントの役割
- Title
- Story のタイトルを自動で表示してくれる（
.stories.tsxのexport defaultで指定しているtitleの値）
- Story のタイトルを自動で表示してくれる（
- Heading, Subheading
- markdown の
#,##と同等だが、見出しごとにハッシュ付きのリンクを生成してくれる
- markdown の
- Primary
- 先頭の Story を表示
- Stories
- 戦闘以外の Story を列挙して表示
Comment on lines
+90
to
+94
| parameters: { | ||
| docs: { | ||
| page: mdx, | ||
| }, | ||
| }, |
There was a problem hiding this comment.
mdx で docs を書く場合はこんな感じで .mdx ファイルを定義しつつ、story 側で取り込む
uknmr
requested changes
Oct 4, 2022
Comment on lines
+90
to
+94
| parameters: { | ||
| docs: { | ||
| page: mdx, | ||
| }, | ||
| }, |
| import { Canvas, Story, Title, Primary, Stories, Heading, Subheading } from '@storybook/addon-docs' | ||
|
|
||
| <Title /> | ||
| <br /> |
There was a problem hiding this comment.
HTML でレイアウト調整したくないので、消したい!
やるなら CSS あてたい。
There was a problem hiding this comment.
スマセン、消しました！
2f16c69
Comment on lines
+14
to
+15
| <Primary /> | ||
| <Stories /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
表題の通りです。
スマパタの Storybook の Docs から、各プロダクトの実装のリンクや、その他自由にマークダウンでドキュメンテーションするために、mdx 形式で Story の Docs を書くようにしてみました。
書きっぷりはこの辺を参考にしました。
https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/recipes.md#csf-stories-with-mdx-docs
とりあえず「よくあるテーブル」の Story で試してみたので、良さそうであれば scaffold の作成と、他 Story への適用も行おうと思っています。
relates #6