[renovate] Update dependency storybook to v10.1.10 [SECURITY]

.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')));
-}

.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,

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"

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",

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';

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: <CheckboxGroup<string> ...> we don't want that.
+ */
+/* @ts-expect-error: Generic type inference limitation with forwardRef */
 export const CheckboxGroup: CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
   (props, ref) => {
     const {

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<HTMLButtonElement>) => Promise<void>);
+  onDismiss?: VoidFunction | ((event: MouseEvent<HTMLElement>) => Promise<void>);
   /**
    * Prefix text for screen readers to announce before the banner content. Optional since a default value is provided.
    */

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<HTMLButtonElement>) => Promise<void>);
+  onDismiss?: VoidFunction | ((event: MouseEvent<HTMLElement>) => Promise<void>);
   /**
    * Prefix text for screen readers to announce before the banner content. Optional since a default value is provided.
    */

src/components/spotlight/Spotlight.tsx

@@ -178,7 +178,7 @@ export function Spotlight(props: Readonly<SpotlightProps>) {
       tooltipComponent={({
         step,
         ...stepModalPropsWithoutStep
-      }: PropsWithChildren<TooltipRenderProps & { step: SpotlightStep }>) => (
+      }: PropsWithChildren<TooltipRenderProps>) => (
         <SpotlightModalForStep
           {...{ activeTargetClassName, image, stepXofYLabel }}
           {...stepModalPropsWithoutStep}

src/components/typography/__tests__/Heading-test.tsx

@@ -29,9 +29,9 @@ it('uses the default size', () => {
   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<typeof Heading>['as']) => {
+  async (as) => {
     const children = `This is a heading rendered as "${as}" with no bottom margin`;
 
     const { container } = setupHeading({ as, children });

stories/Button-stories.tsx

@@ -102,11 +102,11 @@ export const WithEllipsis: Story = {
   ),
 };
 
-export const AllVarieties: Story = {
+export const AllVarieties: StoryObj<ButtonAsButtonProps> = {
   args: {
     onClick: () => console.log('Button clicked'),
   },
-  render: (args: ButtonAsButtonProps) => (
+  render: (args) => (
     <>
       {Object.values(ButtonVariety).map((variety) => (
         <Button key={variety} {...args} variety={variety}>

stories/ButtonIcon-stories.tsx

@@ -87,7 +87,7 @@ export const TooltipDetails: Story = {
   },
 };
 
-export const AllVarieties: Story = {
+export const AllVarieties: StoryObj<ButtonIconAsButtonProps> = {
   args: {
     ariaLabel: 'click',
     tooltipOptions: {
@@ -97,7 +97,7 @@ export const AllVarieties: Story = {
     Icon: IconClock,
     onClick: () => console.log('Button clicked'),
   },
-  render: (args: ButtonIconAsButtonProps) => (
+  render: (args) => (
     <>
       {Object.values(ButtonVariety).map((variety) => (
         <ButtonIcon key={variety} {...args} variety={variety} />

stories/Toast-stories.tsx

@@ -26,7 +26,7 @@ import { basicWrapperDecorator } from './helpers/BasicWrapper';
 import { toDisabledControlArgType, toTextControlArgTypes } from './helpers/arg-types';
 
 const meta: Meta<ToastParams> = {
-  component: Toast,
+  component: toast,
   title: 'Echoes/Toast',
   argTypes: {
     ...toDisabledControlArgType('actions'),

stories/layout/ContentHeader-stories.tsx

@@ -34,6 +34,7 @@ import {
 } from '../../src';
 
 const meta: Meta<typeof Layout.ContentHeader | typeof Layout.ContentHeader.Title> = {
+  title: 'Echoes/Layout/ContentHeader',
   argTypes: {
     actions: {
       control: { type: 'boolean' },
@@ -116,8 +117,6 @@ const meta: Meta<typeof Layout.ContentHeader | typeof Layout.ContentHeader.Title
       },
     },
   },
-  component: Layout.ContentHeader,
-  title: 'Echoes/Layout/ContentHeader',
 };
 
 export default meta;

stories/layout/PageHeader-stories.tsx

@@ -34,6 +34,7 @@ import {
 } from '../../src';
 
 const meta: Meta<typeof Layout.PageHeader | typeof Layout.PageHeader.Title> = {
+  title: 'Echoes/Layout/PageHeader',
   argTypes: {
     actions: {
       control: { type: 'boolean' },
@@ -114,8 +115,6 @@ const meta: Meta<typeof Layout.PageHeader | typeof Layout.PageHeader.Title> = {
       },
     },
   },
-  component: Layout.PageHeader,
-  title: 'Echoes/Layout/PageHeader',
 };
 
 export default meta;

tsconfig.json

@@ -93,7 +93,7 @@
     "strict": true,                                      /* Enable all strict type-checking options. */
     "noImplicitAny": true,                               /* Enable error reporting for expressions and declarations with an implied `any` type.. */
     // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
-    "strictFunctionTypes": false,                        /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    "strictFunctionTypes": true,                         /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
     // "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
     // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
     // "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */