From e7e7c32b50b13844c16417c3359b7fa242244ba0 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 19 Dec 2025 06:52:41 +0000 Subject: [PATCH 1/2] [renovate] Update dependency storybook to v9.1.17 [SECURITY] --- package.json | 2 +- yarn.lock | 39 ++++++++++++++++++++++++++++++++++----- 2 files changed, 35 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 6aefa71a..43f1ece7 100644 --- a/package.json +++ b/package.json @@ -116,7 +116,7 @@ "rollup": "4.53.3", "rollup-plugin-license": "3.6.0", "sonarqube-scanner": "4.3.2", - "storybook": "9.0.18", + "storybook": "9.1.17", "style-dictionary": "5.1.1", "subset-font": "2.4.0", "typescript": "5.9.3", diff --git a/yarn.lock b/yarn.lock index ab756072..9513c93b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4549,7 +4549,7 @@ __metadata: rollup-plugin-license: "npm:3.6.0" sonarqube-scanner: "npm:4.3.2" sonner: "npm:2.0.7" - storybook: "npm:9.0.18" + storybook: "npm:9.1.17" style-dictionary: "npm:5.1.1" subset-font: "npm:2.4.0" typescript: "npm:5.9.3" @@ -5577,6 +5577,25 @@ __metadata: languageName: node linkType: hard +"@vitest/mocker@npm:3.2.4": + version: 3.2.4 + resolution: "@vitest/mocker@npm:3.2.4" + dependencies: + "@vitest/spy": "npm:3.2.4" + estree-walker: "npm:^3.0.3" + magic-string: "npm:^0.30.17" + peerDependencies: + msw: ^2.4.9 + vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0 + peerDependenciesMeta: + msw: + optional: true + vite: + optional: true + checksum: 10/5e92431b6ed9fc1679060e4caef3e4623f4750542a5d7cd944774f8217c4d231e273202e8aea00bab33260a5a9222ecb7005d80da0348c3c829bd37d123071a8 + languageName: node + linkType: hard + "@vitest/pretty-format@npm:3.2.4": version: 3.2.4 resolution: "@vitest/pretty-format@npm:3.2.4" @@ -7837,6 +7856,15 @@ __metadata: languageName: node linkType: hard +"estree-walker@npm:^3.0.3": + version: 3.0.3 + resolution: "estree-walker@npm:3.0.3" + dependencies: + "@types/estree": "npm:^1.0.0" + checksum: 10/a65728d5727b71de172c5df323385755a16c0fdab8234dc756c3854cfee343261ddfbb72a809a5660fac8c75d960bb3e21aa898c2d7e9b19bb298482ca58a3af + languageName: node + linkType: hard + "esutils@npm:^2.0.2": version: 2.0.3 resolution: "esutils@npm:2.0.3" @@ -12473,14 +12501,15 @@ __metadata: languageName: node linkType: hard -"storybook@npm:9.0.18": - version: 9.0.18 - resolution: "storybook@npm:9.0.18" +"storybook@npm:9.1.17": + version: 9.1.17 + resolution: "storybook@npm:9.1.17" dependencies: "@storybook/global": "npm:^5.0.0" "@testing-library/jest-dom": "npm:^6.6.3" "@testing-library/user-event": "npm:^14.6.1" "@vitest/expect": "npm:3.2.4" + "@vitest/mocker": "npm:3.2.4" "@vitest/spy": "npm:3.2.4" better-opn: "npm:^3.0.2" esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0" @@ -12495,7 +12524,7 @@ __metadata: optional: true bin: storybook: ./bin/index.cjs - checksum: 10/c22a95ae807d39e4f861cea479d4ecc6f51ce873a78a7297f9f42844820b63e281f5c6834898bc7736e25c3342785cecd45a704579f4e6977b29c6235ebe1482 + checksum: 10/fa7d56a7cf0c6849c8130f5b7b3fcbd6615216fce94dc4ff363a5622f7091f74dac7fe3e983cecc90b3cee922f8ca30b9997b5bb936c644971cb8d20262bc038 languageName: node linkType: hard From 526cb99da84021eec1757664881c912c59f10601 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Aubert?= Date: Fri, 19 Dec 2025 11:25:48 +0100 Subject: [PATCH 2/2] Update storybook to v10 --- .storybook/main.ts | 16 +- .storybook/preview.tsx | 9 +- netlify.toml | 2 +- package.json | 12 +- src/components/buttons/ButtonAsLink.tsx | 2 +- .../checkbox-group/CheckboxGroup.tsx | 7 + src/components/layout/banner/BannerTypes.tsx | 3 +- src/components/legacy-banner/BannerTypes.tsx | 3 +- src/components/spotlight/Spotlight.tsx | 2 +- .../typography/__tests__/Heading-test.tsx | 4 +- stories/Button-stories.tsx | 4 +- stories/ButtonIcon-stories.tsx | 4 +- stories/Toast-stories.tsx | 2 +- stories/layout/ContentHeader-stories.tsx | 3 +- stories/layout/PageHeader-stories.tsx | 3 +- tsconfig.json | 2 +- yarn.lock | 695 +++++++++++++----- 17 files changed, 542 insertions(+), 231 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 312b4097..62db0a5a 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -19,14 +19,16 @@ */ import type { StorybookConfig } from '@storybook/react-vite'; -import { dirname, join } from 'node:path'; +import { createRequire } from 'node:module'; + +const require = createRequire(import.meta.url); const config: StorybookConfig = { addons: [ - getAbsolutePath('@storybook/addon-a11y'), - getAbsolutePath('@storybook/addon-docs'), - getAbsolutePath('@storybook/addon-links'), - getAbsolutePath('@storybook/addon-themes'), + '@storybook/addon-a11y', + '@storybook/addon-docs', + '@storybook/addon-links', + '@storybook/addon-themes', ], framework: '@storybook/react-vite', staticDirs: ['../public'], @@ -35,7 +37,3 @@ const config: StorybookConfig = { }; export default config; - -function getAbsolutePath(value: string) { - return dirname(require.resolve(join(value, 'package.json'))); -} diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index c8d3a9ca..ad1bab1a 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -249,16 +249,17 @@ const preview: Preview = { }, backgrounds: { disabled: undefined, - values: [ - { + options: { + light: { name: 'light', value: 'rgb(255,255,255)', }, - { + + dark: { name: 'dark', value: 'rgb(42,47,64)', }, - ], + }, }, docs: { codePanel: true, diff --git a/netlify.toml b/netlify.toml index a97a9538..32a64a19 100644 --- a/netlify.toml +++ b/netlify.toml @@ -17,6 +17,6 @@ command = "yarn build-storybook" [build.environment] - NODE_VERSION = "20.13" + NODE_VERSION = "22.21" # renovate: datasource=github-release depName=yarn packageName=yarnpkg/berry YARN_VERSION = "4.12.0" diff --git a/package.json b/package.json index 43f1ece7..f328fb8a 100644 --- a/package.json +++ b/package.json @@ -69,11 +69,11 @@ "@emotion/utils": "1.4.2", "@figma/code-connect": "1.3.11", "@formatjs/cli": "6.7.4", - "@storybook/addon-a11y": "9.0.18", - "@storybook/addon-docs": "9.0.18", - "@storybook/addon-links": "9.0.18", - "@storybook/addon-themes": "9.0.18", - "@storybook/react-vite": "9.0.18", + "@storybook/addon-a11y": "10.1.10", + "@storybook/addon-docs": "10.1.10", + "@storybook/addon-links": "10.1.10", + "@storybook/addon-themes": "10.1.10", + "@storybook/react-vite": "10.1.10", "@testing-library/dom": "10.4.1", "@testing-library/jest-dom": "6.9.1", "@testing-library/react": "16.3.0", @@ -116,7 +116,7 @@ "rollup": "4.53.3", "rollup-plugin-license": "3.6.0", "sonarqube-scanner": "4.3.2", - "storybook": "9.1.17", + "storybook": "10.1.10", "style-dictionary": "5.1.1", "subset-font": "2.4.0", "typescript": "5.9.3", diff --git a/src/components/buttons/ButtonAsLink.tsx b/src/components/buttons/ButtonAsLink.tsx index 8a0c83e9..a90afbdd 100644 --- a/src/components/buttons/ButtonAsLink.tsx +++ b/src/components/buttons/ButtonAsLink.tsx @@ -18,8 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import styled from '@emotion/styled'; import { Link as RouterLink } from 'react-router-dom'; -import { styled } from 'storybook/internal/theming'; import { LinkBaseProps } from '../links/LinkTypes'; import { buttonIconStyles, ButtonStyled } from './ButtonStyles'; import { ButtonCommonProps, HTMLButtonAttributesSubset } from './ButtonTypes'; diff --git a/src/components/checkbox-group/CheckboxGroup.tsx b/src/components/checkbox-group/CheckboxGroup.tsx index 8ddfa27d..86646b69 100644 --- a/src/components/checkbox-group/CheckboxGroup.tsx +++ b/src/components/checkbox-group/CheckboxGroup.tsx @@ -70,6 +70,13 @@ import { useFormFieldA11y } from '../form/useFormFieldA11y'; * /> * ``` */ +/* + * TypeScript cannot infer the generic type T with forwardRef, causing a type error + * where (value: T) => string in serializeValue is incompatible with (value: unknown) => string. + * Making forwardRef generic would fix this but make inference worse - users would have to always + * specify the type explicitly: ...> we don't want that. + */ +/* @ts-expect-error: Generic type inference limitation with forwardRef */ export const CheckboxGroup: CheckboxGroup = forwardRef( (props, ref) => { const { diff --git a/src/components/layout/banner/BannerTypes.tsx b/src/components/layout/banner/BannerTypes.tsx index fc4e78bf..84fd5595 100644 --- a/src/components/layout/banner/BannerTypes.tsx +++ b/src/components/layout/banner/BannerTypes.tsx @@ -18,6 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { MouseEvent } from 'react'; import { TextNodeOptional } from '~types/utils'; export enum BannerVariety { @@ -36,7 +37,7 @@ export interface BannerProps { /** * Function that will be called when the dismiss button is clicked. The dismiss button is only shown if this function is defined. */ - onDismiss?: VoidFunction | ((event: React.MouseEvent) => Promise); + onDismiss?: VoidFunction | ((event: MouseEvent) => Promise); /** * Prefix text for screen readers to announce before the banner content. Optional since a default value is provided. */ diff --git a/src/components/legacy-banner/BannerTypes.tsx b/src/components/legacy-banner/BannerTypes.tsx index 1df0089d..1c52d6ad 100644 --- a/src/components/legacy-banner/BannerTypes.tsx +++ b/src/components/legacy-banner/BannerTypes.tsx @@ -18,6 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { MouseEvent } from 'react'; import { TextNodeOptional } from '~types/utils'; import { BannerVariety } from '../layout'; @@ -34,7 +35,7 @@ export interface LegacyBannerProps { /** * Function that will be called when the dismiss button is clicked, the dismiss button is only showed if this function is defined. */ - onDismiss?: VoidFunction | ((event: React.MouseEvent) => Promise); + onDismiss?: VoidFunction | ((event: MouseEvent) => Promise); /** * Prefix text for screen readers to announce before the banner content. Optional since a default value is provided. */ diff --git a/src/components/spotlight/Spotlight.tsx b/src/components/spotlight/Spotlight.tsx index 4f657481..a039ab8b 100644 --- a/src/components/spotlight/Spotlight.tsx +++ b/src/components/spotlight/Spotlight.tsx @@ -178,7 +178,7 @@ export function Spotlight(props: Readonly) { tooltipComponent={({ step, ...stepModalPropsWithoutStep - }: PropsWithChildren) => ( + }: PropsWithChildren) => ( { expect(container).toMatchSnapshot(); }); -it.each(['h1', 'h2', 'h3', 'h4', 'h5'])( +it.each(['h1', 'h2', 'h3', 'h4', 'h5'] as const)( 'renders a Heading as an %s with no bottom margin', - async (as: ComponentProps['as']) => { + async (as) => { const children = `This is a heading rendered as "${as}" with no bottom margin`; const { container } = setupHeading({ as, children }); diff --git a/stories/Button-stories.tsx b/stories/Button-stories.tsx index fe0668a2..be251175 100644 --- a/stories/Button-stories.tsx +++ b/stories/Button-stories.tsx @@ -102,11 +102,11 @@ export const WithEllipsis: Story = { ), }; -export const AllVarieties: Story = { +export const AllVarieties: StoryObj = { args: { onClick: () => console.log('Button clicked'), }, - render: (args: ButtonAsButtonProps) => ( + render: (args) => ( <> {Object.values(ButtonVariety).map((variety) => (