storybook v6 -> v7 #1214

penicillin0 · 2023-04-03T23:20:53Z

目的

Storybookのv7化

netlify · 2023-04-03T23:21:00Z

✅ Deploy Preview for ingred-ui ready!

Name	Link
🔨 Latest commit	`a2be965`
🔍 Latest deploy log	https://app.netlify.com/sites/ingred-ui/deploys/6447004144d44000089f6cad
😎 Deploy Preview	https://deploy-preview-1214--ingred-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

penicillin0 · 2023-04-03T23:24:37Z

.storybook/main.js

@@ -8,26 +8,25 @@ module.exports = {
    "@storybook/addon-essentials",
    "@storybook/addon-links",
    "@storybook/addon-storysource",
-    "@storybook/addon-postcss",


v7では使えなさそう
storybookjs/storybook#20529

そもそもPostCSS使いたくていれたものじゃなさそう
https://github.com/voyagegroup/ingred-ui/blame/master/.storybook/main.js#L11

penicillin0 · 2023-04-03T23:26:15Z

.babelrc.json

@@ -0,0 +1,23 @@
+{


v7からは.babelrcを作ってそれを読むようになるっぽい

https://storybook.js.org/docs/react/configure/babel#v7-mode

penicillin0 · 2023-04-03T23:28:48Z

.storybook/main.js

      options: {
-        sourceLoaderOptions: {
+        csfPluginOptions: {
          injectStoryParameters: false,
        },


要調査

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-source-loader--storiesof-static-snippets

@takurinton
pass

penicillin0 · 2023-04-03T23:33:11Z

.storybook/preview.js

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


v7対応されなそう
storybookjs/storybook-addon-console#65

必要か判断した上で、代替手段を要調査

penicillin0 · 2023-04-10T14:11:57Z

source codeが正しく表示されない

displayNameをいれれば表示されそう。
storybookjs/storybook#20920 (comment)
そもそもforwardRefしているところが、eslint(react/display-name)違反ではある。
選択肢としては

source codeは諦める
displayNameを全部指定するようにする
functionを使う <-これで

追記(4/18)
対応されたのでingred-uiとしてはこのままで問題ない、要議論
storybookjs/storybook#22048

penicillin0 · 2023-04-10T22:49:58Z

args table表示されない

storybookjs/storybook#13304
まとめると

default exportだと表示されないっぽい(実際直った)
import * as React from 'react';で直ってる人もいた(直らなかった)
公式側もdefault exportでもどうにかできないか対応中

追記(4/18)
対応された、ingred-ui側では対応必要なし
storybookjs/storybook#22024

penicillin0 · 2023-04-17T15:22:37Z

現状Storybook側がバグ対応中のステータス。なのでv7化においては、以下の方針が良いと気がした。

優先度低い機能なら無理に直そうとせず、issue化しておき、Storybook側の対応を待つ。
deprecatedなものはissue化しておいて、v7移行後に順次対応する。

penicillin0 · 2023-04-17T15:45:28Z

.eslintrc.js

@@ -168,6 +168,7 @@ module.exports = {
        // I realize it's silly of me, but I'll turn it off here for the sake of specs for once.
        "jsx-a11y/click-events-have-key-events": "off",
        "jsx-a11y/no-static-element-interactions": "off",
+        "react-hooks/rules-of-hooks": "off",


Reactに状態をもたせる際、renderプロパティ内に関数を書く必要があり、この中でhooksを利用すると上記のエラーが出る。
いちいちエラーを消すのは手間であるため、*.stories.tsxではこのルールをoffにした。

penicillin0 · 2023-04-17T15:46:45Z

.scaffdog/component.md

@@ -67,15 +67,17 @@ describe("{{ inputs.name | pascal }} component testing", () => {

 ```typescript
 import * as React from "react";
-import { Story } from "@storybook/react/types-6-0";
+import { StoryObj } from "@storybook/react";


Storyは非推奨、v7化以降はオブジェクトで書く。
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-type-deprecated

penicillin0 · 2023-04-17T15:48:22Z

.storybook/preview.js

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


penicillin0 · 2023-04-17T15:48:37Z

.storybook/main.js

      options: {
-        sourceLoaderOptions: {
+        csfPluginOptions: {
          injectStoryParameters: false,
        },


@takurinton
pass

penicillin0 · 2023-04-17T15:50:38Z

src/components/ActionButton/ActionButton.stories.tsx

@@ -14,7 +14,7 @@ export default {
  },
  parameters: {
    docs: {
-      source: { type: "code" },
+      source: { language: "tsx" },


type: "code"の場合、オブジェクトがそのまま表示されてしまい、docとしての役割としては実装サンプルが見えているはずなので、language: "tsx"にする。
ref: https://storybook.js.org/docs/angular/api/doc-block-source#language

penicillin0 · 2023-04-17T15:53:45Z

src/components/Badge/Badge.stories.tsx

-  color: "secondary",
-  children: "secondary",
+export const Primary: StoryObj<typeof Badge> = {
+  ...Template,


これまでTemplateはこんな感じに書く

ref: https://storybook.js.org/docs/react/writing-stories/introduction#using-args

penicillin0 · 2023-04-17T16:01:29Z

src/components/Divider/Divider.stories.tsx

      page: () => (
        <>
          <Title />
-          <Subtitle />
          <Description markdown="`<Divider />` is wrapper of `<hr />` tag that separate content into clear groups." />


takurinton · 2023-04-24T04:35:13Z

今日中にはレビューします！！

takurinton

scaffdog のところ以外は概ね良さそうです！！（そこだけ修正してもらえると）

takurinton · 2023-04-24T04:54:33Z

.scaffdog/component.md

-export const Example: Story<{{ inputs.name | pascal }}Props> = (args) => (
-  <{{ inputs.name | pascal }} {...args} />
-);
+export const Example: StoryStoryObj<{{ inputs.name | pascal }}Props> = {


Suggested change

export const Example: StoryStoryObj<{{ inputs.name | pascal }}Props> = {

export const Example: StoryObj<{{ inputs.name | pascal }}Props> = {

takurinton · 2023-04-24T04:59:15Z

ありがとうございましたmmmmmmm

This reverts commit 5d249d3.

storybook v6 -> v7

8f223db

penicillin0 commented Apr 3, 2023

View reviewed changes

This was referenced Apr 4, 2023

chore(deps-dev): bump @storybook/builder-webpack5 from 6.5.12 to 7.0.2 #1213

Closed

chore(deps-dev): bump @storybook/addon-storysource from 6.5.9 to 7.0.2 #1212

Closed

chore(deps-dev): bump @storybook/react from 6.5.9 to 7.0.2 #1211

Closed

penicillin0 added 3 commits April 11, 2023 07:32

Story -> StoryObj

e163e8a

rm sub title

c296170

tweak

a9d43dd

penicillin0 added 3 commits April 11, 2023 08:09

rm React

c4cb735

version up for alpha

26539a3

docs.source type:code -> language:tsx

9343a2f

penicillin0 commented Apr 17, 2023

View reviewed changes

penicillin0 marked this pull request as ready for review April 17, 2023 15:59

penicillin0 requested a review from takurinton April 17, 2023 15:59

penicillin0 self-assigned this Apr 17, 2023

penicillin0 commented Apr 17, 2023

View reviewed changes

takurinton added 2 commits April 20, 2023 11:35

Merge branch 'master' into storybook-v7

0046dcd

fix: <Accordion /> story

d35f9c5

takurinton approved these changes Apr 24, 2023

View reviewed changes

penicillin0 added 2 commits April 25, 2023 06:38

fix

95aca61

Merge branch 'master' into storybook-v7

8beb2c1

fix for tsc

99f1d5f

takurinton approved these changes Apr 24, 2023

View reviewed changes

penicillin0 added 2 commits April 25, 2023 07:16

storybook: 7.1.0-alpha.5 -> 7.1.0-alpha.8

79fd3fa

Merge branch 'master' into storybook-v7

a2be965

penicillin0 merged commit 5d249d3 into master Apr 24, 2023

penicillin0 deleted the storybook-v7 branch April 24, 2023 22:21

takurinton added a commit that referenced this pull request Apr 25, 2023

Revert "storybook v6 -> v7 (#1214)"

bfafaf3

This reverts commit 5d249d3.

takurinton mentioned this pull request Apr 25, 2023

Revert "storybook v6 -> v7" #1257

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

storybook v6 -> v7 #1214

storybook v6 -> v7 #1214

penicillin0 commented Apr 3, 2023 •

edited

Loading

netlify bot commented Apr 3, 2023 •

edited

Loading

penicillin0 Apr 3, 2023

penicillin0 Apr 17, 2023

penicillin0 Apr 3, 2023

penicillin0 Apr 3, 2023

penicillin0 Apr 17, 2023

penicillin0 Apr 3, 2023 •

edited

Loading

penicillin0 Apr 17, 2023

penicillin0 commented Apr 10, 2023 •

edited

Loading

penicillin0 commented Apr 10, 2023 •

edited

Loading

penicillin0 commented Apr 17, 2023 •

edited

Loading

penicillin0 Apr 17, 2023

penicillin0 Apr 17, 2023

penicillin0 Apr 17, 2023

penicillin0 Apr 17, 2023

penicillin0 Apr 17, 2023

penicillin0 Apr 17, 2023

penicillin0 Apr 17, 2023

takurinton commented Apr 24, 2023

takurinton left a comment

takurinton Apr 24, 2023

takurinton commented Apr 24, 2023

	export const Example: StoryStoryObj<{{ inputs.name \| pascal }}Props> = {
	export const Example: StoryObj<{{ inputs.name \| pascal }}Props> = {

storybook v6 -> v7 #1214

storybook v6 -> v7 #1214

Conversation

penicillin0 commented Apr 3, 2023 • edited Loading

netlify bot commented Apr 3, 2023 • edited Loading

✅ Deploy Preview for ingred-ui ready!

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

penicillin0 Apr 3, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

penicillin0 commented Apr 10, 2023 • edited Loading

penicillin0 commented Apr 10, 2023 • edited Loading

penicillin0 commented Apr 17, 2023 • 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

takurinton commented Apr 24, 2023

takurinton left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

takurinton commented Apr 24, 2023

penicillin0 commented Apr 3, 2023 •

edited

Loading

netlify bot commented Apr 3, 2023 •

edited

Loading

penicillin0 Apr 3, 2023 •

edited

Loading

penicillin0 commented Apr 10, 2023 •

edited

Loading

penicillin0 commented Apr 10, 2023 •

edited

Loading

penicillin0 commented Apr 17, 2023 •

edited

Loading