diff --git a/.circleci/config.yml b/.circleci/config.yml index d9846f300ccb..c71bbbbae66b 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -768,22 +768,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: @@ -791,7 +791,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 30 + parallelism: 32 requires: - build-sandboxes - test-portable-stories: 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 c19d89b78b0a..82e7cf58c661 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -82,7 +82,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 2713892fd042..b8b20bb46455 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 5d4153a44fb9..5a4b57c27147 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -173,8 +173,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 02a50462eace..3ed608685398 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 4ef8b479e4f6..14e6a4b5a7f3 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 35b3bd868d21..b44f8341c973 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 d0b87b51c0c8..c41b86347437 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 33e1c1abc278..e698647ccd60 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 c71f8628de5e..640dab799161 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -86,8 +86,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 3369d91ea08e..23b32ad5cbae 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 b1ceb03faa85..3877318fc6e7 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -87,8 +87,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 3d90fb3f9e58..de3eb731d3be 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, }) => { @@ -206,15 +206,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 c15614efb882..b75fd6be50c4 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5333,7 +5333,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 @@ -5614,8 +5614,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 @@ -5879,8 +5879,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 @@ -6373,8 +6373,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: @@ -6510,8 +6510,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 @@ -6637,8 +6637,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 @@ -6660,8 +6660,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 @@ -6675,8 +6675,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: @@ -6717,8 +6717,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 bc71a1433441..8f11b3a7a4db 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -163,7 +163,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" } ]'`