Refactor Storybook <Button /> #213

youchann · 2020-11-30T09:02:21Z

ここを親ブランチとし、**.stories.tsxをリプレイスする際は別ブランチからこちらにマージする。
全てのコンポーネントを書き換えた時点で当PRをマージする。
コンポーネントの数が多いので、随時リリースする方針に変更。
なお、進捗は #212 の方で管理する。

やったこと

@storybook/addon-console、@storybook/addon-consoleの導入
Button.stories.mdxにドキュメンテーション
.scaffdog/component.mdを.mdxに対応させる
既存の**.stories.tsxにおいて、Docsタブをみれないように
ESLintが.mdx対応できるように

youchann · 2020-11-30T09:03:03Z

.storybook/main.js

+    // TODO: fix warn "Rendered more hooks than during the previous render."
+    // knobを完全に排除できたタイミングで再度調査
+    // strictMode: true,


youchann · 2020-12-07T01:02:59Z

src/components/NavigationRail/NavigationRail.stories.tsx

@@ -58,6 +58,7 @@ export default {
  title: "NavigationRail",
  parameters: {
    component: NavigationRail,
+    layout: "fullscreen",


デフォルトではcanvasにpaddingが付与されているが、サイドバーなどのコンポーネントにとっては不要。

youchann · 2020-12-07T05:33:02Z

.scaffdog/component.md

+  argTypes={
+    { onClick: { action: "clicked" } }
+  }


ref: https://storybook.js.org/docs/react/essentials/actions#action-argtype-annotation

youchann · 2020-12-07T05:34:07Z

.scaffdog/component.md

+<Canvas>
+  <Story
+    name="something"
+    args={{}}


実際に生成するとargs= みたいな感じで、何も書かれない。
args={{{{}}}}みたいに書くとシンタックスエラーみたいなのが出る

youchann · 2020-12-07T05:34:52Z

.storybook/preview.js

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { ThemeProvider, createTheme } from "../src/themes";
+import "@storybook/addon-console";


ref: https://qiita.com/kichion/items/93ffe1ba773d26c20ff6?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items#%E5%BF%85%E9%A0%88%E5%BA%A6--console

youchann · 2020-12-07T05:36:09Z

src/components/Backdrop/Backdrop.stories.tsx

+  parameters: {
+    docs: { page: null },
+  },


現行の.stories.tsxはDocsタブ常にデフォルトのものが表示されるが、

情報量が足りない

コンポーネントによっては見辛い

ということで共通で見れないようにした。

youchann · 2020-12-07T05:36:50Z

src/components/Button/Button.stories.mdx

+<Canvas>
+  <Story
+    name="primary"
+    args={{
+      color: "primary",
+      children: "primary",
+    }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>
+  <Story
+    name="secondary"
+    args={{
+      color: "secondary",
+      children: "secondary",
+    }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>


.map()で書きたいが、今の所かけない。

ref: storybookjs/storybook#8392

youchann · 2020-12-07T05:37:58Z

src/components/Fade/Fade.stories.tsx

-    <Fade timeout={{ enter, exit }} in={isOpen}>
-      <Button>Control in Knob Footer</Button>
-    </Fade>


Storybookアプデの影響か、このコンポーネントにおいてはKnobの操作によってtransitionが発火しなかった。

ので、<Grow />と同じ構成にした。

youchann · 2020-12-07T05:45:55Z

.vscode/settings.json

+    "eslint.options": {
+        "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"]
+    },


いずれ.mdxが対応されるはずなので、あらかじめいれておいた。

youchann · 2020-12-07T05:48:44Z

@ryokosuge
必要であれば口頭で共有しましょう:+1:

ryokosuge · 2020-12-07T06:04:28Z

.scaffdog/component.md

-  component: {{ input }},
-};
+<Meta
+  title="{{ input | pascal }}"


めちゃくちゃ細かいんだけど

https://storybook.js.org/docs/react/writing-docs/mdx#writing-stories

<Meta title="" >

のtitleのところを例えば Component/{{ input | pascal }} みたいにディレクトリ切る感じで書いていくと

こんな感じ（ここだと <Meta title="MDX/Badge">）になるんだけど、分けていった方がみやすいかな？って思ったんだけどどうでしょう！

Component

Layout

とかくらいに分かれるかなーっていうイメージ

ああ、全然良いと思います:+1:

別PRでやりましょうか！！

そうしましょう！

この辺にちょろっと書いた
#212 (comment)

ryokosuge · 2020-12-07T06:06:59Z

.scaffdog/component.md

+    name="something"
+    args={{}}
+  >
+    {(args) => <{{ input | pascal }} {...args} />}


 export const Template = (args) => <Badge {...args } />

Buttonのやつみる限り、複数回 {(args) => <{{ input | pascal }} {...args} /> これを書いてるから、{Template.bind({})} の方がちょっと楽かな？と思い！
使わなかった理由があったら教えて欲しい！

良い質問ですね!!(書き忘れていた)

時間あれば手元でやっていただけると嬉しいのですが、出力されるコピペ可能なコードにおいて、Buttonというコンポーネント名で出力されなかったんですよね.....
なのでベタがきしている。といったかんじです！

自分の手元で再現してみた。

なるほど、MDXCreateElementは export const Template = (args) => <Badge {...args } /> で出てくるのか！
だったら PreviewのところはちゃんとしたComponent名で出て欲しいから、この記法の方が良さそうだね！

ryokosuge · 2020-12-07T06:14:13Z

package.json

-    "@storybook/addon-storysource": "^6.1.6",
+    "@storybook/addon-console": "^1.2.2",
+    "@storybook/addon-essentials": "^6.1.9",
+    "@storybook/addon-knobs": "^6.1.9",


こいつ残してるのは、前のやつとの互換とるためかな？
knobsとessentialsに含まれてるcontrolsがほぼ同じやつだと認識してるんだけど、もしかして理解足りてない...？w

そうですね。前のやつと互換を取るためです！

knobsとessentialsに含まれてるcontrolsがほぼ同じやつだと認識

合ってます！がライブラリとしては別モノなので、一気に乗り換えるためには修正は必要でして。。。
https://github.com/storybookjs/storybook/tree/next/addons/controls#how-do-i-migrate-from-addon-knobs

いずれ全て変わるので、一気にやらなくても良いかなという判断です！

ryokosuge

LGTM 👍

ひとまず使うライブラリ整える

d90edab

youchann added the enhancement New feature or request label Nov 30, 2020

youchann requested a review from a team as a code owner November 30, 2020 09:02

youchann self-assigned this Nov 30, 2020

youchann requested review from penicillin0 and removed request for a team November 30, 2020 09:02

youchann commented Nov 30, 2020

View reviewed changes

youchann removed the request for review from penicillin0 November 30, 2020 09:11

youchann added 4 commits December 4, 2020 16:20

とりあえずいい感じに

e0244ce

$ yarn lint がちゃんと走るようにした

44abff7

tweak

5093b89

tweak

73cb828

youchann commented Dec 7, 2020

View reviewed changes

youchann added 5 commits December 7, 2020 10:11

addon-storysource 再追加

45e7d15

knobが意図通りの動作にならないので、<Grow />と同じ実装にした

5eb9f5f

リプレイスしていないコンポーネントのDocsをdisableに

dc5aff1

scaffdogを整える

b0617ad

lint --fix

7cd7799

youchann changed the title ~~wip Refactor Storybook~~ wip Refactor Storybook <Button /> Dec 7, 2020

youchann added 2 commits December 7, 2020 12:17

tweak

022fff3

tweak

8507659

youchann commented Dec 7, 2020

View reviewed changes

youchann changed the title ~~wip Refactor Storybook <Button />~~ Refactor Storybook <Button /> Dec 7, 2020

youchann commented Dec 7, 2020

View reviewed changes

youchann mentioned this pull request Dec 7, 2020

Storybookのリファクタリング #212

Closed

53 tasks

youchann requested a review from ryokosuge December 7, 2020 05:48

ryokosuge reviewed Dec 7, 2020

View reviewed changes

ryokosuge self-requested a review December 7, 2020 06:37

ryokosuge approved these changes Dec 7, 2020

View reviewed changes

youchann merged commit edd4387 into master Dec 7, 2020

youchann deleted the refactor-storybook branch December 7, 2020 06:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor Storybook <Button /> #213

Refactor Storybook <Button /> #213

youchann commented Nov 30, 2020 •

edited

Loading

youchann Nov 30, 2020

youchann Dec 7, 2020

youchann Dec 7, 2020

youchann Dec 7, 2020 •

edited

Loading

youchann Dec 7, 2020

youchann Dec 7, 2020

youchann Dec 7, 2020

youchann Dec 7, 2020

youchann Dec 7, 2020 •

edited

Loading

youchann commented Dec 7, 2020

ryokosuge Dec 7, 2020

youchann Dec 7, 2020

ryokosuge Dec 7, 2020

youchann Dec 7, 2020

ryokosuge Dec 7, 2020

youchann Dec 7, 2020

youchann Dec 7, 2020

ryokosuge Dec 7, 2020

ryokosuge Dec 7, 2020

youchann Dec 7, 2020 •

edited

Loading

ryokosuge Dec 7, 2020

ryokosuge left a comment

Refactor Storybook <Button /> #213

Refactor Storybook <Button /> #213

Conversation

youchann commented Nov 30, 2020 • edited Loading

やったこと

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youchann Dec 7, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youchann Dec 7, 2020 • edited Loading

Choose a reason for hiding this comment

youchann commented Dec 7, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youchann Dec 7, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryokosuge left a comment

Choose a reason for hiding this comment

youchann commented Nov 30, 2020 •

edited

Loading

youchann Dec 7, 2020 •

edited

Loading

youchann Dec 7, 2020 •

edited

Loading

youchann Dec 7, 2020 •

edited

Loading