Merge pull request #9324 from MrJithil/upgrage-storybook-version

Upgrade storybook version to 7.0.0-beta.51

Author: pettinarip

.gitignore

@@ -84,3 +84,6 @@ src/gatsby-types.d.ts
 
 # vscode workplace configuration
 .vscode
+
+# storybook static files
+storybook-static/

.storybook/babel-storybook-config.ts

@@ -0,0 +1,16 @@
+export const babelConfig = {
+  sourceType: "unambiguous",
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          chrome: 100,
+        },
+      },
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react",
+  ],
+  plugins: [],
+}

.storybook/main.js

@@ -1,5 +1,7 @@
 const { propNames } = require("@chakra-ui/react")
 
+const { babelConfig } = require("./babel-storybook-config")
+
 module.exports = {
   stories: [
     {
@@ -16,30 +18,43 @@ module.exports = {
     "@storybook/addon-a11y",
     "@chakra-ui/storybook-addon",
   ],
-  framework: "@storybook/react",
+  babel: async (options) => ({
+    ...babelConfig,
+  }),
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
   refs: {
     "@chakra-ui/react": {
       disable: true,
     },
   },
-  core: {
-    builder: "webpack5",
-  },
-  features: {
-    storyStoreV7: true,
-    emotionAlias: false,
-  },
+  features: {},
   webpackFinal: async (config) => {
-    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
-    config.module.rules[0].exclude = [
-      /node_modules\/(?!(gatsby|gatsby-script)\/)/,
-    ]
-    // Remove core-js to prevent issues with Storybook
-    config.module.rules[0].exclude = [/core-js/]
-    // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
-    config.module.rules[0].use[0].options.plugins.push(
-      require.resolve("babel-plugin-remove-graphql-queries")
-    )
+    const isRuleExist =
+      config.module && config.module.rules && config.module.rules.length
+    if (isRuleExist) {
+      // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
+      config.module.rules[0].exclude = [
+        /node_modules\/(?!(gatsby|gatsby-script)\/)/,
+      ]
+
+      // Remove core-js to prevent issues with Storybook
+      config.module.rules[0].exclude = [/core-js/]
+    }
+
+    if (
+      isRuleExist &&
+      config.module.rules[0].use &&
+      config.module.rules[0].use.length
+    ) {
+      // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
+      config.module.rules[0].use[0].options.plugins.push(
+        require.resolve("babel-plugin-remove-graphql-queries")
+      )
+    }
+
     config.resolve.mainFields = ["browser", "module", "main"]
     return config
   },
@@ -72,4 +87,7 @@ module.exports = {
       },
     },
   },
+  docs: {
+    autodocs: true,
+  },
 }

.storybook/preview.js

@@ -1,8 +1,8 @@
 import { action } from "@storybook/addon-actions"
+
 import theme from "../src/@chakra-ui/gatsby-plugin/theme"
-import { theme as DefaultChakraTheme } from "@chakra-ui/react"
 
-const chakraBreakpointArray = Object.entries(DefaultChakraTheme.breakpoints)
+const chakraBreakpointArray = Object.entries(theme.breakpoints)
 
 // Gatsby's Link overrides:
 // Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader.

package.json

@@ -76,17 +76,19 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@chakra-ui/storybook-addon": "^4.0.12",
     "@netlify/functions": "^1.2.0",
-    "@storybook/addon-a11y": "^6.5.13",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-a11y": "^7.0.0-beta.51",
+    "@storybook/addon-actions": "^7.0.0-beta.51",
+    "@storybook/addon-essentials": "^7.0.0-beta.51",
+    "@storybook/addon-interactions": "^7.0.0-beta.51",
+    "@storybook/addon-links": "^7.0.0-beta.51",
+    "@storybook/react": "^7.0.0-beta.51",
+    "@storybook/react-webpack5": "^7.0.0-beta.51",
+    "@storybook/testing-library": "^0.0.14-next.1",
     "@types/browser-lang": "^0.1.0",
     "@types/github-slugger": "^1.3.0",
     "@types/luxon": "^2.3.2",
@@ -105,6 +107,7 @@
     "minimist": "^1.2.6",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
+    "storybook": "^7.0.0-beta.51",
     "ts-node": "^10.9.1",
     "typescript": "^4.6.3"
   },
@@ -123,8 +126,8 @@
     "start:static": "gatsby build && gatsby serve",
     "serve": "gatsby serve",
     "type-check": "tsc --noEmit",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006 -c .storybook",
+    "build-storybook": "storybook build"
   },
   "husky": {
     "hooks": {

src/components/BannerNotification/BannerNotification.stories.tsx

@@ -1,37 +1,35 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import React from "react"
 import BannerNotification from "."
 
 export default {
   component: BannerNotification,
-} as ComponentMeta<typeof BannerNotification>
+} as Meta<typeof BannerNotification>
 
 /**
  * Story taken from PostMergeBanner component
  * and content from `../../content/developers/tutorials/hello-world-smart-contract-fullstack/index.md`
  */
-export const PostMergeBanner: ComponentStory<typeof BannerNotification> = (
-  args
-) => <BannerNotification {...args} />
-
-PostMergeBanner.args = {
-  shouldShow: true,
-  justify: "center",
-  textAlign: "center",
-  sx: {
-    "& p": {
-      maxWidth: "100ch",
-      m: 0,
-      p: 0,
-    },
-    "& a": {
-      textDecor: "underline",
+export const PostMergeBanner: StoryObj<typeof BannerNotification> = {
+  args: {
+    shouldShow: true,
+    justify: "center",
+    textAlign: "center",
+    sx: {
+      "& p": {
+        maxWidth: "100ch",
+        m: 0,
+        p: 0,
+      },
+      "& a": {
+        textDecor: "underline",
+      },
     },
+    children: (
+      <p>
+        This tutorial is out of date after the merge and may not work. Please
+        raise a PR if you would like to contribute.
+      </p>
+    ),
   },
-  children: (
-    <p>
-      This tutorial is out of date after the merge and may not work. Please
-      raise a PR if you would like to contribute.
-    </p>
-  ),
 }

src/components/Button/Button.stories.tsx

@@ -1,32 +1,33 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react"
-import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
 import Button from "."
 
 export default {
   component: Button,
-} as ComponentMeta<typeof Button>
+} as Meta<typeof Button>
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
-
-export const Solid = Template.bind({})
-Solid.args = {
-  children: "What is Ethereum?",
+export const Solid: StoryObj<typeof Button> = {
+  args: {
+    children: "What is Ethereum?",
+  },
 }
 
-export const Outline = Template.bind({})
-Outline.args = {
-  children: "More on digital money",
-  variant: "outline",
+export const Outline: StoryObj<typeof Button> = {
+  args: {
+    children: "More on digital money",
+    variant: "outline",
+  },
 }
 
-export const OutlineColor = Template.bind({})
-OutlineColor.args = {
-  children: "More on digital money",
-  variant: "outline-color",
+export const OutlineColor: StoryObj<typeof Button> = {
+  args: {
+    children: "More on digital money",
+    variant: "outline-color",
+  },
 }
 
-export const Disabled = Template.bind({})
-Disabled.args = {
-  children: "I am disabled",
-  disabled: true,
+export const Disabled: StoryObj<typeof Button> = {
+  args: {
+    children: "I am disabled",
+    disabled: true,
+  },
 }

src/components/Card/Card.stories.tsx

@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react"
-import { ComponentMeta, ComponentStory } from "@storybook/react"
+import { Meta, StoryFn } from "@storybook/react"
 import React from "react"
 import Card, { IProps } from "."
 import Button from "../Button"
@@ -15,15 +15,15 @@ export default {
       </Box>
     ),
   ],
-} as ComponentMeta<typeof Component>
+} as Meta<typeof Component>
 
 const defaultProps: IProps = {
   emoji: ":woman_student:",
   title: "Learn Ethereum development",
   description: "Read up on core concepts and the Ethereum stack with our docs",
 }
 
-export const Default: ComponentStory<typeof Component> = (args) => (
+export const Default: StoryFn<typeof Component> = (args) => (
   <Component {...defaultProps} {...args}>
     <Button>Read the docs</Button>
   </Component>

src/components/Slider/Slider.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react"
+import { Meta, StoryFn } from "@storybook/react"
 import React from "react"
 import Slider, { EmblaSlide } from "."
 
@@ -13,7 +13,7 @@ export default {
       handles: ["click"],
     },
   },
-} as ComponentMeta<typeof Component>
+} as Meta<typeof Component>
 
 const ComponentSlides = () => (
   <>
@@ -85,7 +85,7 @@ const ComponentSlides = () => (
   </>
 )
 
-export const Basic: ComponentStory<typeof Component> = (args) => (
+export const Basic: StoryFn<typeof Component> = (args) => (
   <Component {...args}>
     <ComponentSlides />
   </Component>