Bump @storybook/react to ^7.4.2

packages/bezier-react/.storybook/preview.js → packages/bezier-react/.storybook/WithFoundationProvider.jsx

@@ -17,35 +17,6 @@ const FoundationKeyword = {
   Dark: 'dark',
 }
 
-export const parameters = {
-  layout: 'centered',
-  backgrounds: {
-    default: 'light',
-    values: [
-      {
-        name: 'light',
-        value: 'white',
-      },
-      {
-        name: 'dark',
-        value: '#2f3233',
-      },
-    ],
-  }
-}
-
-export const globalTypes = {
-  Foundation: {
-    name: 'Foundation',
-    description: 'Global Foundation for components',
-    defaultValue: 'light',
-    toolbar: {
-      icon: 'circlehollow',
-      items: [FoundationKeyword.Light, FoundationKeyword.Dark],
-    },
-  },
-};
-
 function getFoundation(keyword) {
   const isDarkFoundation = keyword === FoundationKeyword.Dark
   return {
@@ -87,7 +58,7 @@ const innerWrapperStyle = {
   borderRadius: 20,
 }
 
-function withFoundationProvider(Story, context) {
+export function WithFoundationProvider(Story, context) {
   const {
     isDarkFoundation,
     foundation,
@@ -143,5 +114,3 @@ function withFoundationProvider(Story, context) {
     </FeatureProvider>
   )
 }
-
-export const decorators = [withFoundationProvider]

packages/bezier-react/.storybook/main.ts

@@ -0,0 +1,80 @@
+import { dirname, join } from "path"
+
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
+import { type StorybookConfig } from '@storybook/react-webpack5'
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")))
+}
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.stories.(tsx|mdx)',
+  ],
+
+  addons: [
+    getAbsolutePath("@storybook/addon-controls"),
+    getAbsolutePath("@storybook/addon-actions"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-toolbars"),
+    getAbsolutePath("@storybook/addon-docs"),
+    getAbsolutePath("@storybook/addon-backgrounds"),
+  ],
+
+  typescript: {
+    /**
+     * @note
+     *
+     * `react-docgen-typescript-plugin` introduces significant overhead
+     * when HMR is enabled, so we enable it only in production.
+     */
+    reactDocgen: process.env.NODE_ENV === 'production' && 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldRemoveUndefinedFromOptional: true,
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+
+  webpackFinal: async (config) => {
+    config.resolve = {
+      ...config.resolve,
+      // Apply tsconfig alias path
+      plugins: [
+      ...(config?.resolve?.plugins ?? []),
+      new TsconfigPathsPlugin({}),
+      ],
+      extensions: [
+        ...(config.resolve?.extensions ?? []),
+        '.ts',
+        '.tsx',
+      ]
+    }
+
+    config.module = {
+      ...config.module,
+      rules: [
+        ...(config.module?.rules ?? []), {
+        test: /\.(ts|tsx)$/,
+        loader: require.resolve('babel-loader'),
+        options: {
+          presets: [['react-app', { flow: false, typescript: true }]],
+          }
+        }
+      ]
+    }
+
+    return config
+  },
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
+  }
+}
+
+export default config

packages/bezier-react/.storybook/preview.ts

@@ -0,0 +1,9 @@
+import type { Preview } from "@storybook/react"
+
+import { WithFoundationProvider } from './WithFoundationProvider'
+
+const preview: Preview = {
+  decorators: [WithFoundationProvider],
+}
+
+export default preview

packages/bezier-react/package.json

@@ -40,8 +40,8 @@
     "clean:build": "rm -rf dist",
     "clean:cache": "rm -rf node_modules .turbo .eslintcache .stylelintcache tsconfig.tsbuildinfo coverage .jestcache",
     "prebuild": "yarn clean:build",
-    "storybook": "start-storybook -p 4101",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 4101",
+    "build-storybook": "storybook build",
     "chromatic": "chromatic --project-token=06157a6fbe6f"
   },
   "keywords": [
@@ -70,15 +70,14 @@
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-typescript": "^11.1.3",
     "@rollup/plugin-url": "^8.0.1",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-backgrounds": "^6.5.16",
-    "@storybook/addon-controls": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-toolbars": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@storybook/addon-a11y": "^7.4.2",
+    "@storybook/addon-actions": "^7.4.2",
+    "@storybook/addon-backgrounds": "^7.4.2",
+    "@storybook/addon-controls": "^7.4.2",
+    "@storybook/addon-docs": "^7.4.2",
+    "@storybook/addon-toolbars": "^7.4.2",
+    "@storybook/react": "^7.4.2",
+    "@storybook/react-webpack5": "^7.4.2",
     "@storybook/storybook-deployer": "^2.8.16",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
@@ -103,6 +102,7 @@
     "rollup": "^3.29.1",
     "rollup-plugin-node-externals": "^6.1.1",
     "rollup-plugin-visualizer": "^5.9.2",
+    "storybook": "^7.4.2",
     "styled-components": "^5.3.11",
     "ts-prune": "^0.10.3",
     "tsconfig": "workspace:*",

packages/bezier-react/src/components/AlphaCenter/AlphaCenter.stories.tsx

@@ -2,36 +2,35 @@ import React from 'react'
 
 import {
   type Meta,
-  type Story,
+  type StoryFn,
 } from '@storybook/react'
-import base from 'paths.macro'
-
-import { getTitle } from '~/src/utils/storyUtils'
 
 import { Text } from '~/src/components/Text'
 
 import { AlphaCenter } from './AlphaCenter'
 import { type AlphaCenterProps } from './AlphaCenter.types'
 
-export default {
-  title: getTitle(base),
+const meta: Meta<typeof AlphaCenter> = {
   component: AlphaCenter,
-} as Meta<AlphaCenterProps>
+}
+export default meta
 
-const Template: Story<AlphaCenterProps> = ({ children, ...rest }) => (
+const Template: StoryFn<AlphaCenterProps> = ({ children, ...rest }) => (
   <AlphaCenter {...rest}>
     <Text color="txt-black-darkest">
       { children }
     </Text>
   </AlphaCenter>
 )
 
-export const Primary = Template.bind({})
+export const Primary = {
+  render: Template,
 
-Primary.args = {
-  style: {
-    width: '200px',
-    height: '200px',
+  args: {
+    style: {
+      width: '200px',
+      height: '200px',
+    },
+    children: 'Centered content',
   },
-  children: 'Centered content',
 }

packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.stories.tsx

@@ -2,21 +2,21 @@ import React from 'react'
 
 import {
   type Meta,
-  type Story,
+  type StoryFn,
 } from '@storybook/react'
-import { base } from 'paths.macro'
-
-import { getTitle } from '~/src/utils/storyUtils'
 
 import { AlphaSmoothCornersBox } from './AlphaSmoothCornersBox'
 import { type AlphaSmoothCornersBoxProps } from './AlphaSmoothCornersBox.types'
 
-export default {
-  title: getTitle(base),
+const meta:Meta = {
   component: AlphaSmoothCornersBox,
-} as Meta
+}
+export default meta
 
-const Template: Story<AlphaSmoothCornersBoxProps> = ({ children, ...otherCheckboxProps }) => (
+const Template: StoryFn<AlphaSmoothCornersBoxProps> = ({
+  children,
+  ...otherCheckboxProps
+}) => (
   <AlphaSmoothCornersBox
     style={{ width: 200, height: 200 }}
     {...otherCheckboxProps}
@@ -25,18 +25,21 @@ const Template: Story<AlphaSmoothCornersBoxProps> = ({ children, ...otherCheckbo
   </AlphaSmoothCornersBox>
 )
 
-export const Primary = Template.bind({})
-Primary.args = {
-  disabled: false,
-  borderRadius: '42%',
-  shadow: {
-    offsetX: 0,
-    offsetY: 0,
-    blurRadius: 10,
-    spreadRadius: 10,
-    color: 'bg-black-dark',
+export const Primary = {
+  render: Template,
+
+  args: {
+    disabled: false,
+    borderRadius: '42%',
+    shadow: {
+      offsetX: 0,
+      offsetY: 0,
+      blurRadius: 10,
+      spreadRadius: 10,
+      color: 'bg-black-dark',
+    },
+    margin: 0,
+    backgroundColor: 'bgtxt-absolute-white-normal',
+    backgroundImage: '',
   },
-  margin: 0,
-  backgroundColor: 'bgtxt-absolute-white-normal',
-  backgroundImage: '',
 }