refactor: update storybook to v9

package.json

@@ -75,7 +75,7 @@
     "eslint-plugin-react": "^7.35.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-ssr-friendly": "1.3.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.0.4",
     "eslint-plugin-testing-library": "^7.1.1",
     "globals": "^16.2.0",
     "jest": "29.7.0",

packages/react/.storybook/main.ts

@@ -14,18 +14,7 @@ const config: StorybookConfig = {
       ? ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)']
       : // Don't include dev stories in production
         ['../src/**/*.mdx', '../src/**/!(*.dev).stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        backgrounds: false,
-      },
-    },
-    getAbsolutePath('@storybook/addon-storysource'),
-    getAbsolutePath('@storybook/addon-interactions'),
-    getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('@storybook/addon-links'),
-  ],
+  addons: [getAbsolutePath('@storybook/addon-storysource'), getAbsolutePath('@storybook/addon-a11y')],
 
   framework: {
     name: '@storybook/react-vite',

packages/react/.storybook/manager.jsx

@@ -1,6 +1,5 @@
-import {addons, types} from '@storybook/manager-api'
-import {useGlobals} from '@storybook/manager-api'
-import {IconButton, WithTooltip, TooltipLinkList} from '@storybook/components'
+import {addons, types, useGlobals} from 'storybook/manager-api'
+import {IconButton, WithTooltip, TooltipLinkList} from 'storybook/internal/components'
 import {BeakerIcon} from '@primer/octicons-react'
 import React from 'react'
 import {Tool, TOOL_ID, ADDON_ID} from './src/accessibility-tool'

packages/react/.storybook/src/accessibility-tool.tsx

@@ -1,8 +1,9 @@
 import React, {useCallback} from 'react'
-// eslint-disable-next-line import/named
-import {useGlobals} from '@storybook/manager-api'
-// eslint-disable-next-line import/named
-import {IconButton, Icons} from '@storybook/components'
+
+import {useGlobals} from 'storybook/manager-api'
+
+import {IconButton} from 'storybook/internal/components'
+import {AccessibilityAltIcon} from '@storybook/icons'
 
 export const ADDON_ID = 'show-surrounding-links'
 export const TOOL_ID = `${ADDON_ID}/tool`
@@ -31,7 +32,7 @@ export const Tool = () => {
       // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
       aria-pressed={showSurroundingElements ?? window.localStorage.getItem('showSurroundingElements') === 'true'}
     >
-      <Icons icon="accessibilityalt" />
+      <AccessibilityAltIcon />
     </IconButton>
   )
 }

packages/react/package.json

@@ -129,17 +129,11 @@
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "12.1.2",
     "@rollup/plugin-virtual": "3.0.2",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-a11y": "^9.0.4",
     "@storybook/addon-storysource": "^8.6.14",
-    "@storybook/preview-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/source-loader": "^8.4.7",
-    "@storybook/theming": "^8.6.14",
+    "@storybook/csf": "^0.1.13",
+    "@storybook/icons": "^1.4.0",
+    "@storybook/react-vite": "^9.0.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.3.0",
@@ -200,7 +194,7 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-visualizer": "6.0.0",
     "semver": "7.7.1",
-    "storybook": "^8.6.14",
+    "storybook": "^9.0.4",
     "styled-components": "5.3.11",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",

packages/react/src/ActionBar/ActionBar.examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import ActionBar from '.'
 import Text from '../Text'
 import {

packages/react/src/ActionBar/ActionBar.stories.tsx

@@ -11,7 +11,7 @@ import {
   ListOrderedIcon,
   TasklistIcon,
 } from '@primer/octicons-react'
-import type {Meta, StoryObj} from '@storybook/react'
+import type {Meta, StoryObj} from '@storybook/react-vite'
 
 const meta: Meta<typeof ActionBar> = {
   title: 'Experimental/Components/ActionBar',

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
 import {Item} from './Item'
 import {LinkItem} from './LinkItem'

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

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import React, {forwardRef} from 'react'
 import {
   TypographyIcon,

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
 import {Item} from './Item'
 import {LinkItem} from './LinkItem'

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

@@ -1,4 +1,4 @@
-import type {StoryFn, Meta} from '@storybook/react'
+import type {StoryFn, Meta} from '@storybook/react-vite'
 import type {ActionListProps, ActionListGroupProps} from '.'
 import {ActionList} from '.'
 import {Item} from './Item'

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

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
 import {StressTest} from '../utils/StressTest'
 import {TableIcon} from '@primer/octicons-react'

packages/react/src/ActionMenu/ActionMenu.dev.stories.tsx

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
 import {ActionMenu} from './ActionMenu'
 import {ActionList} from '../ActionList'

packages/react/src/ActionMenu/ActionMenu.stories.tsx

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
 import {ActionMenu} from './ActionMenu'
 import {ActionList} from '../ActionList'

packages/react/src/AnchoredOverlay/AnchoredOverlay.dev.stories.tsx

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import React, {useState} from 'react'
 
 import {Button} from '../Button'

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

@@ -1,5 +1,5 @@
 import {useEffect, useRef, useState} from 'react'
-import type {Args, Meta} from '@storybook/react'
+import type {Args, Meta} from '@storybook/react-vite'
 import {FocusKeys} from '@primer/behaviors'
 
 import {Avatar, Box, Link, Text} from '..'

packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx

@@ -1,12 +1,12 @@
 import {useState} from 'react'
-import type {Args, Meta} from '@storybook/react'
+import type {Args, Meta} from '@storybook/react-vite'
 import {LocationIcon, RepoIcon} from '@primer/octicons-react'
 
 import {Avatar, Link, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button} from '../Button'
 import Octicon from '../Octicon'
-import {action} from '@storybook/addon-actions'
+import {action} from 'storybook/actions'
 import {Stack} from '../Stack/Stack'
 
 export default {

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

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 
 import Autocomplete from './Autocomplete'
 import FormControl from '../FormControl'

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

@@ -1,6 +1,6 @@
 import type {ChangeEventHandler, RefObject} from 'react'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 
 import {BaseStyles, Box, Stack, ThemeProvider, registerPortalRoot} from '..'
 import {Dialog} from '../DialogV1'

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

@@ -1,6 +1,6 @@
 import type React from 'react'
 import {useCallback, useState} from 'react'
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 
 import {BaseStyles, Box, ThemeProvider} from '..'
 
@@ -15,7 +15,6 @@ import {
   getFormControlArgsByChildComponent,
   getTextInputArgTypes,
 } from '../utils/story-helpers'
-import {within, userEvent, expect} from '@storybook/test'
 
 type AutocompleteOverlayArgs = ComponentProps<typeof Autocomplete.Overlay>
 type AutocompleteMenuArgs = ComponentProps<typeof Autocomplete.Menu>
@@ -291,14 +290,4 @@ export const Playground = (args: FormControlArgs<AutocompleteArgs>) => {
   )
 }
 
-Playground.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
-  const canvas = within(canvasElement)
-  const inputBox = canvas.getByTestId('autocompleteInput')
-  await userEvent.click(inputBox)
-  const firstAutoCompleteOption = canvas.getByText('css')
-  expect(firstAutoCompleteOption).toBeInTheDocument()
-  await userEvent.type(firstAutoCompleteOption, '{enter}')
-  expect(inputBox).toHaveValue('css')
-}
-
 export default autocompleteStoryMeta

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

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import Avatar from './Avatar'
 
 export default {

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

@@ -1,4 +1,4 @@
-import type {Meta, StoryFn} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react-vite'
 import type {AvatarProps} from './Avatar'
 import Avatar, {DEFAULT_AVATAR_SIZE} from './Avatar'
 import {parseSizeFromArgs} from './storyHelpers'

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

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import AvatarPair from './AvatarPair'
 import Avatar from '../Avatar'
 

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

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import AvatarPair from './AvatarPair'
 import Avatar from '../Avatar'
 

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

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import AvatarStack from './AvatarStack'
 import Avatar from '../Avatar'
 import Link from '../Link'

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

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import AvatarStack from './AvatarStack'
 import Avatar from '../Avatar'
 

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

@@ -1,4 +1,4 @@
-import type {Meta, StoryFn} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react-vite'
 import type {AvatarStackProps} from './AvatarStack'
 import AvatarStack from './AvatarStack'
 import Avatar from '../Avatar'

packages/react/src/Banner/Banner.examples.stories.tsx

@@ -1,7 +1,7 @@
 import {Banner} from '../Banner'
-import {action} from '@storybook/addon-actions'
+import {action} from 'storybook/actions'
 import Link from '../Link'
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import {AriaAlert, AriaStatus} from '../live-region'
 import FormControl from '../FormControl'
 import RadioGroup from '../RadioGroup'

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

@@ -1,6 +1,6 @@
 import {CopilotIcon, GitPullRequestIcon} from '@primer/octicons-react'
-import {action} from '@storybook/addon-actions'
-import type {Meta} from '@storybook/react'
+import {action} from 'storybook/actions'
+import type {Meta} from '@storybook/react-vite'
 import {Banner} from '../Banner'
 import Link from '../Link'
 

packages/react/src/Banner/Banner.stories.tsx

@@ -1,8 +1,8 @@
-import type {Meta, StoryObj} from '@storybook/react'
+import type {Meta, StoryObj} from '@storybook/react-vite'
 import Link from '../Link'
 import {Banner} from '../Banner'
 import {PageLayout} from '../PageLayout'
-import {action} from '@storybook/addon-actions'
+import {action} from 'storybook/actions'
 
 const meta = {
   title: 'Experimental/Components/Banner',

packages/react/src/BaseStyles.dev.stories.tsx

@@ -1,5 +1,5 @@
 import {BaseStyles} from '.'
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from './utils/types'
 
 export default {

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

@@ -1,5 +1,5 @@
 import {BookIcon} from '@primer/octicons-react'
-import type {Meta, StoryFn} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react-vite'
 import {Blankslate} from '../Blankslate'
 import type {ComponentProps} from '../utils/types'
 

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

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import Box from './Box'
 
 export default {

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

@@ -1,4 +1,4 @@
-import type {Meta, StoryFn} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react-vite'
 import Box from './Box'
 
 export default {

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

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import BranchName from './BranchName'
 import {Stack} from '../Stack'
 import Octicon from '../Octicon'

packages/react/src/BranchName/BranchName.stories.tsx

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import BranchName from './BranchName'
 
 export default {

packages/react/src/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
 import Breadcrumbs from './Breadcrumbs'
 

packages/react/src/Button/Button.examples.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import {Button} from '.'
 import {DownloadIcon} from '@primer/octicons-react'
 import {Banner} from '../experimental'

packages/react/src/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react'
-import type {Meta, StoryObj} from '@storybook/react'
+import type {Meta, StoryObj} from '@storybook/react-vite'
 import {Button} from '.'
 import {OcticonArgType} from '../utils/story-helpers'
 

packages/react/src/Button/Button.stress.dev.stories.tsx

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
 import {StressTest} from '../utils/StressTest'
 import {Button} from '.'

packages/react/src/Button/IconButton.stories.tsx

@@ -1,6 +1,6 @@
 import type {ComponentProps} from 'react'
 import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react'
-import type {Meta, StoryFn} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react-vite'
 import {IconButton} from '.'
 import {OcticonArgType} from '../utils/story-helpers'
 

packages/react/src/Button/LinkButton.stories.tsx

@@ -1,5 +1,5 @@
 import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon, ChevronRightIcon} from '@primer/octicons-react'
-import type {Meta, StoryFn} from '@storybook/react'
+import type {Meta, StoryFn} from '@storybook/react-vite'
 import {LinkButton} from '.'
 import {OcticonArgType} from '../utils/story-helpers'
 

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

@@ -1,4 +1,4 @@
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import ButtonGroup from './ButtonGroup'
 import {Button, IconButton, LinkButton} from '../Button'
 import {CopilotIcon} from '@primer/octicons-react'

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {Meta} from '@storybook/react'
+import type {Meta} from '@storybook/react-vite'
 import ButtonGroup from './ButtonGroup'
 import {IconButton, Button} from '../Button'
 import {PlusIcon, DashIcon, TriangleDownIcon} from '@primer/octicons-react'