diff --git a/.circleci/config.yml b/.circleci/config.yml index 1171aba46fe1..5e7b5f1f1e07 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -223,7 +223,7 @@ jobs: # if there is a base branch AND a PR number in parameters, benchmark packages against those # this happens when run against a PR - when: - condition: + condition: and: - << pipeline.parameters.ghBaseBranch >> - << pipeline.parameters.ghPrNumber >> @@ -256,9 +256,9 @@ jobs: sleep 2 done yarn bench-packages --upload - - store_artifacts: + - store_artifacts: path: bench/packages/results.json - - store_artifacts: + - store_artifacts: path: bench/packages/compare-with-<< pipeline.parameters.ghBaseBranch >>.json - report-workflow-on-failure - cancel-workflow-on-failure @@ -980,22 +980,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 38 + parallelism: 37 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 38 + parallelism: 37 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 35 + parallelism: 34 requires: - build-sandboxes - e2e-production: - parallelism: 33 + parallelism: 32 requires: - build-sandboxes - e2e-dev: @@ -1003,7 +1003,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 33 + parallelism: 32 requires: - build-sandboxes - vitest-integration: diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 597322a9ce2a..29827f7c8cf0 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,8 @@ +## 8.5.0-alpha.4 + +- Next.js: Add support for Next 15 - [#29587](https://github.com/storybookjs/storybook/pull/29587), thanks @yannbf! +- UI: Add Yarn to About Section - [#29225](https://github.com/storybookjs/storybook/pull/29225), thanks @grantwforsythe! + ## 8.5.0-alpha.3 - Addon Test: Fix post-install logic for Next.js Vite framework support - [#29524](https://github.com/storybookjs/storybook/pull/29524), thanks @valentinpalkovic! diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 750e10416ed8..f2255f27646d 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index d8e3c09e3677..eb68f20956af 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index ed8837847325..324301ba10c0 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 429aa10bfe5c..7735f5a65c69 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index cd8352d5247a..53c2aace7a3f 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index d83ad0bd8a3e..eb6fe4feceeb 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 8e4c51ba31d1..3c8f1f3752bf 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 8fefc078ae48..f1c2a43d4f86 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 6611a51119bb..1b856080c8b1 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 4bbbd808658a..9ce8e6de8c97 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 7811c108d2a7..38b9f5565bd9 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 1f662322a90e..5b9b1563147c 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 0913e5da9cc5..b7b934843795 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index bef947388da9..3d875f435dc5 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 374e797bc5ea..265ea0e97e8e 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index b778853351e5..162999ba7725 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 5fd65ba89a0c..dd3050c07fb8 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index b99a65fe8cad..7192da5dfe54 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 9bcdf2aff652..25d096cc2076 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 594e1c57e74e..203d1a2ed75e 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 6a122437e617..5a28ef68119a 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index 919e462ebd30..9418fe776214 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 9d0225f6f352..c171c67cf165 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,87 +1,87 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.5.0-alpha.3', - '@storybook/addon-actions': '8.5.0-alpha.3', - '@storybook/addon-backgrounds': '8.5.0-alpha.3', - '@storybook/addon-controls': '8.5.0-alpha.3', - '@storybook/addon-docs': '8.5.0-alpha.3', - '@storybook/addon-essentials': '8.5.0-alpha.3', - '@storybook/addon-mdx-gfm': '8.5.0-alpha.3', - '@storybook/addon-highlight': '8.5.0-alpha.3', - '@storybook/addon-interactions': '8.5.0-alpha.3', - '@storybook/addon-jest': '8.5.0-alpha.3', - '@storybook/addon-links': '8.5.0-alpha.3', - '@storybook/addon-measure': '8.5.0-alpha.3', - '@storybook/addon-onboarding': '8.5.0-alpha.3', - '@storybook/addon-outline': '8.5.0-alpha.3', - '@storybook/addon-storysource': '8.5.0-alpha.3', - '@storybook/experimental-addon-test': '8.5.0-alpha.3', - '@storybook/addon-themes': '8.5.0-alpha.3', - '@storybook/addon-toolbars': '8.5.0-alpha.3', - '@storybook/addon-viewport': '8.5.0-alpha.3', - '@storybook/builder-vite': '8.5.0-alpha.3', - '@storybook/builder-webpack5': '8.5.0-alpha.3', - '@storybook/core': '8.5.0-alpha.3', - '@storybook/builder-manager': '8.5.0-alpha.3', - '@storybook/channels': '8.5.0-alpha.3', - '@storybook/client-logger': '8.5.0-alpha.3', - '@storybook/components': '8.5.0-alpha.3', - '@storybook/core-common': '8.5.0-alpha.3', - '@storybook/core-events': '8.5.0-alpha.3', - '@storybook/core-server': '8.5.0-alpha.3', - '@storybook/csf-tools': '8.5.0-alpha.3', - '@storybook/docs-tools': '8.5.0-alpha.3', - '@storybook/manager': '8.5.0-alpha.3', - '@storybook/manager-api': '8.5.0-alpha.3', - '@storybook/node-logger': '8.5.0-alpha.3', - '@storybook/preview': '8.5.0-alpha.3', - '@storybook/preview-api': '8.5.0-alpha.3', - '@storybook/router': '8.5.0-alpha.3', - '@storybook/telemetry': '8.5.0-alpha.3', - '@storybook/theming': '8.5.0-alpha.3', - '@storybook/types': '8.5.0-alpha.3', - '@storybook/angular': '8.5.0-alpha.3', - '@storybook/ember': '8.5.0-alpha.3', - '@storybook/experimental-nextjs-vite': '8.5.0-alpha.3', - '@storybook/html-vite': '8.5.0-alpha.3', - '@storybook/html-webpack5': '8.5.0-alpha.3', - '@storybook/nextjs': '8.5.0-alpha.3', - '@storybook/preact-vite': '8.5.0-alpha.3', - '@storybook/preact-webpack5': '8.5.0-alpha.3', - '@storybook/react-vite': '8.5.0-alpha.3', - '@storybook/react-webpack5': '8.5.0-alpha.3', - '@storybook/server-webpack5': '8.5.0-alpha.3', - '@storybook/svelte-vite': '8.5.0-alpha.3', - '@storybook/svelte-webpack5': '8.5.0-alpha.3', - '@storybook/sveltekit': '8.5.0-alpha.3', - '@storybook/vue3-vite': '8.5.0-alpha.3', - '@storybook/vue3-webpack5': '8.5.0-alpha.3', - '@storybook/web-components-vite': '8.5.0-alpha.3', - '@storybook/web-components-webpack5': '8.5.0-alpha.3', - '@storybook/blocks': '8.5.0-alpha.3', - storybook: '8.5.0-alpha.3', - sb: '8.5.0-alpha.3', - '@storybook/cli': '8.5.0-alpha.3', - '@storybook/codemod': '8.5.0-alpha.3', - '@storybook/core-webpack': '8.5.0-alpha.3', - 'create-storybook': '8.5.0-alpha.3', - '@storybook/csf-plugin': '8.5.0-alpha.3', - '@storybook/instrumenter': '8.5.0-alpha.3', - '@storybook/react-dom-shim': '8.5.0-alpha.3', - '@storybook/source-loader': '8.5.0-alpha.3', - '@storybook/test': '8.5.0-alpha.3', - '@storybook/preset-create-react-app': '8.5.0-alpha.3', - '@storybook/preset-html-webpack': '8.5.0-alpha.3', - '@storybook/preset-preact-webpack': '8.5.0-alpha.3', - '@storybook/preset-react-webpack': '8.5.0-alpha.3', - '@storybook/preset-server-webpack': '8.5.0-alpha.3', - '@storybook/preset-svelte-webpack': '8.5.0-alpha.3', - '@storybook/preset-vue3-webpack': '8.5.0-alpha.3', - '@storybook/html': '8.5.0-alpha.3', - '@storybook/preact': '8.5.0-alpha.3', - '@storybook/react': '8.5.0-alpha.3', - '@storybook/server': '8.5.0-alpha.3', - '@storybook/svelte': '8.5.0-alpha.3', - '@storybook/vue3': '8.5.0-alpha.3', - '@storybook/web-components': '8.5.0-alpha.3', + '@storybook/addon-a11y': '8.5.0-alpha.4', + '@storybook/addon-actions': '8.5.0-alpha.4', + '@storybook/addon-backgrounds': '8.5.0-alpha.4', + '@storybook/addon-controls': '8.5.0-alpha.4', + '@storybook/addon-docs': '8.5.0-alpha.4', + '@storybook/addon-essentials': '8.5.0-alpha.4', + '@storybook/addon-mdx-gfm': '8.5.0-alpha.4', + '@storybook/addon-highlight': '8.5.0-alpha.4', + '@storybook/addon-interactions': '8.5.0-alpha.4', + '@storybook/addon-jest': '8.5.0-alpha.4', + '@storybook/addon-links': '8.5.0-alpha.4', + '@storybook/addon-measure': '8.5.0-alpha.4', + '@storybook/addon-onboarding': '8.5.0-alpha.4', + '@storybook/addon-outline': '8.5.0-alpha.4', + '@storybook/addon-storysource': '8.5.0-alpha.4', + '@storybook/experimental-addon-test': '8.5.0-alpha.4', + '@storybook/addon-themes': '8.5.0-alpha.4', + '@storybook/addon-toolbars': '8.5.0-alpha.4', + '@storybook/addon-viewport': '8.5.0-alpha.4', + '@storybook/builder-vite': '8.5.0-alpha.4', + '@storybook/builder-webpack5': '8.5.0-alpha.4', + '@storybook/core': '8.5.0-alpha.4', + '@storybook/builder-manager': '8.5.0-alpha.4', + '@storybook/channels': '8.5.0-alpha.4', + '@storybook/client-logger': '8.5.0-alpha.4', + '@storybook/components': '8.5.0-alpha.4', + '@storybook/core-common': '8.5.0-alpha.4', + '@storybook/core-events': '8.5.0-alpha.4', + '@storybook/core-server': '8.5.0-alpha.4', + '@storybook/csf-tools': '8.5.0-alpha.4', + '@storybook/docs-tools': '8.5.0-alpha.4', + '@storybook/manager': '8.5.0-alpha.4', + '@storybook/manager-api': '8.5.0-alpha.4', + '@storybook/node-logger': '8.5.0-alpha.4', + '@storybook/preview': '8.5.0-alpha.4', + '@storybook/preview-api': '8.5.0-alpha.4', + '@storybook/router': '8.5.0-alpha.4', + '@storybook/telemetry': '8.5.0-alpha.4', + '@storybook/theming': '8.5.0-alpha.4', + '@storybook/types': '8.5.0-alpha.4', + '@storybook/angular': '8.5.0-alpha.4', + '@storybook/ember': '8.5.0-alpha.4', + '@storybook/experimental-nextjs-vite': '8.5.0-alpha.4', + '@storybook/html-vite': '8.5.0-alpha.4', + '@storybook/html-webpack5': '8.5.0-alpha.4', + '@storybook/nextjs': '8.5.0-alpha.4', + '@storybook/preact-vite': '8.5.0-alpha.4', + '@storybook/preact-webpack5': '8.5.0-alpha.4', + '@storybook/react-vite': '8.5.0-alpha.4', + '@storybook/react-webpack5': '8.5.0-alpha.4', + '@storybook/server-webpack5': '8.5.0-alpha.4', + '@storybook/svelte-vite': '8.5.0-alpha.4', + '@storybook/svelte-webpack5': '8.5.0-alpha.4', + '@storybook/sveltekit': '8.5.0-alpha.4', + '@storybook/vue3-vite': '8.5.0-alpha.4', + '@storybook/vue3-webpack5': '8.5.0-alpha.4', + '@storybook/web-components-vite': '8.5.0-alpha.4', + '@storybook/web-components-webpack5': '8.5.0-alpha.4', + '@storybook/blocks': '8.5.0-alpha.4', + storybook: '8.5.0-alpha.4', + sb: '8.5.0-alpha.4', + '@storybook/cli': '8.5.0-alpha.4', + '@storybook/codemod': '8.5.0-alpha.4', + '@storybook/core-webpack': '8.5.0-alpha.4', + 'create-storybook': '8.5.0-alpha.4', + '@storybook/csf-plugin': '8.5.0-alpha.4', + '@storybook/instrumenter': '8.5.0-alpha.4', + '@storybook/react-dom-shim': '8.5.0-alpha.4', + '@storybook/source-loader': '8.5.0-alpha.4', + '@storybook/test': '8.5.0-alpha.4', + '@storybook/preset-create-react-app': '8.5.0-alpha.4', + '@storybook/preset-html-webpack': '8.5.0-alpha.4', + '@storybook/preset-preact-webpack': '8.5.0-alpha.4', + '@storybook/preset-react-webpack': '8.5.0-alpha.4', + '@storybook/preset-server-webpack': '8.5.0-alpha.4', + '@storybook/preset-svelte-webpack': '8.5.0-alpha.4', + '@storybook/preset-vue3-webpack': '8.5.0-alpha.4', + '@storybook/html': '8.5.0-alpha.4', + '@storybook/preact': '8.5.0-alpha.4', + '@storybook/react': '8.5.0-alpha.4', + '@storybook/server': '8.5.0-alpha.4', + '@storybook/svelte': '8.5.0-alpha.4', + '@storybook/vue3': '8.5.0-alpha.4', + '@storybook/web-components': '8.5.0-alpha.4', }; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 238310acedb1..676a915225db 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.5.0-alpha.3'; +export const version = '8.5.0-alpha.4'; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 4ad08c09b4a3..99cf7b69f5ab 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 688873156e9e..73e90def6016 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index 384ad1432a6a..5c50ce5f2fc2 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index d1750b8c4f81..3eb77ebc45f0 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index d5818575ff0f..25870e6f68d5 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index de869d70f4aa..1b0309793389 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index e3ec83f93258..9b2314f3b939 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index bace85c54878..6498825c9964 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 9ab05de3b587..9c222c71f920 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index f7c8cf3a6a61..b8622c287b5e 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index 83213deaa9e1..6e14f0bf6563 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 9c151e1d8bdf..75cc334b42ed 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index 528f533d8c30..b431d7a50190 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index a2d6f5c49da8..d790273912d6 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index 9550874baceb..d15920b95b2a 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index 320be1c21042..31af77e89529 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index e47ea4acac35..3ed18f3becc7 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index 906b18452bce..1c632ef6aa99 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index 94548af7b3f9..99b22d1d2e85 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -189,6 +189,10 @@ test.describe('addon-docs', () => { }); test('should resolve react to the correct version', async ({ page }) => { + test.skip( + templateName?.includes('nextjs'), + 'TODO: remove this once sandboxes are synced (SOON!!)' + ); // Arrange - Navigate to MDX docs const sbPage = new SbPage(page, expect); await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'mdx', 'docs'); @@ -201,6 +205,7 @@ test.describe('addon-docs', () => { } else if (templateName.includes('react16')) { expectedReactVersionRange = /^16/; } else if ( + templateName.includes('nextjs/default-ts') || templateName.includes('nextjs/prerelease') || templateName.includes('react-vite/prerelease') || templateName.includes('react-webpack/prerelease') diff --git a/code/e2e-tests/framework-nextjs.spec.ts b/code/e2e-tests/framework-nextjs.spec.ts index 27d7ab16ac43..9e426e26709b 100644 --- a/code/e2e-tests/framework-nextjs.spec.ts +++ b/code/e2e-tests/framework-nextjs.spec.ts @@ -53,10 +53,7 @@ test.describe('Next.js', () => { test.beforeEach(async ({ page }) => { sbPage = new SbPage(page, expect); - await sbPage.navigateToStory( - 'stories/frameworks/nextjs-nextjs-default-ts/Navigation', - 'default' - ); + await sbPage.navigateToStory('stories/frameworks/nextjs/Navigation', 'default'); root = sbPage.previewRoot(); }); @@ -88,7 +85,7 @@ test.describe('Next.js', () => { test.beforeEach(async ({ page }) => { sbPage = new SbPage(page, expect); - await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-ts/Router', 'default'); + await sbPage.navigateToStory('stories/frameworks/nextjs/Router', 'default'); root = sbPage.previewRoot(); }); diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 58cd68aceb7f..6856b48e1565 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index fa337ddf6016..57ff0c9433fc 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index b7e1d2dc4d1e..b345971f51fb 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 1d2c28e55d49..ba9564a778a5 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index c906836614ac..daf023d269bd 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 79bc3f6613ee..90c7ef2f3699 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.5.0-alpha.3", + "version": "8.5.0-alpha.4", "description": "Storybook for Next.js", "keywords": [ "storybook", @@ -57,6 +57,11 @@ "import": "./dist/compatibility/redirect-status-code.compat.mjs", "require": "./dist/compatibility/redirect-status-code.compat.js" }, + "./dist/compatibility/draft-mode.compat": { + "types": "./dist/compatibility/draft-mode.compat.d.ts", + "import": "./dist/compatibility/draft-mode.compat.mjs", + "require": "./dist/compatibility/draft-mode.compat.js" + }, "./export-mocks": { "types": "./dist/export-mocks/index.d.ts", "import": "./dist/export-mocks/index.mjs", @@ -171,12 +176,12 @@ "@types/babel__preset-env": "^7", "@types/loader-utils": "^2.0.5", "@types/react-refresh": "^0", - "next": "^14.1.0", + "next": "^15.0.3", "typescript": "^5.3.2", "webpack": "^5.65.0" }, "peerDependencies": { - "next": "^13.5.0 || ^14.0.0", + "next": "^13.5.0 || ^14.0.0 || ^15.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", "storybook": "workspace:^", @@ -212,6 +217,7 @@ "./src/export-mocks/navigation/index.ts", "./src/compatibility/segment.compat.ts", "./src/compatibility/redirect-status-code.compat.ts", + "./src/compatibility/draft-mode.compat.ts", "./src/next-image-loader-stub.ts", "./src/images/decorator.tsx", "./src/images/next-legacy-image.tsx", diff --git a/code/frameworks/nextjs/src/aliases/webpack.ts b/code/frameworks/nextjs/src/aliases/webpack.ts index ceacfa541a29..b5a9715505f4 100644 --- a/code/frameworks/nextjs/src/aliases/webpack.ts +++ b/code/frameworks/nextjs/src/aliases/webpack.ts @@ -1,6 +1,12 @@ import type { Configuration as WebpackConfig } from 'webpack'; +import { configureCompatibilityAliases } from '../compatibility/compatibility-map'; +import { configureNextExportMocks } from '../export-mocks/webpack'; + export const configureAliases = (baseConfig: WebpackConfig): void => { + configureNextExportMocks(baseConfig); + configureCompatibilityAliases(baseConfig); + baseConfig.resolve = { ...(baseConfig.resolve ?? {}), alias: { @@ -8,4 +14,12 @@ export const configureAliases = (baseConfig: WebpackConfig): void => { '@opentelemetry/api': 'next/dist/compiled/@opentelemetry/api', }, }; + + // remove warnings regarding compatibility paths + baseConfig.ignoreWarnings = [ + ...(baseConfig.ignoreWarnings ?? []), + (warning) => + warning.message.includes("export 'draftMode'") && + warning.message.includes('next/dist/server/request/headers'), + ]; }; diff --git a/code/frameworks/nextjs/src/compatibility/compatibility-map.ts b/code/frameworks/nextjs/src/compatibility/compatibility-map.ts index 7f17cf10edc8..4cfb5e92f0b3 100644 --- a/code/frameworks/nextjs/src/compatibility/compatibility-map.ts +++ b/code/frameworks/nextjs/src/compatibility/compatibility-map.ts @@ -1,9 +1,9 @@ import semver from 'semver'; import type { Configuration as WebpackConfig } from 'webpack'; -import { addScopedAlias, getNextjsVersion } from '../utils'; +import { addScopedAlias, getNextjsVersion, setAlias } from '../utils'; -const mapping: Record> = { +const mapping: Record> = { '<14.1.0': { // https://github.com/vercel/next.js/blob/v14.1.0/packages/next/src/shared/lib/segment.ts 'next/dist/shared/lib/segment': '@storybook/nextjs/dist/compatibility/segment.compat', @@ -13,6 +13,11 @@ const mapping: Record> = { 'next/dist/client/components/redirect-status-code': '@storybook/nextjs/dist/compatibility/redirect-status-code.compat', }, + '<15.0.0': { + 'next/dist/server/request/headers': 'next/dist/client/components/headers', + // this path only exists from Next 15 onwards + 'next/dist/server/request/draft-mode': '@storybook/nextjs/dist/compatibility/draft-mode.compat', + }, }; export const getCompatibilityAliases = () => { @@ -32,6 +37,10 @@ export const configureCompatibilityAliases = (baseConfig: WebpackConfig): void = const aliases = getCompatibilityAliases(); Object.entries(aliases).forEach(([name, alias]) => { - addScopedAlias(baseConfig, name, alias); + if (typeof alias === 'string') { + addScopedAlias(baseConfig, name, alias); + } else { + setAlias(baseConfig, name, alias); + } }); }; diff --git a/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts b/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts new file mode 100644 index 000000000000..0304cb48455a --- /dev/null +++ b/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts @@ -0,0 +1,2 @@ +// Compatibility for Next 14 +export { draftMode } from 'next/dist/client/components/headers'; diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts index 1797d4ccaf57..099107fa88c0 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts @@ -1,14 +1,16 @@ import { fn } from '@storybook/test'; -import * as originalHeaders from 'next/dist/client/components/headers'; +// This export won't exist in Next.js 14 but it's safe because we ignore it in Webpack when applicable +import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode'; +import * as headers from 'next/dist/server/request/headers'; // re-exports of the actual module -export * from 'next/dist/client/components/headers'; +export * from 'next/dist/server/request/headers'; // mock utilities/overrides (as of Next v14.2.0) export { headers } from './headers'; export { cookies } from './cookies'; // passthrough mocks - keep original implementation but allow for spying -const draftMode = fn(originalHeaders.draftMode).mockName('draftMode'); +const draftMode = fn(originalDraftMode ?? (headers as any).draftMode).mockName('draftMode'); export { draftMode }; diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts index 3d054d114ed2..4f7376770588 100644 --- a/code/frameworks/nextjs/src/export-mocks/webpack.ts +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -23,14 +23,14 @@ export const getPackageAliases = ({ useESM = false }: { useESM?: boolean } = {}) const packageLocation = dirname(require.resolve('@storybook/nextjs/package.json')); const getFullPath = (path: string) => - join(packageLocation, path.replace('@storybook/nextjs', '')); + path.startsWith('next') ? path : join(packageLocation, path.replace('@storybook/nextjs', '')); const aliases = Object.fromEntries( Object.entries(mapping).map(([originalPath, aliasedPath]) => [ originalPath, // Use paths for both next/xyz and @storybook/nextjs/xyz imports // to make sure they all serve the MJS/CJS version of the file - getFullPath(`${aliasedPath}.${extension}`), + typeof aliasedPath === 'string' ? getFullPath(`${aliasedPath}.${extension}`) : aliasedPath, ]) ); diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 1956b978a37a..3463910175e1 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -162,8 +162,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureStyledJsx(baseConfig); configureNodePolyfills(baseConfig); configureAliases(baseConfig); - configureCompatibilityAliases(baseConfig); - configureNextExportMocks(baseConfig); if (isDevelopment) { configureFastRefresh(baseConfig); diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx index 881bb98a172f..36e980b1a5fe 100644 --- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx @@ -18,11 +18,14 @@ import { PathnameContext, SearchParamsContext, } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; -import { type Params } from 'next/dist/shared/lib/router/utils/route-matcher'; import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment'; import type { RouteParams } from './types'; +// Using an inline type so we can support Next 14 and lower +// from https://github.com/vercel/next.js/blob/v15.0.3/packages/next/src/server/request/params.ts#L25 +type Params = Record | undefined>; + type AppRouterProviderProps = { routeParams: RouteParams; }; diff --git a/code/frameworks/nextjs/template/stories/DynamicImport.stories.jsx b/code/frameworks/nextjs/template/stories/DynamicImport.stories.tsx similarity index 70% rename from code/frameworks/nextjs/template/stories/DynamicImport.stories.jsx rename to code/frameworks/nextjs/template/stories/DynamicImport.stories.tsx index e9efbd0f7080..b71430f72544 100644 --- a/code/frameworks/nextjs/template/stories/DynamicImport.stories.jsx +++ b/code/frameworks/nextjs/template/stories/DynamicImport.stories.tsx @@ -1,5 +1,7 @@ import React, { Suspense } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + import dynamic from 'next/dynamic'; const DynamicComponent = dynamic(() => import('./dynamic-component'), { @@ -16,6 +18,6 @@ function Component() { export default { component: Component, -}; +} as Meta; -export const Default = {}; +export const Default: StoryObj = {}; diff --git a/code/frameworks/nextjs/template/stories/Font.stories.tsx b/code/frameworks/nextjs/template/stories/Font.stories.tsx new file mode 100644 index 000000000000..0e078409da0b --- /dev/null +++ b/code/frameworks/nextjs/template/stories/Font.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import Font from './Font'; + +export default { + component: Font, +} as Meta; + +type Story = StoryObj; + +export const WithClassName: Story = { + args: { + variant: 'className', + }, +}; + +export const WithStyle: Story = { + args: { + variant: 'style', + }, +}; + +export const WithVariable: Story = { + args: { + variant: 'variable', + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Font.jsx b/code/frameworks/nextjs/template/stories/Font.tsx similarity index 94% rename from code/frameworks/nextjs/template/stories_nextjs-default-js/Font.jsx rename to code/frameworks/nextjs/template/stories/Font.tsx index f7509914db0c..5c7779fa60b4 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Font.jsx +++ b/code/frameworks/nextjs/template/stories/Font.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/prop-types */ import React from 'react'; import { Rubik_Puddles } from 'next/font/google'; @@ -15,7 +14,7 @@ export const localRubikStorm = localFont({ variable: '--font-rubik-storm', }); -export default function Font({ variant }) { +export default function Font({ variant }: { variant: 'className' | 'style' | 'variable' }) { switch (variant) { case 'className': return ( diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx b/code/frameworks/nextjs/template/stories/Head.stories.tsx similarity index 71% rename from code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx rename to code/frameworks/nextjs/template/stories/Head.stories.tsx index 7b86941b0073..540d0e04dc3d 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx +++ b/code/frameworks/nextjs/template/stories/Head.stories.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; import { expect, waitFor } from '@storybook/test'; import Head from 'next/head'; @@ -21,14 +22,14 @@ function Component() { export default { component: Component, -}; +} as Meta; -export const Default = { +export const Default: StoryObj = { play: async () => { await waitFor(() => expect(document.title).toEqual('Next.js Head Title')); await expect(document.querySelectorAll('meta[property="og:title"]')).toHaveLength(1); - await expect(document.querySelector('meta[property="og:title"]').content).toEqual( - 'My new title' - ); + await expect( + (document.querySelector('meta[property="og:title"]') as HTMLMetaElement)?.content + ).toEqual('My new title'); }, }; diff --git a/code/frameworks/nextjs/template/stories/Image.stories.jsx b/code/frameworks/nextjs/template/stories/Image.stories.tsx similarity index 83% rename from code/frameworks/nextjs/template/stories/Image.stories.jsx rename to code/frameworks/nextjs/template/stories/Image.stories.tsx index 47f28711224e..ebceacaf1300 100644 --- a/code/frameworks/nextjs/template/stories/Image.stories.jsx +++ b/code/frameworks/nextjs/template/stories/Image.stories.tsx @@ -1,4 +1,6 @@ -import React, { useRef, useState } from 'react'; +import React, { useState } from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; import Image from 'next/image'; @@ -11,24 +13,26 @@ export default { src: Accessibility, alt: 'Accessibility', }, -}; +} as Meta; + +type Story = StoryObj; -export const Default = {}; +export const Default: Story = {}; -export const Avif = { +export const Avif: Story = { args: { src: AvifImage, alt: 'Avif Test Image', }, }; -export const BlurredPlaceholder = { +export const BlurredPlaceholder: Story = { args: { placeholder: 'blur', }, }; -export const BlurredAbsolutePlaceholder = { +export const BlurredAbsolutePlaceholder: Story = { args: { src: 'https://storybook.js.org/images/placeholders/50x50.png', width: 50, @@ -44,26 +48,26 @@ export const BlurredAbsolutePlaceholder = { }, }; -export const FilledParent = { +export const FilledParent: Story = { args: { fill: true, }, - decorator: [ + decorators: [ (Story) =>
{Story()}
, ], }; -export const Sized = { +export const Sized: Story = { args: { fill: true, sizes: '(max-width: 600px) 100vw, 600px', - decorator: [ - (Story) =>
{Story()}
, - ], }, + decorators: [ + (Story) =>
{Story()}
, + ], }; -export const Lazy = { +export const Lazy: Story = { args: { src: 'https://storybook.js.org/images/placeholders/50x50.png', width: 50, @@ -79,7 +83,7 @@ export const Lazy = { ], }; -export const Eager = { +export const Eager: Story = { ...Lazy, parameters: { nextjs: { @@ -90,9 +94,9 @@ export const Eager = { }, }; -export const WithRef = { +export const WithRef: Story = { render() { - const [ref, setRef] = useState(null); + const [ref, setRef] = useState(null); return (
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/ImageLegacy.stories.jsx b/code/frameworks/nextjs/template/stories/ImageLegacy.stories.tsx similarity index 90% rename from code/frameworks/nextjs/template/stories_nextjs-default-js/ImageLegacy.stories.jsx rename to code/frameworks/nextjs/template/stories/ImageLegacy.stories.tsx index 61e61b916cbe..954bc36a260f 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/ImageLegacy.stories.jsx +++ b/code/frameworks/nextjs/template/stories/ImageLegacy.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; import Image from 'next/legacy/image'; @@ -10,17 +10,19 @@ export default { src: Accessibility, alt: 'Accessibility', }, -}; +} as Meta; + +type Story = StoryObj; -export const Default = {}; +export const Default: Story = {}; -export const BlurredPlaceholder = { +export const BlurredPlaceholder: Story = { args: { placeholder: 'blur', }, }; -export const BlurredAbsolutePlaceholder = { +export const BlurredAbsolutePlaceholder: Story = { args: { src: 'https://storybook.js.org/images/placeholders/50x50.png', width: 50, diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Link.stories.module.css b/code/frameworks/nextjs/template/stories/Link.stories.module.css similarity index 100% rename from code/frameworks/nextjs/template/stories_nextjs-default-js/Link.stories.module.css rename to code/frameworks/nextjs/template/stories/Link.stories.module.css diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Link.stories.tsx b/code/frameworks/nextjs/template/stories/Link.stories.tsx similarity index 94% rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/Link.stories.tsx rename to code/frameworks/nextjs/template/stories/Link.stories.tsx index 7c1aa2073ab6..d071539c57a5 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Link.stories.tsx +++ b/code/frameworks/nextjs/template/stories/Link.stories.tsx @@ -76,9 +76,11 @@ export default { component: Component, } as Meta; -export const Default: StoryObj = {}; +type Story = StoryObj; -export const InAppDir: StoryObj = { +export const Default: Story = {}; + +export const InAppDir: Story = { parameters: { nextjs: { appDirectory: true, diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories/Navigation.stories.tsx similarity index 98% rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx rename to code/frameworks/nextjs/template/stories/Navigation.stories.tsx index 58dd07548841..5c4872d1ac31 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx +++ b/code/frameworks/nextjs/template/stories/Navigation.stories.tsx @@ -108,7 +108,7 @@ export default { }, } as Meta; -export const Default: StoryObj = { +export const Default: Story = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); const routerMock = getRouter(); diff --git a/code/frameworks/nextjs/template/stories/RSC.jsx b/code/frameworks/nextjs/template/stories/RSC.jsx deleted file mode 100644 index a5771a6a9202..000000000000 --- a/code/frameworks/nextjs/template/stories/RSC.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -import 'server-only'; - -export const RSC = async ({ label }) => <>RSC {label}; - -export const Nested = async ({ children }) => <>Nested {children}; diff --git a/code/frameworks/nextjs/template/stories/RSC.stories.jsx b/code/frameworks/nextjs/template/stories/RSC.stories.tsx similarity index 62% rename from code/frameworks/nextjs/template/stories/RSC.stories.jsx rename to code/frameworks/nextjs/template/stories/RSC.stories.tsx index 774e129cbd58..f0db3625b4f8 100644 --- a/code/frameworks/nextjs/template/stories/RSC.stories.jsx +++ b/code/frameworks/nextjs/template/stories/RSC.stories.tsx @@ -1,5 +1,8 @@ +/* eslint-disable local-rules/no-uncategorized-errors */ import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + import { Nested, RSC } from './RSC'; export default { @@ -10,11 +13,13 @@ export default { rsc: true, }, }, -}; +} as Meta; + +type Story = StoryObj; -export const Default = {}; +export const Default: Story = {}; -export const DisableRSC = { +export const DisableRSC: Story = { tags: ['!test'], parameters: { chromatic: { disable: true }, @@ -22,7 +27,7 @@ export const DisableRSC = { }, }; -export const Error = { +export const Errored: Story = { tags: ['!test'], parameters: { chromatic: { disable: true }, @@ -32,7 +37,7 @@ export const Error = { }, }; -export const NestedRSC = { +export const NestedRSC: Story = { render: (args) => ( diff --git a/code/frameworks/nextjs/template/stories/RSC.tsx b/code/frameworks/nextjs/template/stories/RSC.tsx new file mode 100644 index 000000000000..24655728ff46 --- /dev/null +++ b/code/frameworks/nextjs/template/stories/RSC.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +import 'server-only'; + +export const RSC = async ({ label }: { label: string }) => <>RSC {label}; + +export const Nested = async ({ children }: any) => <>Nested {children}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx b/code/frameworks/nextjs/template/stories/Router.stories.tsx similarity index 100% rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx rename to code/frameworks/nextjs/template/stories/Router.stories.tsx diff --git a/code/frameworks/nextjs/template/stories/StyledJsx.stories.jsx b/code/frameworks/nextjs/template/stories/StyledJsx.stories.tsx similarity index 66% rename from code/frameworks/nextjs/template/stories/StyledJsx.stories.jsx rename to code/frameworks/nextjs/template/stories/StyledJsx.stories.tsx index 5a0c586e232c..31adea42456c 100644 --- a/code/frameworks/nextjs/template/stories/StyledJsx.stories.jsx +++ b/code/frameworks/nextjs/template/stories/StyledJsx.stories.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + const Component = () => (