Bump @storybook/react to ^7.4.2 (#1656)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue
<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

Fixes #1255 

## Summary
<!-- Please brief explanation of the changes made -->

- 스토리북 메이저 버전을 7로 올리고 브레이킹 체인지에 대응합니다.

## Details
<!-- Please elaborate description of the changes -->

버전 업에 따른 변경 사항은 다음과 같습니다.
- `main` 파일 마이그레이션 (codemod 사용), ts 마이그레이션하여 스토리북에서 제공하는 타입 활용
([#](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#esm-format-in-mainjs)).
`preview` 파일도 themeProvider 분리하고 ts 마이그레이션
- `getTitle` 유틸을 활용해서 `component/.../lastFolderName`형식으로 타이틀 얻어오던 것을 제거.
스토리북 7버전 부터는 동적으로 타이틀을 계산하는 것을 허용하지 않고 있고, 명시적으로 지정하지 않으면 알아서 경로를 잘 보여주게
됩니다.
([#](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#titles-are-statically-computed))
  - CSF2 -> CSF3으로 변경 (codemod 사용)
- `control` 의 `option` 필드가 `control` 아래에 있었던 것을 하나 올려서 같은 depth 가 되도록 변경
([#](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions))
  - default export 되는 meta 의 타입 단언을 타입 선언으로 변경
  - 이제 docs 가 스토리마다 있는 것이 아니라 컴포넌트 단위로 존재하게 됩니다.

이후 pr 에서 아래 이슈들을 차례대로 다루면 될 것 같습니다.

#1083
#1000

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

- No

## References
<!-- Please list any other resources or points the reviewer should be
aware of -->

- https://storybook.js.org/docs/7.0/react/migration-guide#page-top
-
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#migration

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: '',
 }