From a17ae31916d4b786386f7616833c39353c0b151d Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 6 May 2024 16:11:49 +0200 Subject: [PATCH] Merge pull request #26960 from storybookjs/jeppe/react-prerelease-sandboxes React: Support v19 betas in peer dependencies (cherry picked from commit 6a6da247f5634dcf5f80997677517397f9376307) --- .circleci/config.yml | 10 +-- .../stories/docs2/resolved-react.stories.ts | 2 + code/addons/links/package.json | 2 +- code/e2e-tests/addon-docs.spec.ts | 5 ++ code/frameworks/nextjs/package.json | 4 +- code/frameworks/react-vite/package.json | 4 +- code/frameworks/react-webpack5/package.json | 4 +- code/lib/cli/src/sandbox-templates.ts | 44 +++++++++++++ code/lib/react-dom-shim/package.json | 4 +- code/lib/theming/package.json | 4 +- code/presets/react-webpack/package.json | 4 +- code/renderers/react/package.json | 4 +- code/ui/blocks/package.json | 4 +- code/ui/blocks/src/components/Source.tsx | 5 +- code/ui/components/package.json | 4 +- .../src/components/form/field/field.tsx | 4 -- .../components/src/components/tabs/tabs.tsx | 21 ++----- .../src/components/tooltip/ListItem.tsx | 33 ++++------ .../src/components/tooltip/Tooltip.tsx | 18 +++--- .../components/tooltip/TooltipLinkList.tsx | 6 +- .../src/components/tooltip/TooltipMessage.tsx | 6 -- .../src/components/tooltip/WithTooltip.tsx | 62 ++++++++----------- code/yarn.lock | 38 ++++++------ scripts/sandbox/generate.ts | 2 +- scripts/utils/yarn.ts | 8 ++- 25 files changed, 157 insertions(+), 145 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index cb087540361f..0bf64cabe5c5 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -707,22 +707,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 35 + parallelism: 37 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 35 + parallelism: 37 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 32 + parallelism: 34 requires: - build-sandboxes - e2e-production: - parallelism: 30 + parallelism: 32 requires: - build-sandboxes - e2e-dev: @@ -730,7 +730,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 30 + parallelism: 32 requires: - build-sandboxes diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts index 91f12041962b..20095ec6164b 100644 --- a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts +++ b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts @@ -44,6 +44,8 @@ export default { docs: { name: 'ResolvedReact', }, + // the version string changes with every release of React/Next.js/Preact, not worth snapshotting + chromatic: { disable: true }, }, }; diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 9c90bc88dad8..454464461977 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -78,7 +78,7 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta" }, "peerDependenciesMeta": { "react": { diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index db7b7b7d5e05..477b02e83344 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -200,6 +200,11 @@ test.describe('addon-docs', () => { expectedReactVersionRange = /^17/; } else if (templateName.includes('react16')) { expectedReactVersionRange = /^16/; + } else if ( + templateName.includes('react-vite/prerelease') || + templateName.includes('react-webpack/prerelease') + ) { + expectedReactVersionRange = /^19/; } // Arrange - Get the actual versions diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index cec39425dfbb..c23fa8fcd224 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -133,8 +133,8 @@ }, "peerDependencies": { "next": "^13.5.0 || ^14.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "webpack": "^5.0.0" }, "peerDependenciesMeta": { diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 790a3dda0d14..969163bbe2a4 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -64,8 +64,8 @@ "vite": "^4.0.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "vite": "^4.0.0 || ^5.0.0" }, "engines": { diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 26cda18b82eb..ee74e49a9f8a 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -53,8 +53,8 @@ "@types/node": "^18.0.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "typescript": ">= 4.2.x" }, "peerDependenciesMeta": { diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 9d8a839bfcce..14d5fe69d675 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -201,6 +201,28 @@ const baseTemplates = { }, skipTasks: ['bench'], }, + 'react-vite/prerelease-ts': { + name: 'React Prerelease (Vite | TypeScript)', + /** + * 1. Create a Vite project with the React template + * 2. Add React beta versions + * 3. Add resolutions for @types/react and @types/react-dom, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing + * 4. Add @types/react and @types/react-dom pointing to the beta packages + */ + script: ` + npm create vite --yes {{beforeDir}} -- --template react-ts && \ + cd {{beforeDir}} && \ + yarn add react@beta react-dom@beta && \ + jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && \ + yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta + `, + expected: { + framework: '@storybook/react-vite', + renderer: '@storybook/react', + builder: '@storybook/builder-vite', + }, + skipTasks: ['e2e-tests-dev', 'bench'], + }, 'react-webpack/18-ts': { name: 'React Latest (Webpack | TypeScript)', script: 'yarn create webpack5-react {{beforeDir}}', @@ -222,6 +244,26 @@ const baseTemplates = { }, skipTasks: ['e2e-tests-dev', 'bench'], }, + 'react-webpack/prerelease-ts': { + name: 'React Prerelease (Webpack | TypeScript)', + /** + * 1. Create a Webpack project with React beta versions + * 3. Add resolutions for @types/react and @types/react-dom, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing + * 4. Add @types/react and @types/react-dom pointing to the beta packages + */ + script: ` + yarn create webpack5-react {{beforeDir}} --version-react="beta" --version-react-dom="beta" && \ + cd {{beforeDir}} && \ + jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && \ + yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta + `, + expected: { + framework: '@storybook/react-webpack5', + renderer: '@storybook/react', + builder: '@storybook/builder-webpack5', + }, + skipTasks: ['e2e-tests-dev', 'bench'], + }, 'solid-vite/default-js': { name: 'SolidJS Latest (Vite | JavaScript)', script: 'npx degit solidjs/templates/js {{beforeDir}}', @@ -628,6 +670,8 @@ export const daily: TemplateKey[] = [ 'angular-cli/prerelease', 'cra/default-js', 'react-vite/default-js', + 'react-vite/prerelease-ts', + 'react-webpack/prerelease-ts', 'vue3-vite/default-js', 'vue-cli/default-js', 'lit-vite/default-js', diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 2e1c57303912..72262e3d897a 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -58,8 +58,8 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta" }, "publishConfig": { "access": "public" diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index ac86abc70c74..750042b779e0 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -68,8 +68,8 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta" }, "peerDependenciesMeta": { "react": { diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 3e6c4c604930..0638c00806ca 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -84,8 +84,8 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta" }, "peerDependenciesMeta": { "typescript": { diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 0ed374db37fc..d1fe9aa189a1 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -80,8 +80,8 @@ "require-from-string": "^2.0.2" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "typescript": ">= 4.2.x" }, "peerDependenciesMeta": { diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 7960b52f3372..1c22756586c0 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -75,8 +75,8 @@ "@types/color-convert": "^2.0.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta" }, "peerDependenciesMeta": { "react": { diff --git a/code/ui/blocks/src/components/Source.tsx b/code/ui/blocks/src/components/Source.tsx index 5495d89c5981..76fb8f1c4f05 100644 --- a/code/ui/blocks/src/components/Source.tsx +++ b/code/ui/blocks/src/components/Source.tsx @@ -98,7 +98,7 @@ const Source: FunctionComponent = ({ language, code, dark, - format, + format = false, ...rest }) => { const { typography } = useTheme(); @@ -138,7 +138,4 @@ const Source: FunctionComponent = ({ ); }; -Source.defaultProps = { - format: false, -}; export { Source, StyledSyntaxHighlighter }; diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 033b794ae4dd..d7d928f5e313 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -86,8 +86,8 @@ "use-resize-observer": "^9.1.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta" }, "publishConfig": { "access": "public" diff --git a/code/ui/components/src/components/form/field/field.tsx b/code/ui/components/src/components/form/field/field.tsx index 19b21ae8d2f7..bf4e5f00c1db 100644 --- a/code/ui/components/src/components/form/field/field.tsx +++ b/code/ui/components/src/components/form/field/field.tsx @@ -38,7 +38,3 @@ export const Field = ({ label, children, ...props }: FieldProps) => ( {children} ); - -Field.defaultProps = { - label: undefined, -}; diff --git a/code/ui/components/src/components/tabs/tabs.tsx b/code/ui/components/src/components/tabs/tabs.tsx index 5b0cbb2b5612..dbd86e6bdf4e 100644 --- a/code/ui/components/src/components/tabs/tabs.tsx +++ b/code/ui/components/src/components/tabs/tabs.tsx @@ -134,14 +134,14 @@ export interface TabsProps { export const Tabs: FC = memo( ({ children, - selected, + selected = null, actions, - absolute, - bordered, - tools, + absolute = false, + bordered = false, + tools = null, backgroundColor, - id: htmlId, - menuName, + id: htmlId = null, + menuName = 'Tabs', emptyState, showToolsWhenEmpty, }) => { @@ -211,15 +211,6 @@ export const Tabs: FC = memo( } ); Tabs.displayName = 'Tabs'; -Tabs.defaultProps = { - id: null, - children: null, - tools: null, - selected: null, - absolute: false, - bordered: false, - menuName: 'Tabs', -}; export interface TabsStateProps { children: TabsProps['children']; diff --git a/code/ui/components/src/components/tooltip/ListItem.tsx b/code/ui/components/src/components/tooltip/ListItem.tsx index 34921e65d5ae..5d5ebf763b99 100644 --- a/code/ui/components/src/components/tooltip/ListItem.tsx +++ b/code/ui/components/src/components/tooltip/ListItem.tsx @@ -186,17 +186,18 @@ export interface ListItemProps extends Omit, 'href' } const ListItem = ({ - loading, - title, - center, - right, - icon, - active, - disabled, + loading = false, + title = Loading state, + center = null, + right = null, + + active = false, + disabled = false, isIndented, - href, - onClick, - LinkWrapper, + href = null, + onClick = null, + icon, + LinkWrapper = null, ...rest }: ListItemProps) => { const itemProps = getItemProps(onClick, href, LinkWrapper); @@ -220,16 +221,4 @@ const ListItem = ({ ); }; -ListItem.defaultProps = { - loading: false, - title: Loading state, - center: null, - right: null, - active: false, - disabled: false, - href: null, - LinkWrapper: null, - onClick: null, -}; - export default ListItem; diff --git a/code/ui/components/src/components/tooltip/Tooltip.tsx b/code/ui/components/src/components/tooltip/Tooltip.tsx index d4ccde5e41df..6f14a148bfeb 100644 --- a/code/ui/components/src/components/tooltip/Tooltip.tsx +++ b/code/ui/components/src/components/tooltip/Tooltip.tsx @@ -126,7 +126,16 @@ export interface TooltipProps { export const Tooltip = React.forwardRef( ( - { placement, hasChrome, children, arrowProps, tooltipRef, color, withArrows, ...props }, + { + placement = 'top', + hasChrome = true, + children, + arrowProps = {}, + tooltipRef, + color, + withArrows, + ...props + }, ref ) => { return ( @@ -139,10 +148,3 @@ export const Tooltip = React.forwardRef( ); Tooltip.displayName = 'Tooltip'; -Tooltip.defaultProps = { - color: undefined, - tooltipRef: undefined, - hasChrome: true, - placement: 'top', - arrowProps: {}, -}; diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx index 8c9d1b6564ad..fcb88ca25545 100644 --- a/code/ui/components/src/components/tooltip/TooltipLinkList.tsx +++ b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx @@ -58,7 +58,7 @@ export interface TooltipLinkListProps { LinkWrapper?: LinkWrapperType; } -export const TooltipLinkList = ({ links, LinkWrapper }: TooltipLinkListProps) => { +export const TooltipLinkList = ({ links, LinkWrapper = null }: TooltipLinkListProps) => { const hasIcon = links.some((link) => link.icon); return ( @@ -68,7 +68,3 @@ export const TooltipLinkList = ({ links, LinkWrapper }: TooltipLinkListProps) => ); }; - -TooltipLinkList.defaultProps = { - LinkWrapper: ListItem.defaultProps.LinkWrapper, -}; diff --git a/code/ui/components/src/components/tooltip/TooltipMessage.tsx b/code/ui/components/src/components/tooltip/TooltipMessage.tsx index 1e47bb5481f5..7da93fc1474d 100644 --- a/code/ui/components/src/components/tooltip/TooltipMessage.tsx +++ b/code/ui/components/src/components/tooltip/TooltipMessage.tsx @@ -60,9 +60,3 @@ export const TooltipMessage = ({ title, desc, links }: TooltipMessageProps) => { ); }; - -TooltipMessage.defaultProps = { - title: null, - desc: null, - links: null, -}; diff --git a/code/ui/components/src/components/tooltip/WithTooltip.tsx b/code/ui/components/src/components/tooltip/WithTooltip.tsx index a95db5d76af2..b14015aa0d10 100644 --- a/code/ui/components/src/components/tooltip/WithTooltip.tsx +++ b/code/ui/components/src/components/tooltip/WithTooltip.tsx @@ -45,23 +45,42 @@ export interface WithTooltipPureProps // Pure, does not bind to the body const WithTooltipPure = ({ - svg, - trigger, - closeOnOutsideClick, - placement, - hasChrome, + svg = false, + trigger = 'click', + closeOnOutsideClick = false, + placement = 'top', + modifiers = [ + { + name: 'preventOverflow', + options: { + padding: 8, + }, + }, + { + name: 'offset', + options: { + offset: [8, 8], + }, + }, + { + name: 'arrow', + options: { + padding: 8, + }, + }, + ], + hasChrome = true, + defaultVisible = false, withArrows, offset, tooltip, children, closeOnTriggerHidden, mutationObserverOptions, - defaultVisible, delayHide, visible, interactive, delayShow, - modifiers, strategy, followCursor, onVisibleChange, @@ -120,35 +139,6 @@ const WithTooltipPure = ({ ); }; -WithTooltipPure.defaultProps = { - svg: false, - trigger: 'click', - closeOnOutsideClick: false, - placement: 'top', - modifiers: [ - { - name: 'preventOverflow', - options: { - padding: 8, - }, - }, - { - name: 'offset', - options: { - offset: [8, 8], - }, - }, - { - name: 'arrow', - options: { - padding: 8, - }, - }, - ], - hasChrome: true, - defaultVisible: false, -}; - export interface WithTooltipStateProps extends Omit { startOpen?: boolean; onVisibleChange?: (visible: boolean) => void | boolean; diff --git a/code/yarn.lock b/code/yarn.lock index 0cbe0b24d755..196f94e79529 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5329,7 +5329,7 @@ __metadata: ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta peerDependenciesMeta: react: optional: true @@ -5610,8 +5610,8 @@ __metadata: ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta peerDependenciesMeta: react: optional: true @@ -5874,8 +5874,8 @@ __metadata: use-resize-observer: "npm:^9.1.0" util-deprecate: "npm:^1.0.2" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta languageName: unknown linkType: soft @@ -6378,8 +6378,8 @@ __metadata: webpack: "npm:^5.65.0" peerDependencies: next: ^13.5.0 || ^14.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta webpack: ^5.0.0 dependenciesMeta: sharp: @@ -6514,8 +6514,8 @@ __metadata: typescript: "npm:^5.3.2" webpack: "npm:5" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta peerDependenciesMeta: typescript: optional: true @@ -6641,8 +6641,8 @@ __metadata: "@storybook/types": "workspace:*" typescript: "npm:^5.3.2" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta languageName: unknown linkType: soft @@ -6664,8 +6664,8 @@ __metadata: typescript: "npm:^5.3.2" vite: "npm:^4.0.0" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta vite: ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -6679,8 +6679,8 @@ __metadata: "@storybook/react": "workspace:*" "@types/node": "npm:^18.0.0" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta typescript: ">= 4.2.x" peerDependenciesMeta: typescript: @@ -6721,8 +6721,8 @@ __metadata: type-fest: "npm:~2.19" util-deprecate: "npm:^1.0.2" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta typescript: ">= 4.2.x" peerDependenciesMeta: typescript: @@ -7103,8 +7103,8 @@ __metadata: ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta peerDependenciesMeta: react: optional: true diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index 410d49373d93..66d458f5eb71 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -166,7 +166,7 @@ const runGenerators = async ( else if (expected.renderer === '@storybook/server') flags = ['--type server']; const time = process.hrtime(); - console.log(`🧬 Generating ${name} (${{ dirName }})`); + console.log(`🧬 Generating ${name} (${dirName})`); await emptyDir(baseDir); // We do the creation inside a temp dir to avoid yarn container problems diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts index a2fb82e1fa6a..dd261eb851d2 100644 --- a/scripts/utils/yarn.ts +++ b/scripts/utils/yarn.ts @@ -22,6 +22,7 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => { const packageJsonPath = path.join(cwd, 'package.json'); const packageJson = await readJSON(packageJsonPath); packageJson.resolutions = { + ...packageJson.resolutions, ...storybookVersions, 'enhanced-resolve': '~5.10.0', // TODO, remove this // this is for our CI test, ensure we use the same version as docker image, it should match version specified in `./code/package.json` and `.circleci/config.yml` @@ -97,7 +98,12 @@ export const configureYarn2ForVerdaccio = async ({ `yarn config set enableImmutableInstalls false`, ]; - if (key.includes('svelte-kit')) { + if ( + key.includes('svelte-kit') || + // React prereleases will have INCOMPATIBLE_PEER_DEPENDENCY errors because of transitive dependencies not allowing v19 betas + key.includes('react-vite/prerelease') || + key.includes('react-webpack/prerelease') + ) { // Don't error with INCOMPATIBLE_PEER_DEPENDENCY for SvelteKit sandboxes, it is expected to happen with @sveltejs/vite-plugin-svelte command.push( `yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'`