diff --git a/package.json b/package.json index 4ad41d3b53a69..1f129b43f212e 100644 --- a/package.json +++ b/package.json @@ -278,7 +278,8 @@ "scheduler": "0.25.0-rc-372ec00c-20241209" }, "patchedDependencies": { - "webpack-sources@3.2.3": "patches/webpack-sources@3.2.3.patch" + "webpack-sources@3.2.3": "patches/webpack-sources@3.2.3.patch", + "@storybook/react@8.4.7": "patches/@storybook__react@8.4.7.patch" } } } diff --git a/packages/next/.storybook/main.ts b/packages/next/.storybook/main.ts index 366f443b0d239..0d7b170179eb0 100644 --- a/packages/next/.storybook/main.ts +++ b/packages/next/.storybook/main.ts @@ -11,8 +11,9 @@ function getAbsolutePath(value: string): any { } const config: StorybookConfig = { stories: [ - '../stories/**/*.mdx', - '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', + // Could to '../src/**/*.stories.@(ts|tsx)', but not sure how much it'll affect perf. + // Scoped to experimental dev overlay for now. + '../src/client/components/react-dev-overlay/_experimental/**/*.stories.@(ts|tsx)', ], addons: [ getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), @@ -23,7 +24,20 @@ const config: StorybookConfig = { ], framework: { name: getAbsolutePath('@storybook/react-webpack5'), - options: {}, + options: { + builder: { + useSWC: true, + }, + }, }, + swc: () => ({ + jsc: { + transform: { + react: { + runtime: 'automatic', + }, + }, + }, + }), } export default config diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ErrorOverlayLayout/ErrorOverlayLayout.stories.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ErrorOverlayLayout/ErrorOverlayLayout.stories.tsx new file mode 100644 index 0000000000000..0996dde10a860 --- /dev/null +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ErrorOverlayLayout/ErrorOverlayLayout.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { ErrorOverlayLayout } from './ErrorOverlayLayout' +import { withShadowPortal } from '../../storybook/with-shadow-portal' + +const meta: Meta = { + title: 'ErrorOverlayLayout', + component: ErrorOverlayLayout, + parameters: { + layout: 'fullscreen', + }, + decorators: [withShadowPortal], +} + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + errorType: 'Build Error', + errorMessage: 'Failed to compile', + versionInfo: { + installed: '15.0.0', + staleness: 'fresh', + }, + children: "Module not found: Cannot find module './missing-module'", + }, +} diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ErrorOverlayLayout/ErrorOverlayLayout.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ErrorOverlayLayout/ErrorOverlayLayout.tsx new file mode 100644 index 0000000000000..3764634019c3f --- /dev/null +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ErrorOverlayLayout/ErrorOverlayLayout.tsx @@ -0,0 +1,59 @@ +import type { VersionInfo } from '../../../../../../../server/dev/parse-version-info' +import { Dialog, DialogHeader, DialogBody, DialogContent } from '../Dialog' +import { Overlay } from '../Overlay' +import { VersionStalenessInfo } from '../VersionStalenessInfo' + +type ErrorOverlayLayoutProps = { + errorType: + | 'Build Error' + | 'Runtime Error' + | 'Console Error' + | 'Unhandled Runtime Error' + | 'Missing Required HTML Tag' + errorMessage: string | React.ReactNode + onClose: () => void + isBuildError?: boolean + versionInfo?: VersionInfo + children?: React.ReactNode +} + +export function ErrorOverlayLayout({ + errorType, + errorMessage, + onClose, + children, + versionInfo, + isBuildError, +}: ErrorOverlayLayoutProps) { + return ( + + + + +

+ {errorType} +

+ +

+ {errorMessage} +

+ + + {children} + + + + + ) +} diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx index 806769d1cd8a6..9112354875d37 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx @@ -1,15 +1,8 @@ import * as React from 'react' import type { VersionInfo } from '../../../../../../server/dev/parse-version-info' -import { - Dialog, - DialogBody, - DialogContent, - DialogHeader, -} from '../components/Dialog' -import { Overlay } from '../components/Overlay' import { Terminal } from '../components/Terminal' -import { VersionStalenessInfo } from '../components/VersionStalenessInfo' import { noop as css } from '../helpers/noop-template' +import { ErrorOverlayLayout } from '../components/ErrorOverlayLayout/ErrorOverlayLayout' export type BuildErrorProps = { message: string; versionInfo?: VersionInfo } @@ -19,43 +12,22 @@ export const BuildError: React.FC = function BuildError({ }) { const noop = React.useCallback(() => {}, []) return ( - - - - -

- {'Build Error'} -

- -

- Failed to compile -

- - - -
-

- - This error occurred during the build process and can only be - dismissed by fixing the error. - -

-
- - - - + + +
+

+ + This error occurred during the build process and can only be + dismissed by fixing the error. + +

+
+ ) } diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/root-layout-missing-tags-error.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/root-layout-missing-tags-error.tsx index 407b09a5fd9a9..85b9ebae09226 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/root-layout-missing-tags-error.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/root-layout-missing-tags-error.tsx @@ -1,50 +1,32 @@ -import * as React from 'react' import type { VersionInfo } from '../../../../../../server/dev/parse-version-info' -import { Dialog, DialogContent, DialogHeader } from '../components/Dialog' -import { Overlay } from '../components/Overlay' -import { VersionStalenessInfo } from '../components/VersionStalenessInfo' +import { useCallback } from 'react' import { HotlinkedText } from '../components/hot-linked-text' +import { ErrorOverlayLayout } from '../components/ErrorOverlayLayout/ErrorOverlayLayout' type RootLayoutMissingTagsErrorProps = { missingTags: string[] versionInfo?: VersionInfo } -export const RootLayoutMissingTagsError: React.FC = - function RootLayoutMissingTagsError({ missingTags, versionInfo }) { - const noop = React.useCallback(() => {}, []) - return ( - - - - - -

- Missing required html tags -

-

- `<${tagName}>`) - .join( - ', ' - )}.\nRead more at https://nextjs.org/docs/messages/missing-root-layout-tags`} - /> -

- - - - - ) - } +export function RootLayoutMissingTagsError({ + missingTags, + versionInfo, +}: RootLayoutMissingTagsErrorProps) { + const noop = useCallback(() => {}, []) + return ( + `<${tagName}>`) + .join( + ', ' + )}.\nRead more at https://nextjs.org/docs/messages/missing-root-layout-tags`} + /> + } + onClose={noop} + versionInfo={versionInfo} + /> + ) +} diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/storybook/with-shadow-portal.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/storybook/with-shadow-portal.tsx new file mode 100644 index 0000000000000..422a3ee1dd46f --- /dev/null +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/storybook/with-shadow-portal.tsx @@ -0,0 +1,13 @@ +import { Base } from '../styles/Base' +import { CssReset } from '../styles/CssReset' +import { ComponentStyles } from '../styles/ComponentStyles' +import { ShadowPortal } from '../components/ShadowPortal' + +export const withShadowPortal = (Story: any) => ( + + + + + + +) diff --git a/patches/@storybook__react@8.4.7.patch b/patches/@storybook__react@8.4.7.patch new file mode 100644 index 0000000000000..26e6d558c2362 --- /dev/null +++ b/patches/@storybook__react@8.4.7.patch @@ -0,0 +1,19 @@ +diff --git a/dist/types-a5624094.d.ts b/dist/types-a5624094.d.ts +index 8e1eb5e94642cb7e943fdb09da96606021701921..9958875a5d2026867455238ec44a71f905d758a4 100644 +--- a/dist/types-a5624094.d.ts ++++ b/dist/types-a5624094.d.ts +@@ -1,4 +1,4 @@ +-import { ComponentType } from 'react'; ++import { ComponentType, JSX } from 'react'; + import { WebRenderer, Canvas } from 'storybook/internal/types'; + + interface ReactRenderer extends WebRenderer { +diff --git a/template/components/index.js b/template/components/index.js +deleted file mode 100644 +index c473ab7bed22857c051643fc4f0fce5637793adc..0000000000000000000000000000000000000000 +diff --git a/template/stories/docgen-components/imported.js b/template/stories/docgen-components/imported.js +deleted file mode 100644 +index bd94145261b03fff811e93a3d8f350a03b7a5105..0000000000000000000000000000000000000000 +diff --git a/template/stories/docgen-components/js-proptypes/ext.js b/template/stories/docgen-components/js-proptypes/ext.js +deleted file mode 100644 +index 11d0ad4810bb77980bc7be0b7697f3a85b15ffd2..0000000000000000000000000000000000000000 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0fffd94745b77..73202abf3ca75 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,6 +22,9 @@ overrides: scheduler: 0.25.0-rc-372ec00c-20241209 patchedDependencies: + '@storybook/react@8.4.7': + hash: 3vtnbaj5dhujyrhznezprlo624 + path: patches/@storybook__react@8.4.7.patch webpack-sources@3.2.3: hash: jbynf5dc46ambamq3wuyho6hkq path: patches/webpack-sources@3.2.3.patch @@ -1013,7 +1016,7 @@ importers: version: 8.4.7(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3)) '@storybook/react': specifier: ^8.4.7 - version: 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.3.3)))(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2) + version: 8.4.7(patch_hash=3vtnbaj5dhujyrhznezprlo624)(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.3.3)))(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2) '@storybook/react-webpack5': specifier: ^8.4.7 version: 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.3.3)))(@swc/core@1.9.3(@swc/helpers@0.5.15))(esbuild@0.23.1)(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2) @@ -20612,7 +20615,7 @@ snapshots: '@storybook/preset-react-webpack@8.4.7(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.3.3)))(@swc/core@1.9.3(@swc/helpers@0.5.15))(esbuild@0.23.1)(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2)': dependencies: '@storybook/core-webpack': 8.4.7(storybook@8.4.7(prettier@3.3.3)) - '@storybook/react': 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.3.3)))(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2) + '@storybook/react': 8.4.7(patch_hash=3vtnbaj5dhujyrhznezprlo624)(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.3.3)))(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2) '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.7.2)(webpack@5.96.1(@swc/core@1.9.3(@swc/helpers@0.5.15))(esbuild@0.23.1)) '@types/node': 20.17.6 '@types/semver': 7.5.6 @@ -20664,7 +20667,7 @@ snapshots: dependencies: '@storybook/builder-webpack5': 8.4.7(@swc/core@1.9.3(@swc/helpers@0.5.15))(esbuild@0.23.1)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2) '@storybook/preset-react-webpack': 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.3.3)))(@swc/core@1.9.3(@swc/helpers@0.5.15))(esbuild@0.23.1)(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2) - '@storybook/react': 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.3.3)))(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2) + '@storybook/react': 8.4.7(patch_hash=3vtnbaj5dhujyrhznezprlo624)(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.3.3)))(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2) '@types/node': 20.17.6 react: 19.0.0-rc-372ec00c-20241209 react-dom: 19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209) @@ -20680,7 +20683,7 @@ snapshots: - uglify-js - webpack-cli - '@storybook/react@8.4.7(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.3.3)))(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2)': + '@storybook/react@8.4.7(patch_hash=3vtnbaj5dhujyrhznezprlo624)(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.3.3)))(react-dom@19.0.0-rc-372ec00c-20241209(react@19.0.0-rc-372ec00c-20241209))(react@19.0.0-rc-372ec00c-20241209)(storybook@8.4.7(prettier@3.3.3))(typescript@5.7.2)': dependencies: '@storybook/components': 8.4.7(storybook@8.4.7(prettier@3.3.3)) '@storybook/global': 5.0.0