diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index f5937d53714b..86ab09d2b6a4 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -103,8 +103,10 @@ const baseTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-webpack5', }, + skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], modifications: { + extraDependencies: ['prop-types'], mainConfig: (config) => { const stories = config.getFieldValue>(['stories']); return { @@ -133,6 +135,9 @@ const baseTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-webpack5', }, + modifications: { + extraDependencies: ['prop-types'], + }, }, 'nextjs/13-ts': { name: 'Next.js v13.5 (Webpack | TypeScript)', @@ -147,7 +152,7 @@ const baseTemplates = { mainConfig: { features: { experimentalRSC: true }, }, - extraDependencies: ['server-only'], + extraDependencies: ['server-only', 'prop-types'], }, skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, @@ -164,7 +169,7 @@ const baseTemplates = { mainConfig: { features: { experimentalRSC: true }, }, - extraDependencies: ['server-only'], + extraDependencies: ['server-only', 'prop-types'], }, skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, @@ -181,7 +186,7 @@ const baseTemplates = { mainConfig: { features: { experimentalRSC: true }, }, - extraDependencies: ['server-only'], + extraDependencies: ['server-only', 'prop-types'], }, skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, @@ -195,7 +200,7 @@ const baseTemplates = { builder: '@storybook/builder-webpack5', }, modifications: { - extraDependencies: ['server-only'], + extraDependencies: ['server-only', 'prop-types'], mainConfig: { features: { experimentalRSC: true }, }, @@ -216,7 +221,12 @@ const baseTemplates = { framework: '@storybook/experimental-nextjs-vite', features: { experimentalRSC: true }, }, - extraDependencies: ['server-only', '@storybook/experimental-nextjs-vite', 'vite'], + extraDependencies: [ + 'server-only', + '@storybook/experimental-nextjs-vite', + 'vite', + 'prop-types', + ], }, skipTasks: ['e2e-tests-dev', 'bench'], }, @@ -228,6 +238,9 @@ const baseTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-vite', }, + modifications: { + extraDependencies: ['prop-types'], + }, skipTasks: ['e2e-tests-dev', 'bench'], }, 'react-vite/default-ts': { @@ -238,6 +251,9 @@ const baseTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-vite', }, + modifications: { + extraDependencies: ['prop-types'], + }, skipTasks: ['bench'], }, 'react-vite/prerelease-ts': { @@ -261,6 +277,9 @@ const baseTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-vite', }, + modifications: { + extraDependencies: ['prop-types'], + }, skipTasks: ['e2e-tests-dev', 'bench'], }, 'react-webpack/18-ts': { @@ -271,6 +290,9 @@ const baseTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-webpack5', }, + modifications: { + extraDependencies: ['prop-types'], + }, skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, 'react-webpack/17-ts': { @@ -282,6 +304,9 @@ const baseTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-webpack5', }, + modifications: { + extraDependencies: ['prop-types'], + }, skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, 'react-webpack/prerelease-ts': { @@ -303,6 +328,9 @@ const baseTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-webpack5', }, + modifications: { + extraDependencies: ['prop-types'], + }, skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, 'solid-vite/default-js': { @@ -581,7 +609,7 @@ const internalTemplates = { builder: '@storybook/builder-webpack5', }, modifications: { - extraDependencies: ['@storybook/addon-webpack5-compiler-babel'], + extraDependencies: ['@storybook/addon-webpack5-compiler-babel', 'prop-types'], editAddons: (addons) => [...addons, '@storybook/addon-webpack5-compiler-babel'].filter( (a) => a !== '@storybook/addon-webpack5-compiler-swc' @@ -599,6 +627,9 @@ const internalTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-webpack5', }, + modifications: { + extraDependencies: ['prop-types'], + }, skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], isInternal: true, }, diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 73172e5903f2..36f50780eefd 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -67,31 +67,29 @@ "@storybook/manager-api": "workspace:^", "@storybook/preview-api": "workspace:^", "@storybook/react-dom-shim": "workspace:*", - "@storybook/theming": "workspace:^", + "@storybook/theming": "workspace:^" + }, + "devDependencies": { + "@storybook/test": "workspace:*", + "@types/babel-plugin-react-docgen": "^4", "@types/escodegen": "^0.0.6", "@types/estree": "^0.0.51", "@types/node": "^22.0.0", + "@types/semver": "^7.3.4", "acorn": "^7.4.1", "acorn-jsx": "^5.3.1", "acorn-walk": "^7.2.0", + "babel-plugin-react-docgen": "^4.2.1", + "es-toolkit": "^1.21.0", "escodegen": "^2.1.0", + "expect-type": "^0.15.0", "html-tags": "^3.1.0", "prop-types": "^15.7.2", "react-element-to-jsx-string": "^15.0.0", + "require-from-string": "^2.0.2", "semver": "^7.3.7", "ts-dedent": "^2.0.0", - "type-fest": "~2.19", - "util-deprecate": "^1.0.2" - }, - "devDependencies": { - "@storybook/test": "workspace:*", - "@types/babel-plugin-react-docgen": "^4", - "@types/semver": "^7.3.4", - "@types/util-deprecate": "^1.0.0", - "babel-plugin-react-docgen": "^4.2.1", - "es-toolkit": "^1.21.0", - "expect-type": "^0.15.0", - "require-from-string": "^2.0.2" + "type-fest": "~2.19" }, "peerDependencies": { "@storybook/test": "workspace:*", diff --git a/code/renderers/react/src/docs/jsxDecorator.tsx b/code/renderers/react/src/docs/jsxDecorator.tsx index dd145b1192f7..821d9dc3dd08 100644 --- a/code/renderers/react/src/docs/jsxDecorator.tsx +++ b/code/renderers/react/src/docs/jsxDecorator.tsx @@ -8,11 +8,15 @@ import { addons, useEffect } from 'storybook/internal/preview-api'; import type { ArgsStoryFn, PartialStoryFn, StoryContext } from 'storybook/internal/types'; import type { Options } from 'react-element-to-jsx-string'; -import reactElementToJSXString from 'react-element-to-jsx-string'; +import type reactElementToJSXStringType from 'react-element-to-jsx-string'; +// @ts-expect-error (this is needed, because our bundling prefers the `browser` field, but that yields CJS) +import reactElementToJSXStringRaw from 'react-element-to-jsx-string/dist/esm/index.js'; import type { ReactRenderer } from '../types'; import { isForwardRef, isMemo } from './lib'; +const reactElementToJSXString = reactElementToJSXStringRaw as typeof reactElementToJSXStringType; + const toPascalCase = (str: string) => str.charAt(0).toUpperCase() + str.slice(1); /** diff --git a/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts b/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts index 96b052a07dda..7ed6c8df098c 100644 --- a/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts +++ b/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts @@ -7,7 +7,9 @@ import { } from 'storybook/internal/docs-tools'; import { isFunction, isPlainObject, isString } from 'es-toolkit/compat'; -import reactElementToJSXString from 'react-element-to-jsx-string'; +import type reactElementToJSXStringType from 'react-element-to-jsx-string'; +// @ts-expect-error (this is needed, because our bundling prefers the `browser` field, but that yields CJS) +import reactElementToJSXStringRaw from 'react-element-to-jsx-string/dist/esm/index.js'; import { ELEMENT_CAPTION, FUNCTION_CAPTION, OBJECT_CAPTION } from '../captions'; import type { InspectionFunction } from '../inspection'; @@ -17,6 +19,8 @@ import { generateArray } from './generateArray'; import { generateObject } from './generateObject'; import { getPrettyElementIdentifier, getPrettyFuncIdentifier } from './prettyIdentifier'; +const reactElementToJSXString = reactElementToJSXStringRaw as typeof reactElementToJSXStringType; + export type TypeResolver = (rawDefaultProp: any, propDef: PropDef) => PropDefaultValue; export interface TypeResolvers { diff --git a/code/yarn.lock b/code/yarn.lock index 2c6f7244e415..79822b6950b8 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6768,7 +6768,6 @@ __metadata: "@types/estree": "npm:^0.0.51" "@types/node": "npm:^22.0.0" "@types/semver": "npm:^7.3.4" - "@types/util-deprecate": "npm:^1.0.0" acorn: "npm:^7.4.1" acorn-jsx: "npm:^5.3.1" acorn-walk: "npm:^7.2.0" @@ -6783,7 +6782,6 @@ __metadata: semver: "npm:^7.3.7" ts-dedent: "npm:^2.0.0" type-fest: "npm:~2.19" - util-deprecate: "npm:^1.0.2" peerDependencies: "@storybook/test": "workspace:*" react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta