refactor(project): update project to use Storybook v8 (#4644)

* refactor(project): update project to use Storybook v8

* chore: run prettier format

* chore: fix tsc errors

* chore: run prettier format

* chore: remove -s option in build

* chore: add storybook/addons package

* chore: run lint fix

* chore: add React to preview

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

packages/react/.storybook/main.js

@@ -1,23 +1,23 @@
-'use strict'
+import {dirname, join} from 'path'
 
 const {DEPLOY_ENV = 'development'} = process.env
 
 /**
  * @type {import('@storybook/core-common').StorybookConfig}
  */
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     {
       name: '@storybook/addon-essentials',
       options: {
         backgrounds: false,
       },
     },
-    '@storybook/addon-storysource',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
-    '@storybook/addon-links',
+    getAbsolutePath('@storybook/addon-storysource'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-links'),
     {
       name: 'storybook-addon-turbo-build',
       options: {
@@ -35,14 +35,15 @@ module.exports = {
         },
       },
     },
+    '@storybook/addon-webpack5-compiler-babel',
   ],
   features: {
     interactionsDebugger: true,
-    storyStoreV7: true,
+    // storyStoreV7: true,
     buildStoriesJson: true,
   },
   framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath('@storybook/react-webpack5'),
     options: {
       fastRefresh: true,
       strictMode: true,
@@ -51,9 +52,7 @@ module.exports = {
       },
     },
   },
-  docs: {
-    autodocs: false,
-  },
+  docs: {},
   typescript: {
     reactDocgen: 'react-docgen',
   },
@@ -70,3 +69,7 @@ module.exports = {
     return `${body}\n<script src="https://analytics.githubassets.com/hydro-marketing.min.js"></script>`
   },
 }
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}

packages/react/.storybook/preview.js

@@ -1,5 +1,5 @@
 import {PrimerBreakpoints} from '../src/utils/layout'
-import {useEffect} from 'react'
+import React, {useEffect} from 'react'
 import {ThemeProvider, BaseStyles, theme} from '../src'
 import clsx from 'clsx'
 
@@ -20,7 +20,6 @@ Object.entries(PrimerBreakpoints).forEach(([viewport, value]) => {
 
 const preview = {
   parameters: {
-    actions: {argTypesRegex: '^on[A-Z].*'},
     html: {
       root: '#html-addon-root',
       removeEmptyComments: true,

packages/react/package.json

@@ -135,21 +135,22 @@
     "@rollup/plugin-terser": "0.4.3",
     "@rollup/plugin-typescript": "11.1.5",
     "@rollup/plugin-virtual": "3.0.2",
-    "@storybook/addon-a11y": "7.6.14",
-    "@storybook/addon-actions": "7.6.8",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/addon-interactions": "7.6.4",
-    "@storybook/addon-links": "7.6.2",
-    "@storybook/addon-storysource": "7.6.14",
+    "@storybook/addon-a11y": "^8.1.5",
+    "@storybook/addon-actions": "^8.1.5",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/addon-storysource": "^8.1.5",
     "@storybook/addon-styling": "1.3.7",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+    "@storybook/addons": "7.6.17",
     "@storybook/csf": "0.1.2",
-    "@storybook/jest": "0.2.3",
-    "@storybook/react": "7.6.17",
-    "@storybook/react-webpack5": "7.6.2",
-    "@storybook/source-loader": "7.6.10",
+    "@storybook/react": "^8.1.5",
+    "@storybook/react-webpack5": "^8.1.5",
+    "@storybook/source-loader": "^8.1.5",
+    "@storybook/test": "8.1.5",
     "@storybook/test-runner": "0.16.0",
-    "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.6.4",
+    "@storybook/theming": "^8.1.5",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.0.0",
@@ -210,7 +211,7 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-visualizer": "5.9.2",
     "semver": "7.6.2",
-    "storybook": "7.6.16",
+    "storybook": "^8.1.5",
     "storybook-addon-turbo-build": "2.0.1",
     "styled-components": "5.3.11",
     "terser": "5.31.0",

packages/react/src/ActionList/ActionList.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {Story, Meta} from '@storybook/react'
+import type {StoryFn, Meta} from '@storybook/react'
 import type {ActionListProps, ActionListGroupProps} from '.'
 import {ActionList} from '.'
 import {Item} from './Item'
@@ -23,7 +23,7 @@ export const Default = () => (
   </ActionList>
 )
 
-export const Playground: Story<ActionListProps> = args => (
+export const Playground: StoryFn<ActionListProps> = args => (
   <ActionList {...args}>
     <ActionList.Item>Copy link</ActionList.Item>
     <ActionList.Item>Quote reply</ActionList.Item>
@@ -255,7 +255,7 @@ LinkItemPlayground.argTypes = {
   },
 }
 
-export const GroupPlayground: Story<ActionListGroupProps> = args => (
+export const GroupPlayground: StoryFn<ActionListGroupProps> = args => (
   <ActionList>
     <ActionList.Group {...args}>
       <ActionList.Item>Item 1</ActionList.Item>

packages/react/src/Autocomplete/Autocomplete.stories.tsx

@@ -14,8 +14,7 @@ import {
   getFormControlArgsByChildComponent,
   getTextInputArgTypes,
 } from '../utils/story-helpers'
-import {within, userEvent} from '@storybook/testing-library'
-import {expect} from '@storybook/jest'
+import {within, userEvent, expect} from '@storybook/test'
 
 type AutocompleteOverlayArgs = ComponentProps<typeof Autocomplete.Overlay>
 type AutocompleteMenuArgs = ComponentProps<typeof Autocomplete.Menu>

packages/react/src/Avatar/Avatar.features.stories.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import type {ComponentMeta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 import Avatar from './Avatar'
 
 export default {
   title: 'Components/Avatar/Features',
   component: Avatar,
-} as ComponentMeta<typeof Avatar>
+} as Meta<typeof Avatar>
 
 export const Square = () => <Avatar square src="https://avatars.githubusercontent.com/primer" />
 

packages/react/src/Avatar/Avatar.stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import type {ComponentMeta, Story} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react'
 import type {AvatarProps} from './Avatar'
 import Avatar, {DEFAULT_AVATAR_SIZE} from './Avatar'
 import {parseSizeFromArgs} from './storyHelpers'
 
 export default {
   title: 'Components/Avatar',
   component: Avatar,
-} as ComponentMeta<typeof Avatar>
+} as Meta<typeof Avatar>
 
 type Args = {
   size?: number
@@ -18,7 +18,7 @@ type Args = {
 
 export const Default = () => <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" />
 
-export const Playground: Story<Args> = args => {
+export const Playground: StoryFn<Args> = args => {
   return (
     <Avatar
       size={parseSizeFromArgs(args)}

packages/react/src/AvatarPair/AvatarPair.features.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import type {ComponentMeta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 import AvatarPair from './AvatarPair'
 import Avatar from '../Avatar'
 
 export default {
   title: 'Components/AvatarPair/Features',
   component: AvatarPair,
-} as ComponentMeta<typeof AvatarPair>
+} as Meta<typeof AvatarPair>
 
 export const ParentCircle = () => (
   <AvatarPair>

packages/react/src/AvatarPair/AvatarPair.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import type {ComponentMeta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 import AvatarPair from './AvatarPair'
 import Avatar from '../Avatar'
 
 export default {
   title: 'Components/AvatarPair',
   component: AvatarPair,
-} as ComponentMeta<typeof AvatarPair>
+} as Meta<typeof AvatarPair>
 
 export const Default = () => (
   <AvatarPair>

packages/react/src/AvatarStack/AvatarStack.features.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import type {ComponentMeta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 import AvatarStack from './AvatarStack'
 import Avatar from '../Avatar'
 
 export default {
   title: 'Components/AvatarStack/Features',
   component: AvatarStack,
-} as ComponentMeta<typeof AvatarStack>
+} as Meta<typeof AvatarStack>
 
 export const AlignLeft = () => (
   <AvatarStack>

packages/react/src/AvatarStack/AvatarStack.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {ComponentMeta, Story} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react'
 import type {AvatarStackProps} from './AvatarStack'
 import AvatarStack from './AvatarStack'
 import Avatar from '../Avatar'
@@ -8,7 +8,7 @@ import {parseSizeFromArgs} from '../Avatar/storyHelpers'
 export default {
   title: 'Components/AvatarStack',
   component: AvatarStack,
-} as ComponentMeta<typeof AvatarStack>
+} as Meta<typeof AvatarStack>
 
 type Args = {
   size?: number
@@ -26,7 +26,7 @@ export const Default = () => (
   </AvatarStack>
 )
 
-export const Playground: Story<Args> = args => (
+export const Playground: StoryFn<Args> = args => (
   <AvatarStack size={parseSizeFromArgs(args)} alignRight={args.alignRight} disableExpand={args.disableExpand}>
     <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
     <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />

packages/react/src/Blankslate/Blankslate.stories.tsx

@@ -1,5 +1,5 @@
 import {BookIcon} from '@primer/octicons-react'
-import type {Meta, Story} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react'
 import React from 'react'
 import {Blankslate} from '../Blankslate'
 import type {ComponentProps} from '../utils/types'
@@ -31,7 +31,7 @@ export const Default = () => (
   </Blankslate>
 )
 
-export const Playground: Story<ComponentProps<typeof Blankslate>> = args => (
+export const Playground: StoryFn<ComponentProps<typeof Blankslate>> = args => (
   <Blankslate {...args}>
     <Blankslate.Visual>
       <BookIcon size="medium" />

packages/react/src/Box/Box.features.stories.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import type {ComponentMeta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 import Box from './Box'
 
 export default {
   title: 'Components/Box/Features',
   component: Box,
-} as ComponentMeta<typeof Box>
+} as Meta<typeof Box>
 
 export const Border = () => (
   <Box sx={{borderWidth: 1, borderStyle: 'solid', borderColor: 'border.default', p: 3}}>Box with border</Box>

packages/react/src/Box/Box.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {Meta, ComponentStory} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react'
 import Box from './Box'
 
 export default {
@@ -9,7 +9,7 @@ export default {
 
 export const Default = () => <Box>Default Box</Box>
 
-export const Playground: ComponentStory<typeof Box> = args => <Box {...args}>Playground</Box>
+export const Playground: StoryFn<typeof Box> = args => <Box {...args}>Playground</Box>
 
 Playground.args = {
   as: 'div',

packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import type {ComponentMeta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 import ButtonGroup from './ButtonGroup'
 import {IconButton} from '../Button'
 import {PlusIcon, DashIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Components/ButtonGroup/Features',
   component: ButtonGroup,
-} as ComponentMeta<typeof ButtonGroup>
+} as Meta<typeof ButtonGroup>
 
 export const IconButtons = () => (
   <ButtonGroup>

packages/react/src/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {Story, Meta} from '@storybook/react'
+import type {StoryFn, Meta} from '@storybook/react'
 import ButtonGroup from './ButtonGroup'
 import type {ButtonProps} from '../Button'
 import {Button} from '../Button'
@@ -24,7 +24,7 @@ export const Default = () => (
   </ButtonGroup>
 )
 
-export const Playground: Story<ButtonProps> = args => (
+export const Playground: StoryFn<ButtonProps> = args => (
   <ButtonGroup>
     <Button {...args}>Button 1</Button>
     <Button {...args}>Button 2</Button>

packages/react/src/CircleBadge/CircleBadge.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {Meta, ComponentStory} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react'
 import CircleBadge from './CircleBadge'
 import {ZapIcon} from '@primer/octicons-react'
 
@@ -14,7 +14,7 @@ export const Default = () => (
   </CircleBadge>
 )
 
-export const Playground: ComponentStory<typeof CircleBadge> = args => (
+export const Playground: StoryFn<typeof CircleBadge> = args => (
   <CircleBadge {...args}>
     <CircleBadge.Icon icon={ZapIcon} />
   </CircleBadge>

packages/react/src/CircleOcticon/CircleOcticon.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {Meta, ComponentStory} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react'
 import CircleOcticon from './CircleOcticon'
 import {CheckIcon} from '@primer/octicons-react'
 
@@ -12,7 +12,7 @@ export const Default = () => (
   <CircleOcticon icon={CheckIcon} size={32} sx={{backgroundColor: 'success.fg', color: 'fg.onEmphasis'}} />
 )
 
-export const Playground: ComponentStory<typeof CircleOcticon> = args => <CircleOcticon {...args} />
+export const Playground: StoryFn<typeof CircleOcticon> = args => <CircleOcticon {...args} />
 
 Playground.args = {
   icon: CheckIcon,

packages/react/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useCallback} from 'react'
-import type {ComponentMeta} from '@storybook/react'
+import type {Meta} from '@storybook/react'
 import {Box, useTheme} from '..'
 import {Button} from '../Button'
 import {ActionMenu} from '../ActionMenu'
@@ -9,7 +9,7 @@ import {ConfirmationDialog, useConfirm} from './ConfirmationDialog'
 export default {
   title: 'Components/ConfirmationDialog/Features',
   component: ConfirmationDialog,
-} as ComponentMeta<typeof ConfirmationDialog>
+} as Meta<typeof ConfirmationDialog>
 
 export const ShorthandHook = () => {
   const confirm = useConfirm()