Upgrade to Storybook 8

.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