diff --git a/.storybook/main.ts b/.storybook/main.ts index 312b4097a..62db0a5a5 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 c8d3a9ca3..ad1bab1a7 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 a97a9538a..32a64a193 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 6aefa71ae..f328fb8a8 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.0.18", + "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 8a0c83e90..a90afbdd8 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 8ddfa27d5..86646b691 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 fc4e78bf4..84fd5595f 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 1df0089dd..1c52d6adf 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 4f6574819..a039ab8b0 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 fe0668a26..be2511759 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) => (