chore(Storybook): Upgrade Storybook from 8.3.4 to 10.4.6

package.json

@@ -5,6 +5,11 @@
     "node": "^24.0.0"
   },
   "packageManager": "pnpm@9.1.1",
+  "pnpm": {
+    "overrides": {
+      "@swc/core": "^1.15.0"
+    }
+  },
   "devDependencies": {
     "@commitlint/cli": "^17.0.2",
     "@commitlint/config-conventional": "^17.0.2",

packages/react-component-library/.storybook/main.js

@@ -14,8 +14,6 @@ module.exports = {
       },
     },
     getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-a11y'),
     '@storybook/addon-webpack5-compiler-babel',
   ],
@@ -49,11 +47,13 @@ module.exports = {
   },
 
   stories: ['../src/**/*.stories.tsx', '../src/**/*.mdx'],
+
   staticDirs: [
     '../src/forms/images',
     '../src/tokens/images',
     '../src/intro/static',
   ],
+
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),
 
@@ -62,10 +62,6 @@ module.exports = {
     },
   },
 
-  docs: {
-    autodocs: true,
-  },
-
   typescript: {
     reactDocgen: 'react-docgen',
   },

packages/react-component-library/.storybook/manager.js

@@ -1,5 +1,5 @@
-import { addons } from '@storybook/manager-api'
-import { themes } from '@storybook/theming'
+import { addons } from 'storybook/manager-api'
+import { themes } from 'storybook/theming'
 
 addons.setConfig({
   theme: themes.light,

packages/react-component-library/.storybook/preview.js

@@ -1,4 +1,4 @@
-import { DocsPage } from '@storybook/addon-docs'
+import { DocsPage } from '@storybook/addon-docs/blocks'
 import isChromatic from 'chromatic'
 import React from 'react'
 import '@royalnavy/fonts'
@@ -75,3 +75,4 @@ const fontLoader = async () => ({
 })
 
 export const loaders = isChromatic() && document.fonts ? [fontLoader] : []
+export const tags = ['autodocs']

packages/react-component-library/package.json

@@ -50,7 +50,7 @@
     "test:e2e:install": "playwright install --with-deps",
     "test:e2e:show-report": "playwright show-report e2e-output/html",
     "test:e2e:trace": "playwright test --trace retain-on-failure",
-    "types": "tsc",
+    "types": "tsc -p tsconfig.build.json",
     "playwright:install": "playwright install --with-deps chromium",
     "ci:server:storybook": "http-server .static_storybook --port 6006 --silent",
     "ci:test:a11y": "concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'pnpm run ci:server:storybook' 'wait-on tcp:6006 && pnpm run test:a11y'"
@@ -82,19 +82,11 @@
     "@happy-dom/jest-environment": "^14.10.1",
     "@playwright/test": "^1.47.2",
     "@royalnavy/eslint-config-react": "^4.51.2",
-    "@storybook/addon-a11y": "^8.3.4",
-    "@storybook/addon-actions": "^8.3.4",
-    "@storybook/addon-essentials": "^8.3.4",
-    "@storybook/addon-interactions": "^8.3.4",
-    "@storybook/addon-links": "^8.3.4",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.3.4",
-    "@storybook/manager-api": "^8.3.4",
-    "@storybook/react": "^8.3.4",
-    "@storybook/react-webpack5": "^8.3.4",
-    "@storybook/test": "^8.3.4",
-    "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.3.4",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-links": "^10.4.6",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
+    "@storybook/react-webpack5": "^10.4.6",
+    "@storybook/test-runner": "^0.24.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
@@ -127,7 +119,7 @@
     "csstype": "^3.1.3",
     "eslint": "^8.2.0",
     "eslint-plugin-playwright": "^0.12.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^10.4.6",
     "formik": "^2.2.9",
     "hex-rgb": "^5.0.0",
     "html-webpack-plugin": "^5.2.0",
@@ -147,7 +139,7 @@
     "react-hook-form": "6.15.8",
     "react-hot-loader": "^4.12.19",
     "source-map-loader": "^4.0.1",
-    "storybook": "^8.3.4",
+    "storybook": "^10.4.6",
     "styled-components": "^6.1.8",
     "timezone-mock": "^1.1.3",
     "typescript": "^5.4.4",
@@ -157,7 +149,8 @@
     "webpack": "^5.94.0",
     "webpack-bundle-analyzer": "^4.2.0",
     "webpack-cli": "^5.0.1",
-    "webpack-merge": "^5.2.0"
+    "webpack-merge": "^5.2.0",
+    "@storybook/addon-docs": "^10.4.6"
   },
   "files": [
     "dist"
@@ -192,4 +185,4 @@
   "peerDependencies": {
     "styled-components": ">= 6"
   }
-}
+}

packages/react-component-library/src/components/Alert/Alert.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 
 import { Alert, ALERT_VARIANT } from './index'
 

packages/react-component-library/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -5,7 +5,7 @@ import {
   IconBrightnessAuto,
   IconRemove,
 } from '@royalnavy/icon-library'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 import styled from 'styled-components'
 
 import { Autocomplete, AutocompleteOption } from './index'

packages/react-component-library/src/components/Avatar/Avatar.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 
 import { Avatar, AVATAR_VARIANT } from '.'
 

packages/react-component-library/src/components/Badge/Badge.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { spacing } from '@royalnavy/design-tokens'
-import { Meta, StoryFn } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react-webpack5'
 
 import {
   Badge,

packages/react-component-library/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 
 import { Breadcrumbs, BreadcrumbsItem } from '.'
 import { Link } from '../Link'

packages/react-component-library/src/components/Button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { Meta, StoryFn } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react-webpack5'
 
 import { IconWifi, IconWeb, IconAnchor } from '@royalnavy/icon-library'
 import { spacing } from '@royalnavy/design-tokens'

packages/react-component-library/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
+import { action } from 'storybook/actions'
 import { IconBrightnessLow } from '@royalnavy/icon-library'
 
 import { ButtonGroup, ButtonGroupItem } from '.'

packages/react-component-library/src/components/CardFrame/CardFrame.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 
 import { CardFrame } from './index'
 

packages/react-component-library/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 import { color } from '@royalnavy/design-tokens'
 
 import { Checkbox, IndeterminateCheckbox, CheckboxProps } from '.'

packages/react-component-library/src/components/ClassificationBar/ClassificationBar.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 
 import { ClassificationBar } from './ClassificationBar'
 import { storyAccessibilityConfig } from '../../a11y/storyAccessibilityConfig'

packages/react-component-library/src/components/ContextMenu/ContextMenu.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 import { color } from '@royalnavy/design-tokens'
 import styled from 'styled-components'
 

packages/react-component-library/src/components/DataGrid/DataGrid.stories.tsx

@@ -2,8 +2,8 @@ import { faker } from '@faker-js/faker'
 import React, { useCallback, useState } from 'react'
 import styled, { css } from 'styled-components'
 import { spacing } from '@royalnavy/design-tokens'
-import { fn } from '@storybook/test'
-import { Meta, StoryFn } from '@storybook/react'
+import { fn } from 'storybook/test'
+import { Meta, StoryFn } from '@storybook/react-webpack5'
 import type {
   ColumnDef,
   SortingState,

packages/react-component-library/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,11 +1,5 @@
-import { Meta, StoryFn } from '@storybook/react'
-import {
-  addDays,
-  endOfMonth,
-  parseISO,
-  startOfMonth,
-  subDays,
-} from 'date-fns'
+import { Meta, StoryFn } from '@storybook/react-webpack5'
+import { addDays, endOfMonth, parseISO, startOfMonth, subDays } from 'date-fns'
 import React from 'react'
 import styled from 'styled-components'
 

packages/react-component-library/src/components/DescriptionList/DescriptionList.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 
 import { storyAccessibilityConfig } from '../../a11y/storyAccessibilityConfig'
 import { DescriptionList, DescriptionListItem } from './index'

packages/react-component-library/src/components/Dialog/Dialog.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react-webpack5'
 import { color, spacing } from '@royalnavy/design-tokens'
 import styled from 'styled-components'
 

packages/react-component-library/src/components/DismissibleBanner/DismissibleBanner.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn as Story } from '@storybook/react'
+import { Meta, StoryFn as Story } from '@storybook/react-webpack5'
 
 import { DismissibleBanner, DismissibleBannerWithTitleProps } from '.'
 

packages/react-component-library/src/components/Drawer/Drawer.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { Meta, StoryFn } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react-webpack5'
 import { color } from '@royalnavy/design-tokens'
 
 import { Drawer } from '.'

packages/react-component-library/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
+import { action } from 'storybook/actions'
 import { IconLayers, IconAnchor } from '@royalnavy/icon-library'
 import styled from 'styled-components'
 

packages/react-component-library/src/components/Field/Field.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 
 import { Field } from './index'
 import { TextInput } from '../TextInput'

packages/react-component-library/src/components/Fieldset/Fieldset.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 
 import { Fieldset } from './index'
 import { Field } from '../Field'

packages/react-component-library/src/components/Group/Group.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react-webpack5'
 
 import { Group } from '.'
 import { Button } from '../Button'

packages/react-component-library/src/components/List/List.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
+import { action } from 'storybook/actions'
 
 import { List, ListItem } from '.'
 

packages/react-component-library/src/components/Modal/Modal.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect } from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
+import { fn } from 'storybook/test'
 import styled from 'styled-components'
 import { spacing } from '@royalnavy/design-tokens'
 import noop from 'lodash/noop'
@@ -21,12 +22,15 @@ export default {
   component: Modal,
   title: 'Components/Modal',
   parameters: {
-    actions: { argTypesRegex: '^on.*' },
     layout: 'fullscreen',
     jsx: {
       showFunctions: true,
     },
   },
+  args: {
+    onOpen: fn(),
+    onClose: fn(),
+  },
 } as Meta<typeof Modal>
 
 const primaryButton: ButtonProps = {

packages/react-component-library/src/components/NumberInput/NumberInput.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react-webpack5'
 import {
   IconAnchor,
   IconBrightnessHigh,

packages/react-component-library/src/components/Pagination/Pagination.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 
 import { Pagination } from '.'
 

packages/react-component-library/src/components/Panel/Panel.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { color, spacing } from '@royalnavy/design-tokens'
-import { Meta, StoryFn } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react-webpack5'
 
 import { Panel } from './index'
 

packages/react-component-library/src/components/PhaseBanner/PhaseBanner.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 import styled from 'styled-components'
 
 import { PhaseBanner } from '.'

packages/react-component-library/src/components/Popover/Popover.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 import styled from 'styled-components'
 
 import { FLOATING_BOX_SCHEME } from '../../primitives/FloatingBox'

packages/react-component-library/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta, StoryFn } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react-webpack5'
 
 import { ProgressBar } from '.'
 

packages/react-component-library/src/components/ProgressIndicator/ProgressIndicator.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 
 import { StyledProgressIndicator } from './partials/StyledProgressIndicator'
 import { ProgressIndicator } from './index'

packages/react-component-library/src/components/Radio/Radio.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StoryFn, Meta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react-webpack5'
 
 import { color } from '@royalnavy/design-tokens'
 import { Radio, RadioProps } from '.'