diff --git a/.circleci/config.yml b/.circleci/config.yml index 51de43a71e6..5e7b5f1f1e0 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -220,19 +220,45 @@ jobs: clone_options: "--depth 1 --verbose" - attach_workspace: at: . - - run: - name: Benchmarking Packages - working_directory: scripts - command: | - yarn local-registry --open & - until curl -s http://localhost:6001 > /dev/null; do - echo 'Waiting for local registry to be available...' - sleep 2 - done - yarn bench-packages --baseBranch << pipeline.parameters.ghBaseBranch >> --pull-request << pipeline.parameters.ghPrNumber >> --upload - - store_artifacts: + # 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: + and: + - << pipeline.parameters.ghBaseBranch >> + - << pipeline.parameters.ghPrNumber >> + steps: + - run: + name: Benchmarking packages against base branch + working_directory: scripts + command: | + yarn local-registry --open & + until curl -s http://localhost:6001 > /dev/null; do + echo 'Waiting for local registry to be available...' + sleep 2 + done + yarn bench-packages --base-branch << pipeline.parameters.ghBaseBranch >> --pull-request << pipeline.parameters.ghPrNumber >> --upload + # if there is a NOT a base branch OR NOT a PR number in parameters, just upload benchmarks for the branch + # this happens when runned directly on branches, like next or main + - when: + condition: + or: + - not: << pipeline.parameters.ghBaseBranch >> + - not: << pipeline.parameters.ghPrNumber >> + steps: + - run: + name: Uploading package benchmarks for branch + working_directory: scripts + command: | + yarn local-registry --open & + until curl -s http://localhost:6001 > /dev/null; do + echo 'Waiting for local registry to be available...' + sleep 2 + done + yarn bench-packages --upload + - 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 @@ -954,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: @@ -977,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 597322a9ce2..29827f7c8cf 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 750e10416ed..f2255f27646 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 d8e3c09e367..eb68f20956a 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 ed883784732..324301ba10c 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 429aa10bfe5..7735f5a65c6 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 cd8352d5247..53c2aace7a3 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 d83ad0bd8a3..eb6fe4fecee 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 8e4c51ba31d..3c8f1f3752b 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 8fefc078ae4..f1c2a43d4f8 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 6611a51119b..1b856080c8b 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 4bbbd808658..9ce8e6de8c9 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 7811c108d2a..38b9f5565bd 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 1f662322a90..5b9b1563147 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 0913e5da9cc..b7b93484379 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 bef947388da..3d875f435dc 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 374e797bc5e..265ea0e97e8 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 b778853351e..162999ba772 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 5fd65ba89a0..dd3050c07fb 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 b99a65fe8ca..7192da5dfe5 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 9bcdf2aff65..25d096cc207 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 594e1c57e74..203d1a2ed75 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 6a122437e61..5a28ef68119 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 919e462ebd3..9418fe77621 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 9d0225f6f35..c171c67cf16 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 238310acedb..676a915225d 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 4ad08c09b4a..99cf7b69f5a 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 688873156e9..73e90def601 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 384ad1432a6..5c50ce5f2fc 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 d1750b8c4f8..3eb77ebc45f 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 d5818575ff0..25870e6f68d 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 de869d70f4a..1b030979338 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 e3ec83f9325..9b2314f3b93 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 bace85c5487..6498825c996 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 9ab05de3b58..9c222c71f92 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 f7c8cf3a6a6..b8622c287b5 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 83213deaa9e..6e14f0bf656 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 9c151e1d8bd..75cc334b42e 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 528f533d8c3..b431d7a5019 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 a2d6f5c49da..d790273912d 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 9550874bace..d15920b95b2 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 320be1c2104..31af77e8952 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 e47ea4acac3..3ed18f3becc 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 906b18452bc..1c632ef6aa9 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 94548af7b3f..99b22d1d2e8 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 27d7ab16ac4..9e426e26709 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 58cd68aceb7..6856b48e156 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 fa337ddf601..57ff0c9433f 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 b7e1d2dc4d1..b345971f51f 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 1d2c28e55d4..ba9564a778a 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 c906836614a..daf023d269b 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 79bc3f6613e..90c7ef2f369 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 ceacfa541a2..b5a9715505f 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 7f17cf10edc..4cfb5e92f0b 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 00000000000..0304cb48455 --- /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 1797d4ccaf5..099107fa88c 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 3d054d114ed..4f737677058 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 1956b978a37..3463910175e 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 881bb98a172..36e980b1a5f 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 e9efbd0f708..b71430f7254 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 00000000000..0e078409da0 --- /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 f7509914db0..5c7779fa60b 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 7b86941b007..540d0e04dc3 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 47f28711224..ebceacaf130 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 61e61b916cb..954bc36a260 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 7c1aa2073ab..d071539c57a 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 58dd0754884..5c4872d1ac3 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 a5771a6a920..00000000000 --- 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 774e129cbd5..f0db3625b4f 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 00000000000..24655728ff4 --- /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 5a0c586e232..31adea42456 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 = () => (