Upgrade to Storybook 8 (#2309)

<!--
  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 #2080 

## Summary

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

- Storybook 버전을 8로 올리고 breaking change에 대응합니다. 

## Details

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

- deprecated 된 옵션과 add-on 을 최신화했습니다. 자세한 내용은 커밋에 있는 링크를 참조해주시면 됩니다. 
- storybook 7.6 버전에서 발생했던
이슈(https://github.com/channel-io/bezier-react/pull/1997#issuecomment-1964040154)가
더이상 발생하지 않는 것을 확인했습니다.
- .syncpackrc에 있는 storybook 관련 설정들을 제거합니다. 
- 8버전에서 제공하는 visual test 는 개발환경에서만 지원한다고 합니다. 개발환경에서 테스트는 좀 해봤는데 빌드하면서
원인을 파악하기 어려운 에러가 떠서 끝가지 동작을 확인할 수는 없었습니다. visual test는 CI에서 확인 가능해서
개발환경에서 지원하는 것의 우선순위는 낮춰도 되지 않을까 하는 생각입니다. -> chromatic 에 문의중 -> 답변 온대로
@mdx-js/loader를 설치해도 안되서 이슈를 확인해봤더니
chromaui/addon-visual-tests#275 chromatic 자체
이슈인 것같습니다. 당분간은 개발 환경에서 visual test 기능은 활용할 수 없을 것 같습니다.
- 머지되면 #2308 는 클로즈하면
될것같습니다

### 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://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-7x-to-800

.syncpackrc

@@ -12,18 +12,6 @@
       "packages": ["@channel.io/*"],
       "dependencies": ["react-textarea-autosize"],
       "pinVersion": "8.3.4"
-    },
-    {
-      "label": "Ignore storybook related packages that have different version than other storybook packages",
-      "packages": ["@channel.io/*"],
-      "dependencies": ["@storybook/addon-styling"],
-      "isIgnored": true
-    },
-    {
-      "label": "Pin storybook version due to react-docgen dependency issue affecting build (#1997)",
-      "packages": ["@channel.io/*"],
-      "dependencies": ["storybook", "@storybook/*"],
-      "pinVersion": "7.5.3"
     }
   ],
   "lintFormatting": false

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

@@ -1,30 +1,38 @@
-import { dirname, join } from 'path'
-
 import { type StorybookConfig } from '@storybook/react-webpack5'
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
 
-function getAbsolutePath(value: string) {
-  return dirname(require.resolve(join(value, 'package.json')))
-}
-
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx'],
 
   addons: [
-    getAbsolutePath('@storybook/addon-controls'),
-    getAbsolutePath('@storybook/addon-actions'),
-    getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('@storybook/addon-docs'),
-    getAbsolutePath('@storybook/addon-measure'),
-    getAbsolutePath('@storybook/addon-outline'),
+    '@storybook/addon-controls',
+    '@storybook/addon-actions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    '@storybook/addon-measure',
+    '@storybook/addon-outline',
     {
-      name: '@storybook/addon-styling',
+      name: '@storybook/addon-styling-webpack',
       options: {
-        sass: {
-          implementation: require('sass'),
-        },
+        rules: [
+          {
+            test: /\.scss$/,
+            use: [
+              'style-loader',
+              'css-loader',
+              {
+                loader: 'sass-loader',
+                options: {
+                  implementation: require.resolve('sass'),
+                },
+              },
+            ],
+          },
+        ],
       },
     },
+    '@storybook/addon-webpack5-compiler-babel',
+    '@chromatic-com/storybook',
   ],
 
   typescript: {
@@ -75,7 +83,5 @@ export default {
     options: {},
   },
 
-  docs: {
-    autodocs: true,
-  },
+  docs: {},
 } as StorybookConfig

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

@@ -33,6 +33,7 @@ const preview: Preview = {
       },
     },
   },
+
   decorators: [
     (Story) => (
       <AppProvider
@@ -53,6 +54,8 @@ const preview: Preview = {
       </AppProvider>
     ),
   ],
+
+  tags: ['autodocs']
 }
 
 export default preview

packages/bezier-react/package.json

@@ -64,22 +64,24 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@channel.io/bezier-icons": "0.28.0",
+    "@chromatic-com/storybook": "^1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "7.5.3",
-    "@storybook/addon-actions": "7.5.3",
-    "@storybook/addon-controls": "7.5.3",
-    "@storybook/addon-docs": "7.5.3",
-    "@storybook/addon-measure": "7.5.3",
-    "@storybook/addon-outline": "7.5.3",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/manager-api": "7.5.3",
-    "@storybook/react": "7.5.3",
-    "@storybook/react-webpack5": "7.5.3",
-    "@storybook/theming": "7.5.3",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-controls": "^8.1.10",
+    "@storybook/addon-docs": "^8.1.10",
+    "@storybook/addon-measure": "^8.1.10",
+    "@storybook/addon-outline": "^8.1.10",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/manager-api": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@storybook/theming": "^8.1.10",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
@@ -108,7 +110,8 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.71.1",
-    "storybook": "7.5.3",
+    "sass-loader": "^14.2.1",
+    "storybook": "^8.1.10",
     "ts-patch": "^3.1.2",
     "ts-prune": "^0.10.3",
     "tsconfig": "workspace:*",

packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.types.ts

@@ -4,10 +4,7 @@ import type {
   SizeProps,
 } from '~/src/types/props'
 
-import {
-  type AlphaAvatarProps,
-  type AlphaAvatarSize,
-} from '~/src/components/AlphaAvatar'
+import { type AlphaAvatarSize } from '~/src/components/AlphaAvatar'
 
 type AvatarGroupEllipsisType = 'icon' | 'count'
 

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

@@ -46,6 +46,7 @@ function DialogComposition() {
 
 const meta: Meta<typeof DialogComposition> = {
   component: DialogComposition,
+  tags: ['!autodocs'],
 }
 
 export const Primary: StoryObj = {}

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

@@ -29,6 +29,7 @@ function TooltipComposition() {
 
 const meta: Meta<typeof TooltipComposition> = {
   component: TooltipComposition,
+  tags: ['!autodocs'],
 }
 
 export const Primary: StoryObj = {}

packages/bezier-react/src/components/Banner/Banner.mdx

@@ -1,64 +1,50 @@
-import { ArgsTable, Canvas, Story } from '@storybook/addon-docs'
-import { Banner, BannerVariant } from '~/src/components/Banner'
 import { StackItem, VStack } from '~/src/components/Stack'
+import * as BannerStories from './Banner.stories'
+import { ArgTypes, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+<Meta of={BannerStories} />
 
 # Banner
 
 ## Overview
 
 안내, 경고, 추천 등의 다양한 정보를 잘 전달하고 싶을 때 사용합니다.
 
-<Canvas>
-  <Story id="components-banner--overview" />
-</Canvas>
+<Canvas of={BannerStories.Overview} />
 
 ## Usage
 
 - 최소 너비는 200px입니다.
 
-<Canvas>
-  <Story id="components-banner--usage-min-width" />
-</Canvas>
+<Canvas of={BannerStories.UsageMinWidth} />
 
 - Parent의 너비를 가득 채웁니다.
 
-<Canvas>
-  <Story id="components-banner--usage-full-width" />
-</Canvas>
+<Canvas of={BannerStories.UsageFullWidth} />
 
 - 최대 너비는 없으나, Banner의 텍스트 영역은 좌측 상단에 위치합니다.
 
-<Canvas>
-  <Story id="components-banner--usage-max-width" />
-</Canvas>
+<Canvas of={BannerStories.UsageMaxWidth} />
 
 - 연속으로 보여줘야 하는 경우, Banner 간의 간격은 6px 입니다.
 
-<Canvas>
-  <Story id="components-banner--usage-consecutive" />
-</Canvas>
+<Canvas of={BannerStories.UsageConsecutive} />
 
 - 아이콘을 제거하여 사용할 수 있습니다.
 
-<Canvas>
-  <Story id="components-banner--usage-no-icon" />
-</Canvas>
+<Canvas of={BannerStories.UsageNoIcon} />
 
 ### Link
 
 - 링크가 필요한 경우, 마지막에 bold, underlined text로 들어가게 됩니다.
 - `hasLink={true}` prop을 통해 링크를 enable하고, `linkText` prop으로 링크의 텍스트를 설정할 수 있습니다.
 
-<Canvas>
-  <Story id="components-banner--usage-link" />
-</Canvas>
+<Canvas of={BannerStories.UsageLink} />
 
 - `linkTo` prop을 활용하면, 링크를 클릭했을 때 이동할 location을 지정할 수 있습니다.
 - 기본적으로, 링크를 클릭하면 새 탭으로 해당 location이 열리게 됩니다. (`<a>` 태그, `target="_blank"`, `rel="noopener noreferrer"` 를 기본으로 합니다.)
 
-<Canvas>
-  <Story id="components-banner--usage-link-to" />
-</Canvas>
+<Canvas of={BannerStories.UsageLinkTo} />
 
 - Default로 제공되는 링크 메커니즘을 이용할 수 없는 경우가 있습니다. (대표적인 usecase는, SPA에서 `react-router`와 같은 라이브러리가 제공하는 링크 컴포넌를 활용하는 경우입니다.) 이 경우, `renderLink` prop을 지정하여 링크를 어떤 컴포넌트로 렌더링할지 결정할 수 있습니다.
 
@@ -69,13 +55,13 @@ const renderLink = ({ content, linkTo }) => <Link to={linkTo}>{ content }</Link>
 
 <Banner
   ...
-  renderLink={renerLink}
+  renderLink={renderLink}
 />
 ```
 
 ## API
 
-<ArgsTable of={Banner} />
+<ArgTypes of={BannerStories} />
 
 ## Version
 

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

@@ -45,6 +45,7 @@ const meta: Meta<typeof Banner> = {
       },
     },
   },
+  tags: ['!autodocs'],
 }
 export default meta