From 9f7ca74a93d2f06294bac11f4f7fcddddaee0ad2 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 26 Apr 2024 09:36:26 +0200 Subject: [PATCH 01/11] add react prerelease sandbox templates --- code/lib/cli/src/sandbox-templates.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 9d8a839bfcce..8457b55b43e8 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -201,6 +201,17 @@ const baseTemplates = { }, skipTasks: ['bench'], }, + 'react-vite/prerelease-ts': { + name: 'React Prerelease (Vite | TypeScript)', + script: + 'npm create vite --yes {{beforeDir}} -- --template react-ts && cd {{beforeDir}} && yarn add react@next react-dom@next', + expected: { + framework: '@storybook/react-vite', + renderer: '@storybook/react', + builder: '@storybook/builder-vite', + }, + skipTasks: ['bench'], + }, 'react-webpack/18-ts': { name: 'React Latest (Webpack | TypeScript)', script: 'yarn create webpack5-react {{beforeDir}}', @@ -222,6 +233,17 @@ const baseTemplates = { }, skipTasks: ['e2e-tests-dev', 'bench'], }, + 'react-webpack/prerelease-ts': { + name: 'React Prerelease (Webpack | TypeScript)', + script: + 'yarn create webpack5-react {{beforeDir}} --version-react="next" --version-react-dom="next"', + 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}}', From bc44d82de569ac69991ce7741395efe66128bce4 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 26 Apr 2024 10:03:37 +0200 Subject: [PATCH 02/11] disable snapshots for ResolvedReact stories --- .../docs/template/stories/docs2/resolved-react.stories.ts | 2 ++ 1 file changed, 2 insertions(+) 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..2acdd32b11e4 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 + chromat: { disable: true }, }, }; From 5d8fd432b77d2b3b4c2f4f94e21ae48a5b1507c7 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 26 Apr 2024 10:08:31 +0200 Subject: [PATCH 03/11] adjust ci parallelism --- .circleci/config.yml | 10 +++++----- code/lib/cli/src/sandbox-templates.ts | 4 +++- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index ad07b40429a4..59ea2ea028de 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/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 8457b55b43e8..d1b2c6e15f95 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -210,7 +210,7 @@ const baseTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-vite', }, - skipTasks: ['bench'], + skipTasks: ['e2e-tests-dev', 'bench'], }, 'react-webpack/18-ts': { name: 'React Latest (Webpack | TypeScript)', @@ -650,6 +650,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', From d6f80324028b873e01b2115055992e74cb44d37a Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 26 Apr 2024 10:38:47 +0200 Subject: [PATCH 04/11] allow react 19 betas in packages' peer dependencies --- code/addons/links/package.json | 2 +- code/frameworks/nextjs/package.json | 4 +-- code/frameworks/react-vite/package.json | 4 +-- code/frameworks/react-webpack5/package.json | 4 +-- 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/components/package.json | 4 +-- code/yarn.lock | 38 ++++++++++----------- 11 files changed, 38 insertions(+), 38 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index cbe50306d3f7..0e5fa4263710 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/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 65aebaa66c60..d6bf931dee32 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 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/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 edae82e2f19d..bcafaf40f5ab 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/components/package.json b/code/ui/components/package.json index 200b81381b85..414b09460a27 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/yarn.lock b/code/yarn.lock index 9af4e4c2f3fd..c5931988a11e 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5150,7 +5150,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 @@ -5431,8 +5431,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 @@ -5695,8 +5695,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 @@ -6185,8 +6185,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: @@ -6322,8 +6322,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 @@ -6449,8 +6449,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 @@ -6472,8 +6472,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 @@ -6487,8 +6487,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: @@ -6529,8 +6529,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: @@ -6915,8 +6915,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 From e24483045d40366033be23457e85a5ba2c395d64 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 26 Apr 2024 10:48:43 +0200 Subject: [PATCH 05/11] use beta instead of next react version --- code/lib/cli/src/sandbox-templates.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index d1b2c6e15f95..1d1aeaf8ee03 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -204,7 +204,7 @@ const baseTemplates = { 'react-vite/prerelease-ts': { name: 'React Prerelease (Vite | TypeScript)', script: - 'npm create vite --yes {{beforeDir}} -- --template react-ts && cd {{beforeDir}} && yarn add react@next react-dom@next', + 'npm create vite --yes {{beforeDir}} -- --template react-ts && cd {{beforeDir}} && yarn add react@beta react-dom@beta', expected: { framework: '@storybook/react-vite', renderer: '@storybook/react', @@ -236,7 +236,7 @@ const baseTemplates = { 'react-webpack/prerelease-ts': { name: 'React Prerelease (Webpack | TypeScript)', script: - 'yarn create webpack5-react {{beforeDir}} --version-react="next" --version-react-dom="next"', + 'yarn create webpack5-react {{beforeDir}} --version-react="beta" --version-react-dom="beta"', expected: { framework: '@storybook/react-webpack5', renderer: '@storybook/react', From 88253e458bdcfb7cb895d9d76a2f36842e2531bd Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 3 May 2024 23:49:36 +0200 Subject: [PATCH 06/11] add react 19 types resolutions, allow peer dep problems in prereleases. --- .../stories/docs2/resolved-react.stories.ts | 2 +- code/lib/cli/src/sandbox-templates.ts | 15 +++++++++++++-- scripts/sandbox/generate.ts | 2 +- scripts/utils/yarn.ts | 3 ++- 4 files changed, 17 insertions(+), 5 deletions(-) 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 2acdd32b11e4..20095ec6164b 100644 --- a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts +++ b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts @@ -45,7 +45,7 @@ export default { name: 'ResolvedReact', }, // the version string changes with every release of React/Next.js/Preact, not worth snapshotting - chromat: { disable: true }, + chromatic: { disable: true }, }, }; diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 1d1aeaf8ee03..5f2ff4634c02 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -203,8 +203,19 @@ const baseTemplates = { }, 'react-vite/prerelease-ts': { name: 'React Prerelease (Vite | TypeScript)', - script: - 'npm create vite --yes {{beforeDir}} -- --template react-ts && cd {{beforeDir}} && yarn add react@beta react-dom@beta', + /** + * 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', 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..03b05ff3bf40 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,7 @@ export const configureYarn2ForVerdaccio = async ({ `yarn config set enableImmutableInstalls false`, ]; - if (key.includes('svelte-kit')) { + if (key.includes('svelte-kit') || key.includes('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" } ]'` From bd1f0cbc6bd0ae8e32cd561d0ef39a0c93f1297d Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sun, 5 May 2024 15:30:13 +0200 Subject: [PATCH 07/11] expect React 19 in react prerelease sandboxes --- code/e2e-tests/addon-docs.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index 2713892fd042..5fd470dc81b2 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -200,6 +200,8 @@ test.describe('addon-docs', () => { expectedReactVersionRange = /^17/; } else if (templateName.includes('react16')) { expectedReactVersionRange = /^16/; + } else if (templateName.includes('prerelease')) { + expectedReactVersionRange = /^19/; } // Arrange - Get the actual versions From 206e6ec62cdfdc059661fd7bf6865f2d1f0d8138 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sun, 5 May 2024 17:21:51 +0200 Subject: [PATCH 08/11] dont be stupid now --- code/e2e-tests/addon-docs.spec.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index 5fd470dc81b2..b8b20bb46455 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -200,7 +200,10 @@ test.describe('addon-docs', () => { expectedReactVersionRange = /^17/; } else if (templateName.includes('react16')) { expectedReactVersionRange = /^16/; - } else if (templateName.includes('prerelease')) { + } else if ( + templateName.includes('react-vite/prerelease') || + templateName.includes('react-webpack/prerelease') + ) { expectedReactVersionRange = /^19/; } From 6b2023618845bada7099b5baf1abb7196ec4fa9d Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sun, 5 May 2024 21:15:35 +0200 Subject: [PATCH 09/11] convert defaultProps to default assignments in functional components. --- code/ui/blocks/src/components/Source.tsx | 5 +- .../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 ++++++++----------- 8 files changed, 55 insertions(+), 100 deletions(-) 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/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; From 74afbb131ea1988c21c14ae270509a4b92b997f9 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 6 May 2024 13:37:19 +0200 Subject: [PATCH 10/11] add react types resolutions to react-webpack/prerelease template. --- code/lib/cli/src/sandbox-templates.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 5f2ff4634c02..14d5fe69d675 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -246,8 +246,17 @@ const baseTemplates = { }, 'react-webpack/prerelease-ts': { name: 'React Prerelease (Webpack | TypeScript)', - script: - 'yarn create webpack5-react {{beforeDir}} --version-react="beta" --version-react-dom="beta"', + /** + * 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', From 638b96a33e68d6339433cafcc48b1edb8bdb5276 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 6 May 2024 15:41:47 +0200 Subject: [PATCH 11/11] only allow peer dependency errors in react prereleases --- scripts/utils/yarn.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts index 03b05ff3bf40..dd261eb851d2 100644 --- a/scripts/utils/yarn.ts +++ b/scripts/utils/yarn.ts @@ -98,7 +98,12 @@ export const configureYarn2ForVerdaccio = async ({ `yarn config set enableImmutableInstalls false`, ]; - if (key.includes('svelte-kit') || key.includes('prerelease')) { + 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" } ]'`