Maintenance: Upgrades dependencies

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -42,13 +42,13 @@ const getFilter = (filterName: string) => {
   return `url('#${filterName}')`;
 };
 
-const Hidden = styled.div(() => ({
+const Hidden = styled.div({
   '&, & svg': {
     position: 'absolute',
     width: 0,
     height: 0,
   },
-}));
+});
 
 const ColorIcon = styled.span<{ filter: string }>(
   {

code/addons/interactions/src/components/Interaction.tsx

@@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
-const MethodCallWrapper = styled.div(() => ({
+const MethodCallWrapper = styled.div({
   fontFamily: typography.fonts.mono,
   fontSize: typography.size.s1,
   overflowWrap: 'break-word',
   inlineSize: 'calc( 100% - 40px )',
-}));
+});
 
 const RowContainer = styled('div', {
   shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),

code/addons/onboarding/src/components/List/List.styled.tsx

@@ -1,9 +1,9 @@
 import { styled } from 'storybook/internal/theming';
 
-export const ListWrapper = styled.ul(() => ({
+export const ListWrapper = styled.ul({
   display: 'flex',
   flexDirection: 'column',
   rowGap: 16,
   padding: 0,
   margin: 0,
-}));
+});

code/addons/storysource/package.json

@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.37",
-    "@types/react-syntax-highlighter": "11.0.5",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",

code/addons/storysource/src/StoryPanel.tsx

@@ -12,7 +12,7 @@ import { styled } from 'storybook/internal/theming';
 import type { LocationsMap, SourceBlock } from '@storybook/source-loader';
 
 // @ts-expect-error Typedefs don't currently expose `createElement` even though it exists
-import { createElement as createSyntaxHighlighterElement } from 'react-syntax-highlighter';
+import { createElement as createSyntaxHighlighterElement } from 'react-syntax-highlighter/dist/esm/index';
 import invariant from 'tiny-invariant';
 
 const StyledStoryLink = styled(Link)<{ to: string; key: string }>(({ theme }) => ({

code/addons/test/src/components/Interaction.tsx

@@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
-const MethodCallWrapper = styled.div(() => ({
+const MethodCallWrapper = styled.div({
   fontFamily: typography.fonts.mono,
   fontSize: typography.size.s1,
   overflowWrap: 'break-word',
   inlineSize: 'calc( 100% - 40px )',
-}));
+});
 
 const RowContainer = styled('div', {
   shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),

code/addons/test/src/vitest-plugin/setup-file.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-
 /* eslint-disable no-underscore-dangle */
 import { afterEach, vi } from 'vitest';
 import type { RunnerTask } from 'vitest';

code/addons/test/src/vitest-plugin/test-utils.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-
 /* eslint-disable no-underscore-dangle */
 import { type RunnerTask, type TaskContext, type TaskMeta, type TestContext } from 'vitest';
 

code/core/package.json

@@ -324,7 +324,7 @@
     "@types/prettier": "^3.0.0",
     "@types/pretty-hrtime": "^1.0.0",
     "@types/prompts": "^2.0.9",
-    "@types/react-syntax-highlighter": "11.0.5",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react-transition-group": "^4",
     "@types/semver": "^7.5.8",
     "@types/ws": "^8",
@@ -389,7 +389,7 @@
     "react-popper-tooltip": "^4.4.2",
     "react-resize-detector": "^7.1.2",
     "react-router-dom": "6.0.2",
-    "react-syntax-highlighter": "^15.4.5",
+    "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.3.0",
     "react-transition-group": "^4.4.5",
     "require-from-string": "^2.0.2",

code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx

@@ -1,4 +1,4 @@
-import type { MouseEvent } from 'react';
+import type { Component, MouseEvent, ReactNode } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { styled } from '@storybook/core/theming';
@@ -12,7 +12,6 @@ import { createElement } from 'react-syntax-highlighter/dist/esm/index';
 import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
 import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
 import graphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql';
-// @ts-expect-error (Converted from ts-ignore)
 import jsExtras from 'react-syntax-highlighter/dist/esm/languages/prism/js-extras';
 import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
 import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
@@ -26,11 +25,7 @@ import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-ligh
 import { ActionBar } from '../ActionBar/ActionBar';
 import type { ScrollAreaProps } from '../ScrollArea/ScrollArea';
 import { ScrollArea } from '../ScrollArea/ScrollArea';
-import type {
-  SyntaxHighlighterProps,
-  SyntaxHighlighterRenderer,
-  SyntaxHighlighterRendererProps,
-} from './syntaxhighlighter-types';
+import type { SyntaxHighlighterProps, SyntaxHighlighterRenderer } from './syntaxhighlighter-types';
 
 const { navigator, document, window: globalWindow } = global;
 
@@ -48,6 +43,9 @@ export const supportedLanguages = {
   graphql,
 };
 
+const ReactSyntaxHighlighterComponent =
+  ReactSyntaxHighlighter as typeof Component<SyntaxHighlighterProps>;
+
 Object.entries(supportedLanguages).forEach(([key, val]) => {
   ReactSyntaxHighlighter.registerLanguage(key, val);
 });
@@ -185,8 +183,10 @@ const wrapRenderer = (
     return renderer;
   }
   if (renderer) {
-    return ({ rows, ...rest }: SyntaxHighlighterRendererProps) =>
+    const wrapped: SyntaxHighlighterRenderer = ({ rows, ...rest }) =>
       renderer({ rows: rows.map((row) => processLineNumber(row)), ...rest });
+
+    return wrapped;
   }
   return defaultRenderer;
 };
@@ -208,7 +208,7 @@ export const SyntaxHighlighter = ({
   className = undefined,
   showLineNumbers = false,
   ...rest
-}: SyntaxHighlighterProps) => {
+}: SyntaxHighlighterProps): ReactNode => {
   if (typeof children !== 'string' || !children.trim()) {
     return null;
   }
@@ -247,20 +247,20 @@ export const SyntaxHighlighter = ({
       className={className}
     >
       <Scroller>
-        <ReactSyntaxHighlighter
+        <ReactSyntaxHighlighterComponent
           padded={padded || bordered}
           language={language}
           showLineNumbers={showLineNumbers}
-          showInlineLineNumbers={showLineNumbers}
+          // showInlineLineNumbers={showLineNumbers}
           useInlineStyles={false}
-          PreTag={Pre}
-          CodeTag={Code}
-          lineNumberContainerStyle={{}}
+          // PreTag={Pre}
+          // CodeTag={Code}
+          // lineNumberContainerStyle={{}}
           {...rest}
           renderer={renderer}
         >
           {highlightableCode}
-        </ReactSyntaxHighlighter>
+        </ReactSyntaxHighlighterComponent>
       </Scroller>
 
       {copyable ? (

code/core/src/csf-tools/vitest-plugin/transformer.ts

@@ -1,5 +1,4 @@
 /* eslint-disable local-rules/no-uncategorized-errors */
-
 /* eslint-disable no-underscore-dangle */
 import { types as t } from '@storybook/core/babel';
 import { getStoryTitle } from '@storybook/core/common';

code/core/src/manager-api/lib/merge.ts

@@ -2,7 +2,7 @@ import { logger } from '@storybook/core/client-logger';
 
 import { isEqual, mergeWith, omitBy, pick } from 'es-toolkit';
 
-export default <TObj = any>(a: TObj, ...b: Partial<TObj>[]): TObj => {
+export default <TObj extends {} = any>(a: TObj, ...b: Partial<TObj>[]): TObj => {
   // start with empty object
   let target = {};
 
@@ -47,7 +47,7 @@ export default <TObj = any>(a: TObj, ...b: Partial<TObj>[]): TObj => {
   return target as TObj;
 };
 
-export const noArrayMerge = <TObj = any>(a: TObj, ...b: Partial<TObj>[]): TObj => {
+export const noArrayMerge = <TObj extends {} = any>(a: TObj, ...b: Partial<TObj>[]): TObj => {
   // start with empty object
   let target = {};
 

code/core/src/manager/globals/exports.ts

@@ -12,6 +12,7 @@ export default {
     'StrictMode',
     'Suspense',
     '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED',
+    'act',
     'cloneElement',
     'createContext',
     'createElement',

code/core/src/preview-api/modules/store/csf/portable-stories.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-underscore-dangle */
-
 /* eslint-disable @typescript-eslint/naming-convention */
 import type {
   Args,

code/e2e-tests/addon-docs.spec.ts

@@ -1,5 +1,4 @@
 /* eslint-disable playwright/no-conditional-expect */
-
 /* eslint-disable playwright/no-conditional-in-test */
 import { expect, test } from '@playwright/test';
 import process from 'process';

code/e2e-tests/storybook-hooks.spec.ts

@@ -1,5 +1,4 @@
 /* eslint-disable playwright/expect-expect */
-
 /* eslint-disable no-underscore-dangle */
 import { promises as fs } from 'node:fs';
 import { join } from 'node:path';

code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx

@@ -100,6 +100,7 @@ export const AppRouterProvider: React.FC<React.PropsWithChildren<AppRouterProvid
               changeByServerResponse() {
                 // NOOP
               },
+              // @ts-expect-error (sometimes not available)
               buildId: 'storybook',
               tree,
               focusAndScrollRef: {

code/frameworks/nextjs/src/babel/plugins/next-ssg-transform.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-loop-func */
-
 /**
  * Source:
  * https://github.com/vercel/next.js/blob/canary/packages/next/src/build/babel/plugins/next-ssg-transform.ts

code/frameworks/nextjs/src/babel/plugins/react-loadable-plugin.ts

@@ -1,7 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-
 /* eslint-disable no-underscore-dangle */
-
 /**
  * Source:
  * https://github.com/vercel/next.js/blob/canary/packages/next/src/build/babel/plugins/react-loadable-plugin.ts

code/frameworks/nextjs/src/routing/app-router-provider.tsx

@@ -100,6 +100,7 @@ export const AppRouterProvider: React.FC<React.PropsWithChildren<AppRouterProvid
               changeByServerResponse() {
                 // NOOP
               },
+              // @ts-expect-error (sometimes not available)
               buildId: 'storybook',
               tree,
               focusAndScrollRef: {

code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts

@@ -1,7 +1,6 @@
 // THIS IS A PATCH over the original code from Next 14.0.0
 // we use our own patch because we need to remove tracing from the original code
 // which is not possible otherwise
-
 /*
 Copyright (c) 2017 The swc Project Developers
 Permission is hereby granted, free of charge, to any

code/lib/blocks/src/blocks/mdx.tsx

@@ -156,14 +156,14 @@ const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
   {}
 );
 
-const OcticonAnchor = styled.a(() => ({
+const OcticonAnchor = styled.a({
   float: 'left',
   lineHeight: 'inherit',
   paddingRight: '10px',
   marginLeft: '-24px',
   // Allow the theme's text color to override the default link color.
   color: 'inherit',
-}));
+});
 
 interface HeaderWithOcticonAnchorProps {
   as: string;

code/lib/blocks/src/components/ArgsTable/SectionRow.tsx

@@ -74,9 +74,9 @@ const Subsection = styled.td(({ theme }) => ({
   background: theme.background.app,
 }));
 
-const StyledTd = styled.td(() => ({
+const StyledTd = styled.td({
   position: 'relative',
-}));
+});
 
 const StyledTr = styled.tr(({ theme }) => ({
   '&:hover > td': {
@@ -86,7 +86,7 @@ const StyledTr = styled.tr(({ theme }) => ({
   },
 }));
 
-const ClickIntercept = styled.button(() => ({
+const ClickIntercept = styled.button({
   // reset button style
   background: 'none',
   border: 'none',
@@ -103,7 +103,7 @@ const ClickIntercept = styled.button(() => ({
   width: '100%',
   color: 'transparent',
   cursor: 'row-resize !important',
-}));
+});
 
 export const SectionRow: FC<SectionRowProps> = ({
   level = 'section',

code/lib/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-direct-mutation-state */
-
 /* eslint-disable react/sort-comp */
 import type { ReactElement } from 'react';
 import React, { Component, cloneElement } from 'react';

code/lib/instrumenter/src/instrumenter.test.ts

@@ -1,5 +1,4 @@
 // @vitest-environment happy-dom
-
 /* eslint-disable no-underscore-dangle */
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 

code/package.json

@@ -85,13 +85,16 @@
     "@vitest/expect@npm:2.0.5": "patch:@vitest/expect@npm%3A2.0.5#~/.yarn/patches/@vitest-expect-npm-2.0.5-8933466cce.patch",
     "esbuild": "^0.24.0",
     "playwright": "1.48.1",
+    "vite": "^4.0.4",
     "playwright-core": "1.48.1",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
     "serialize-javascript": "^3.1.0",
     "type-fest": "~2.19"
   },
   "dependencies": {
     "@chromatic-com/storybook": "^3.2.2",
-    "@happy-dom/global-registrator": "^14.12.0",
+    "@happy-dom/global-registrator": "^16.3.0",
     "@nx/eslint": "20.2.2",
     "@nx/vite": "20.2.2",
     "@nx/workspace": "20.2.2",
@@ -100,7 +103,7 @@
     "@storybook/addon-actions": "workspace:*",
     "@storybook/addon-backgrounds": "workspace:*",
     "@storybook/addon-controls": "workspace:*",
-    "@storybook/addon-designs": "^7.0.4",
+    "@storybook/addon-designs": "^8.0.4",
     "@storybook/addon-docs": "workspace:*",
     "@storybook/addon-essentials": "workspace:*",
     "@storybook/addon-highlight": "workspace:*",
@@ -167,7 +170,7 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.1",
     "@types/mock-require": "^2.0.3",
     "@types/node": "^22.0.0",
     "@types/react": "^18.0.37",

code/renderers/react/src/__test__/portable-stories-legacy.test.tsx

@@ -1,5 +1,4 @@
 // @vitest-environment happy-dom
-
 /* eslint-disable import/namespace */
 import { cleanup, render, screen } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';

code/renderers/react/src/__test__/portable-stories.test.tsx

@@ -1,5 +1,4 @@
 // @vitest-environment happy-dom
-
 /* eslint-disable import/namespace */
 import { cleanup, render, screen } from '@testing-library/react';
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';

code/renderers/react/src/act-compat.ts

@@ -14,7 +14,6 @@ declare const globalThis: {
 const clonedReact = { ...React };
 
 const reactAct =
-  // @ts-expect-error act might not be available in some versions of React
   typeof clonedReact.act === 'function' ? clonedReact.act : DeprecatedReactTestUtils.act;
 
 export function setReactActEnvironment(isReactActEnvironment: boolean) {

code/renderers/web-components/src/docs/custom-elements.test.ts

@@ -1,5 +1,4 @@
 // @vitest-environment happy-dom
-
 /* eslint-disable no-underscore-dangle */
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';