Merge pull request #24514 from storybookjs/norbert/react18

UI: Upgrade manager to react 18

code/.yarnrc.yml

@@ -25,3 +25,5 @@ unsafeHttpWhitelist:
 
 yarnPath: ../.yarn/releases/yarn-3.5.1.cjs
 installStatePath: '../.yarn/code-install-state.gz'
+# Sometimes you get a "The remote archive doesn't match the expected checksum" error, uncommenting this line will fix it
+# checksumBehavior: 'update'

code/addons/a11y/package.json

@@ -80,7 +80,7 @@
     "react-resize-detector": "^7.1.2"
   },
   "devDependencies": {
-    "@testing-library/react": "^11.2.2",
+    "@testing-library/react": "^14.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "typescript": "~5.2.2"
   },

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

@@ -52,7 +52,10 @@ const defaultResult = {
   violations: [],
 };
 
-export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active, ...props }) => {
+export const A11yContextProvider: React.FC<React.PropsWithChildren<A11yContextProviderProps>> = ({
+  active,
+  ...props
+}) => {
   const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult);
   const [tab, setTab] = React.useState(0);
   const [highlighted, setHighlighted] = React.useState<string[]>([]);

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

@@ -87,8 +87,8 @@ const List = styled.div(({ theme }) => ({
 
 interface TabsProps {
   tabs: {
-    label: JSX.Element;
-    panel: JSX.Element;
+    label: React.ReactElement;
+    panel: React.ReactElement;
     items: Result[];
     type: RuleType;
   }[];

code/addons/actions/src/components/ActionLogger/index.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React, { Fragment } from 'react';
 import { styled, withTheme } from '@storybook/theming';
 import type { Theme } from '@storybook/theming';
@@ -9,7 +9,10 @@ import { ActionBar, ScrollArea } from '@storybook/components';
 import { Action, InspectorContainer, Counter } from './style';
 import type { ActionDisplay } from '../../models';
 
-const UnstyledWrapped: FC<{ className?: string }> = ({ children, className }) => (
+const UnstyledWrapped: FC<PropsWithChildren<{ className?: string }>> = ({
+  children,
+  className,
+}) => (
   <ScrollArea horizontal vertical className={className}>
     {children}
   </ScrollArea>

code/addons/docs/package.json

@@ -120,8 +120,8 @@
   },
   "devDependencies": {
     "@rollup/pluginutils": "^5.0.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "~5.2.2",
     "vite": "^4.0.4"
   },

code/addons/docs/src/DocsRenderer.tsx

@@ -1,3 +1,4 @@
+import type { PropsWithChildren } from 'react';
 import React, { Component } from 'react';
 import { renderElement, unmountElement } from '@storybook/react-dom-shim';
 import type { Renderer, Parameters, DocsContextProps, DocsRenderFunction } from '@storybook/types';
@@ -10,9 +11,11 @@ export const defaultComponents: Record<string, any> = {
   ...HeadersMdx,
 };
 
-class ErrorBoundary extends Component<{
-  showException: (err: Error) => void;
-}> {
+class ErrorBoundary extends Component<
+  PropsWithChildren<{
+    showException: (err: Error) => void;
+  }>
+> {
   state = { hasError: false };
 
   static getDerivedStateFromError() {

code/addons/interactions/src/Panel.tsx

@@ -148,32 +148,33 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
       },
       [STORY_RENDER_PHASE_CHANGED]: (event) => {
         if (event.newPhase === 'preparing') {
-          set((s) => ({
+          set({
             controlStates: INITIAL_CONTROL_STATES,
             isErrored: false,
             pausedAt: undefined,
             interactions: [],
             isPlaying: false,
-            isRerunAnimating: false,
-            scrollTarget,
-            collapsed: new Set() as Set<Call['id']>,
             hasException: false,
             caughtException: undefined,
             interactionsCount: 0,
-          }));
+          });
           return;
         }
-        set((s) => ({
-          ...s,
-          isPlaying: event.newPhase === 'playing',
-          pausedAt: undefined,
-          ...(event.newPhase === 'rendering'
-            ? {
-                isErrored: false,
-                caughtException: undefined,
-              }
-            : {}),
-        }));
+        set((s) => {
+          const newState: typeof s = {
+            ...s,
+            isPlaying: event.newPhase === 'playing',
+            pausedAt: undefined,
+            ...(event.newPhase === 'rendering'
+              ? {
+                  isErrored: false,
+                  caughtException: undefined,
+                }
+              : {}),
+          };
+
+          return newState;
+        });
       },
       [STORY_THREW_EXCEPTION]: () => {
         set((s) => ({ ...s, isErrored: true }));

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

@@ -431,7 +431,7 @@ export const MethodCall = ({
       callId ? (
         <MethodCall key={`elem${index}`} call={callsById.get(callId)} callsById={callsById} />
       ) : (
-        <span key={`elem${index}`}>{elem}</span>
+        <span key={`elem${index}`}>{elem as any}</span>
       ),
       <wbr key={`wbr${index}`} />,
       <span key={`dot${index}`}>.</span>,

code/addons/jest/src/components/Message.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, ReactElement } from 'react';
 import React, { Fragment } from 'react';
 import { styled } from '@storybook/theming';
 
@@ -12,7 +12,7 @@ const passStartToken = '[32m';
 const stackTraceStartToken = 'at';
 const titleEndToken = ':';
 
-type MsgElement = string | JSX.Element;
+type MsgElement = string | ReactElement;
 
 class TestDetail {
   description!: MsgElement[];

code/addons/links/src/react/components/link.test.tsx

@@ -61,11 +61,8 @@ describe('LinkTo', () => {
   });
 
   describe('events', () => {
-    it('should select the kind and story on click', () => {
-      const channel = {
-        emit: jest.fn(),
-        on: jest.fn(),
-      } as any;
+    it('should select the kind and story on click', async () => {
+      const channel = mockChannel() as any;
       mockAddons.getChannel.mockReturnValue(channel);
 
       render(
@@ -74,7 +71,15 @@ describe('LinkTo', () => {
           link
         </LinkTo>
       );
-      userEvent.click(screen.getByText('link'));
+
+      await waitFor(() => {
+        expect(screen.getByText('link')).toHaveAttribute(
+          'href',
+          'originpathname?path=/story/foo--bar'
+        );
+      });
+
+      await userEvent.click(screen.getByText('link'));
 
       expect(channel.emit).toHaveBeenLastCalledWith(
         SELECT_STORY,

code/addons/storysource/package.json

@@ -67,7 +67,7 @@
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
-    "@types/react": "^16.14.34",
+    "@types/react": "^18.0.37",
     "@types/react-syntax-highlighter": "11.0.5",
     "typescript": "~5.2.2"
   },

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

@@ -5,13 +5,10 @@ import { SbPage } from './util';
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 
 test.describe('addon-actions', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(storybookUrl);
-    await new SbPage(page).waitUntilLoaded();
-  });
-
   test('should trigger an action', async ({ page }) => {
+    await page.goto(storybookUrl);
     const sbPage = new SbPage(page);
+    sbPage.waitUntilLoaded();
 
     await sbPage.navigateToStory('example/button', 'primary');
     const root = sbPage.previewRoot();

code/e2e-tests/util.ts

@@ -57,6 +57,8 @@ export class SbPage {
 
     const selected = await storyLink.getAttribute('data-selected');
     await expect(selected).toBe('true');
+
+    await this.previewRoot();
   }
 
   async waitUntilLoaded() {

code/frameworks/angular/package.json

@@ -52,8 +52,8 @@
     "@storybook/telemetry": "workspace:*",
     "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0",
-    "@types/react": "^16.14.34",
-    "@types/react-dom": "^16.9.14",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
     "@types/semver": "^7.3.4",
     "@types/webpack-env": "^1.18.0",
     "find-up": "^5.0.0",

code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx

@@ -1,3 +1,4 @@
+import type { PropsWithChildren } from 'react';
 import React, { useMemo } from 'react';
 import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context.shared-runtime';
 import initHeadManager from 'next/dist/client/head-manager';
@@ -12,7 +13,7 @@ type HeadManagerValue = {
   nonce?: string | undefined;
 };
 
-const HeadManagerProvider: React.FC = ({ children }) => {
+const HeadManagerProvider: React.FC<PropsWithChildren> = ({ children }) => {
   const headManager: HeadManagerValue = useMemo(initHeadManager, []);
   headManager.getIsSsr = () => false;
 

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

@@ -58,7 +58,11 @@ const getParallelRoutes = (segmentsList: Array<string>): FlightRouterState => {
   return [] as any;
 };
 
-const AppRouterProvider: React.FC<AppRouterProviderProps> = ({ children, action, routeParams }) => {
+const AppRouterProvider: React.FC<React.PropsWithChildren<AppRouterProviderProps>> = ({
+  children,
+  action,
+  routeParams,
+}) => {
   const { pathname, query, segments = [], ...restRouteParams } = routeParams;
 
   const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }];

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

@@ -1,5 +1,6 @@
 import type { Globals } from '@storybook/csf';
 import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
+import type { PropsWithChildren } from 'react';
 import React from 'react';
 import type { RouteParams } from './types';
 
@@ -9,7 +10,7 @@ type PageRouterProviderProps = {
   globals: Globals;
 };
 
-const PageRouterProvider: React.FC<PageRouterProviderProps> = ({
+const PageRouterProvider: React.FC<PropsWithChildren<PageRouterProviderProps>> = ({
   children,
   action,
   routeParams,

code/frameworks/nextjs/src/styledJsx/decorator.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-let StyleRegistry: React.FC;
+let StyleRegistry: React.FC<React.PropsWithChildren>;
 
 try {
   // next >= v12