From 542960007d4538d1c902b55006ecd459918298d5 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 8 Nov 2024 22:44:14 +0100 Subject: [PATCH 01/17] don't include arguments when not running against a PR --- .circleci/config.yml | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 51de43a71e6..7f0d6b6b2d9 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -221,7 +221,7 @@ jobs: - attach_workspace: at: . - run: - name: Benchmarking Packages + name: Starting local registry working_directory: scripts command: | yarn local-registry --open & @@ -229,7 +229,28 @@ jobs: echo 'Waiting for local registry to be available...' sleep 2 done - yarn bench-packages --baseBranch << pipeline.parameters.ghBaseBranch >> --pull-request << pipeline.parameters.ghPrNumber >> --upload + # 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 + command: yarn bench-packages --baseBranch << 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 + command: yarn bench-packages --upload - store_artifacts: path: bench/packages/results.json - store_artifacts: From 85ff112345f7a02abe294a5de176a2c8ee8d8f31 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 8 Nov 2024 22:49:27 +0100 Subject: [PATCH 02/17] fix baseBranch typo --- .circleci/config.yml | 2 +- scripts/bench/bench-packages.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 7f0d6b6b2d9..07eec63ffc3 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -239,7 +239,7 @@ jobs: steps: - run: name: Benchmarking packages against base branch - command: yarn bench-packages --baseBranch << pipeline.parameters.ghBaseBranch >> --pull-request << pipeline.parameters.ghPrNumber >> --upload + command: 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: diff --git a/scripts/bench/bench-packages.ts b/scripts/bench/bench-packages.ts index fa12505e5d4..1651f550730 100644 --- a/scripts/bench/bench-packages.ts +++ b/scripts/bench/bench-packages.ts @@ -370,7 +370,7 @@ const uploadToGithub = async ({ const run = async () => { program .option( - '-b, --baseBranch ', + '-b, --base-branch ', 'The base branch to compare the results with. Requires GCP_CREDENTIALS env var' ) .option( From c0b80a1f5db30673a43286eef6058ffa32404a93 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 8 Nov 2024 23:16:48 +0100 Subject: [PATCH 03/17] add working dir --- .circleci/config.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.circleci/config.yml b/.circleci/config.yml index 07eec63ffc3..6cbdda2ea64 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -239,6 +239,7 @@ jobs: steps: - run: name: Benchmarking packages against base branch + working_directory: scripts command: 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 @@ -250,6 +251,7 @@ jobs: steps: - run: name: Uploading package benchmarks for branch + working_directory: scripts command: yarn bench-packages --upload - store_artifacts: path: bench/packages/results.json From 844e48e4d4bc95ef35859172631fd3be3eb27ac9 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sat, 9 Nov 2024 20:15:20 +0100 Subject: [PATCH 04/17] inline starting local registry --- .circleci/config.yml | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 6cbdda2ea64..1171aba46fe 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -220,15 +220,6 @@ jobs: clone_options: "--depth 1 --verbose" - attach_workspace: at: . - - run: - name: Starting local registry - 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 # if there is a base branch AND a PR number in parameters, benchmark packages against those # this happens when run against a PR - when: @@ -240,7 +231,13 @@ jobs: - run: name: Benchmarking packages against base branch working_directory: scripts - command: yarn bench-packages --base-branch << pipeline.parameters.ghBaseBranch >> --pull-request << pipeline.parameters.ghPrNumber >> --upload + 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: @@ -252,7 +249,13 @@ jobs: - run: name: Uploading package benchmarks for branch working_directory: scripts - command: yarn bench-packages --upload + 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: From 59df579fbc5861357b99eae6578c77694b218224 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 11 Nov 2024 14:42:22 +0100 Subject: [PATCH 05/17] Nextjs: Add support for Next 15 --- code/frameworks/nextjs/package.json | 4 +- code/frameworks/nextjs/src/aliases/webpack.ts | 14 + .../src/compatibility/compatibility-map.ts | 15 +- .../nextjs/src/export-mocks/headers/index.ts | 8 +- .../nextjs/src/export-mocks/webpack.ts | 2 +- code/frameworks/nextjs/src/preset.ts | 2 - code/yarn.lock | 401 ++++++++++++++---- 7 files changed, 354 insertions(+), 92 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 79bc3f6613e..a34121d480a 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -171,12 +171,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:^", 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..e09a4a7889c 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': false, + }, }; 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/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts index 1797d4ccaf5..96e3c4de44d 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.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..fbc4ffa7894 100644 --- a/code/frameworks/nextjs/src/export-mocks/webpack.ts +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -30,7 +30,7 @@ export const getPackageAliases = ({ useESM = false }: { useESM?: boolean } = {}) 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/yarn.lock b/code/yarn.lock index 272933533d6..38f40e9ba45 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2504,6 +2504,15 @@ __metadata: languageName: node linkType: hard +"@emnapi/runtime@npm:^1.2.0": + version: 1.3.1 + resolution: "@emnapi/runtime@npm:1.3.1" + dependencies: + tslib: "npm:^2.4.0" + checksum: 10c0/060ffede50f1b619c15083312b80a9e62a5b0c87aa8c1b54854c49766c9d69f8d1d3d87bd963a647071263a320db41b25eaa50b74d6a80dcc763c23dbeaafd6c + languageName: node + linkType: hard + "@emotion/babel-plugin@npm:^11.11.0": version: 11.11.0 resolution: "@emotion/babel-plugin@npm:11.11.0" @@ -3429,6 +3438,18 @@ __metadata: languageName: node linkType: hard +"@img/sharp-darwin-arm64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-darwin-arm64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-darwin-arm64": "npm:1.0.4" + dependenciesMeta: + "@img/sharp-libvips-darwin-arm64": + optional: true + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@img/sharp-darwin-x64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-darwin-x64@npm:0.33.4" @@ -3441,6 +3462,18 @@ __metadata: languageName: node linkType: hard +"@img/sharp-darwin-x64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-darwin-x64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-darwin-x64": "npm:1.0.4" + dependenciesMeta: + "@img/sharp-libvips-darwin-x64": + optional: true + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@img/sharp-libvips-darwin-arm64@npm:1.0.2": version: 1.0.2 resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.2" @@ -3448,6 +3481,13 @@ __metadata: languageName: node linkType: hard +"@img/sharp-libvips-darwin-arm64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.4" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@img/sharp-libvips-darwin-x64@npm:1.0.2": version: 1.0.2 resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.2" @@ -3455,6 +3495,13 @@ __metadata: languageName: node linkType: hard +"@img/sharp-libvips-darwin-x64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.4" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@img/sharp-libvips-linux-arm64@npm:1.0.2": version: 1.0.2 resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.2" @@ -3462,6 +3509,13 @@ __metadata: languageName: node linkType: hard +"@img/sharp-libvips-linux-arm64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.4" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + "@img/sharp-libvips-linux-arm@npm:1.0.2": version: 1.0.2 resolution: "@img/sharp-libvips-linux-arm@npm:1.0.2" @@ -3469,6 +3523,13 @@ __metadata: languageName: node linkType: hard +"@img/sharp-libvips-linux-arm@npm:1.0.5": + version: 1.0.5 + resolution: "@img/sharp-libvips-linux-arm@npm:1.0.5" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + "@img/sharp-libvips-linux-s390x@npm:1.0.2": version: 1.0.2 resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.2" @@ -3476,6 +3537,13 @@ __metadata: languageName: node linkType: hard +"@img/sharp-libvips-linux-s390x@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.4" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + "@img/sharp-libvips-linux-x64@npm:1.0.2": version: 1.0.2 resolution: "@img/sharp-libvips-linux-x64@npm:1.0.2" @@ -3483,6 +3551,13 @@ __metadata: languageName: node linkType: hard +"@img/sharp-libvips-linux-x64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-linux-x64@npm:1.0.4" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2": version: 1.0.2 resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2" @@ -3490,6 +3565,13 @@ __metadata: languageName: node linkType: hard +"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + "@img/sharp-libvips-linuxmusl-x64@npm:1.0.2": version: 1.0.2 resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.2" @@ -3497,6 +3579,13 @@ __metadata: languageName: node linkType: hard +"@img/sharp-libvips-linuxmusl-x64@npm:1.0.4": + version: 1.0.4 + resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.4" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + "@img/sharp-linux-arm64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linux-arm64@npm:0.33.4" @@ -3509,6 +3598,18 @@ __metadata: languageName: node linkType: hard +"@img/sharp-linux-arm64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linux-arm64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linux-arm64": "npm:1.0.4" + dependenciesMeta: + "@img/sharp-libvips-linux-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + "@img/sharp-linux-arm@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linux-arm@npm:0.33.4" @@ -3521,6 +3622,18 @@ __metadata: languageName: node linkType: hard +"@img/sharp-linux-arm@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linux-arm@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linux-arm": "npm:1.0.5" + dependenciesMeta: + "@img/sharp-libvips-linux-arm": + optional: true + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + "@img/sharp-linux-s390x@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linux-s390x@npm:0.33.4" @@ -3533,6 +3646,18 @@ __metadata: languageName: node linkType: hard +"@img/sharp-linux-s390x@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linux-s390x@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linux-s390x": "npm:1.0.4" + dependenciesMeta: + "@img/sharp-libvips-linux-s390x": + optional: true + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + "@img/sharp-linux-x64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linux-x64@npm:0.33.4" @@ -3545,6 +3670,18 @@ __metadata: languageName: node linkType: hard +"@img/sharp-linux-x64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linux-x64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linux-x64": "npm:1.0.4" + dependenciesMeta: + "@img/sharp-libvips-linux-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + "@img/sharp-linuxmusl-arm64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.4" @@ -3557,6 +3694,18 @@ __metadata: languageName: node linkType: hard +"@img/sharp-linuxmusl-arm64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + "@img/sharp-linuxmusl-x64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linuxmusl-x64@npm:0.33.4" @@ -3569,6 +3718,18 @@ __metadata: languageName: node linkType: hard +"@img/sharp-linuxmusl-x64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-linuxmusl-x64@npm:0.33.5" + dependencies: + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + "@img/sharp-wasm32@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-wasm32@npm:0.33.4" @@ -3578,6 +3739,15 @@ __metadata: languageName: node linkType: hard +"@img/sharp-wasm32@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-wasm32@npm:0.33.5" + dependencies: + "@emnapi/runtime": "npm:^1.2.0" + conditions: cpu=wasm32 + languageName: node + linkType: hard + "@img/sharp-win32-ia32@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-win32-ia32@npm:0.33.4" @@ -3585,6 +3755,13 @@ __metadata: languageName: node linkType: hard +"@img/sharp-win32-ia32@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-win32-ia32@npm:0.33.5" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "@img/sharp-win32-x64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-win32-x64@npm:0.33.4" @@ -3592,6 +3769,13 @@ __metadata: languageName: node linkType: hard +"@img/sharp-win32-x64@npm:0.33.5": + version: 0.33.5 + resolution: "@img/sharp-win32-x64@npm:0.33.5" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@inquirer/confirm@npm:^3.0.0": version: 3.1.20 resolution: "@inquirer/confirm@npm:3.1.20" @@ -3908,72 +4092,72 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:14.2.5, @next/env@npm:^14.2.5": +"@next/env@npm:15.0.3": + version: 15.0.3 + resolution: "@next/env@npm:15.0.3" + checksum: 10c0/63582fed80d6a28fff102c935095da71fd57ddf6b5f5d564e85ebdefdeb93298f7f7cf7d813c75b460c6627106717ea959b4c232939e7abb97d73d8b8467d4cd + languageName: node + linkType: hard + +"@next/env@npm:^14.2.5": version: 14.2.5 resolution: "@next/env@npm:14.2.5" checksum: 10c0/63d8b88ac450b3c37940a9e2119a63a1074aca89908574ade6157a8aa295275dcb3ac5f69e00883fc55d0f12963b73b74e87ba32a5768a489f9609c6be57b699 languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:14.2.5": - version: 14.2.5 - resolution: "@next/swc-darwin-arm64@npm:14.2.5" +"@next/swc-darwin-arm64@npm:15.0.3": + version: 15.0.3 + resolution: "@next/swc-darwin-arm64@npm:15.0.3" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:14.2.5": - version: 14.2.5 - resolution: "@next/swc-darwin-x64@npm:14.2.5" +"@next/swc-darwin-x64@npm:15.0.3": + version: 15.0.3 + resolution: "@next/swc-darwin-x64@npm:15.0.3" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:14.2.5": - version: 14.2.5 - resolution: "@next/swc-linux-arm64-gnu@npm:14.2.5" +"@next/swc-linux-arm64-gnu@npm:15.0.3": + version: 15.0.3 + resolution: "@next/swc-linux-arm64-gnu@npm:15.0.3" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:14.2.5": - version: 14.2.5 - resolution: "@next/swc-linux-arm64-musl@npm:14.2.5" +"@next/swc-linux-arm64-musl@npm:15.0.3": + version: 15.0.3 + resolution: "@next/swc-linux-arm64-musl@npm:15.0.3" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:14.2.5": - version: 14.2.5 - resolution: "@next/swc-linux-x64-gnu@npm:14.2.5" +"@next/swc-linux-x64-gnu@npm:15.0.3": + version: 15.0.3 + resolution: "@next/swc-linux-x64-gnu@npm:15.0.3" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:14.2.5": - version: 14.2.5 - resolution: "@next/swc-linux-x64-musl@npm:14.2.5" +"@next/swc-linux-x64-musl@npm:15.0.3": + version: 15.0.3 + resolution: "@next/swc-linux-x64-musl@npm:15.0.3" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:14.2.5": - version: 14.2.5 - resolution: "@next/swc-win32-arm64-msvc@npm:14.2.5" +"@next/swc-win32-arm64-msvc@npm:15.0.3": + version: 15.0.3 + resolution: "@next/swc-win32-arm64-msvc@npm:15.0.3" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:14.2.5": - version: 14.2.5 - resolution: "@next/swc-win32-ia32-msvc@npm:14.2.5" - conditions: os=win32 & cpu=ia32 - languageName: node - linkType: hard - -"@next/swc-win32-x64-msvc@npm:14.2.5": - version: 14.2.5 - resolution: "@next/swc-win32-x64-msvc@npm:14.2.5" +"@next/swc-win32-x64-msvc@npm:15.0.3": + version: 15.0.3 + resolution: "@next/swc-win32-x64-msvc@npm:15.0.3" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -6294,14 +6478,14 @@ __metadata: "@storybook/react": "workspace:*" "@storybook/test": "workspace:*" "@types/node": "npm:^18.0.0" - next: "npm:^14.2.5" + next: "npm:^15.0.3" sharp: "npm:^0.33.3" styled-jsx: "npm:5.1.6" typescript: "npm:^5.3.2" vite-plugin-storybook-nextjs: "npm:^1.0.11" peerDependencies: "@storybook/test": "workspace:*" - next: ^14.1.0 + next: ^14.1.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:^" @@ -6477,7 +6661,7 @@ __metadata: find-up: "npm:^5.0.0" image-size: "npm:^1.0.0" loader-utils: "npm:^3.2.1" - next: "npm:^14.1.0" + next: "npm:^15.0.3" node-polyfill-webpack-plugin: "npm:^2.0.1" pnp-webpack-plugin: "npm:^1.7.0" postcss: "npm:^8.4.38" @@ -6495,7 +6679,7 @@ __metadata: typescript: "npm:^5.3.2" webpack: "npm:^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:^" @@ -7343,20 +7527,19 @@ __metadata: languageName: node linkType: hard -"@swc/counter@npm:^0.1.3": +"@swc/counter@npm:0.1.3": version: 0.1.3 resolution: "@swc/counter@npm:0.1.3" checksum: 10c0/8424f60f6bf8694cfd2a9bca45845bce29f26105cda8cf19cdb9fd3e78dc6338699e4db77a89ae449260bafa1cc6bec307e81e7fb96dbf7dcfce0eea55151356 languageName: node linkType: hard -"@swc/helpers@npm:0.5.5": - version: 0.5.5 - resolution: "@swc/helpers@npm:0.5.5" +"@swc/helpers@npm:0.5.13": + version: 0.5.13 + resolution: "@swc/helpers@npm:0.5.13" dependencies: - "@swc/counter": "npm:^0.1.3" tslib: "npm:^2.4.0" - checksum: 10c0/21a9b9cfe7e00865f9c9f3eb4c1cc5b397143464f7abee76a2c5366e591e06b0155b5aac93fe8269ef8d548df253f6fd931e9ddfc0fd12efd405f90f45506e7d + checksum: 10c0/b9df578401fc62405da9a6c31e79e447a2fd90f68b25b1daee12f2caf2821991bb89106f0397bc1acb4c4d84a8ce079d04b60b65f534496952e3bf8c9a52f40f languageName: node linkType: hard @@ -16461,7 +16644,7 @@ __metadata: languageName: node linkType: hard -"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9": +"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9": version: 4.2.11 resolution: "graceful-fs@npm:4.2.11" checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2 @@ -21267,31 +21450,32 @@ __metadata: languageName: node linkType: hard -"next@npm:^14.1.0, next@npm:^14.2.5": - version: 14.2.5 - resolution: "next@npm:14.2.5" - dependencies: - "@next/env": "npm:14.2.5" - "@next/swc-darwin-arm64": "npm:14.2.5" - "@next/swc-darwin-x64": "npm:14.2.5" - "@next/swc-linux-arm64-gnu": "npm:14.2.5" - "@next/swc-linux-arm64-musl": "npm:14.2.5" - "@next/swc-linux-x64-gnu": "npm:14.2.5" - "@next/swc-linux-x64-musl": "npm:14.2.5" - "@next/swc-win32-arm64-msvc": "npm:14.2.5" - "@next/swc-win32-ia32-msvc": "npm:14.2.5" - "@next/swc-win32-x64-msvc": "npm:14.2.5" - "@swc/helpers": "npm:0.5.5" +"next@npm:^15.0.3": + version: 15.0.3 + resolution: "next@npm:15.0.3" + dependencies: + "@next/env": "npm:15.0.3" + "@next/swc-darwin-arm64": "npm:15.0.3" + "@next/swc-darwin-x64": "npm:15.0.3" + "@next/swc-linux-arm64-gnu": "npm:15.0.3" + "@next/swc-linux-arm64-musl": "npm:15.0.3" + "@next/swc-linux-x64-gnu": "npm:15.0.3" + "@next/swc-linux-x64-musl": "npm:15.0.3" + "@next/swc-win32-arm64-msvc": "npm:15.0.3" + "@next/swc-win32-x64-msvc": "npm:15.0.3" + "@swc/counter": "npm:0.1.3" + "@swc/helpers": "npm:0.5.13" busboy: "npm:1.6.0" caniuse-lite: "npm:^1.0.30001579" - graceful-fs: "npm:^4.2.11" postcss: "npm:8.4.31" - styled-jsx: "npm:5.1.1" + sharp: "npm:^0.33.5" + styled-jsx: "npm:5.1.6" peerDependencies: "@opentelemetry/api": ^1.1.0 "@playwright/test": ^1.41.2 - react: ^18.2.0 - react-dom: ^18.2.0 + babel-plugin-react-compiler: "*" + react: ^18.2.0 || 19.0.0-rc-66855b96-20241106 + react-dom: ^18.2.0 || 19.0.0-rc-66855b96-20241106 sass: ^1.3.0 dependenciesMeta: "@next/swc-darwin-arm64": @@ -21308,20 +21492,22 @@ __metadata: optional: true "@next/swc-win32-arm64-msvc": optional: true - "@next/swc-win32-ia32-msvc": - optional: true "@next/swc-win32-x64-msvc": optional: true + sharp: + optional: true peerDependenciesMeta: "@opentelemetry/api": optional: true "@playwright/test": optional: true + babel-plugin-react-compiler: + optional: true sass: optional: true bin: next: dist/bin/next - checksum: 10c0/8df7d8ccc1a5bab03fa50dd6656c8a6f3750e81ef0b087dc329fea9346847c3094a933a890a8e87151dc32f0bc55020b8f6386d4565856d83bcc10895d29ec08 + checksum: 10c0/c5f6a57acb5f29063abc82d4d4417a048d0c2d5216d6ded6aa3fe32d60bb4835ed57dd34e2ef8fdda15579e97205820dc25bf34556b1d942a01a33d9ae7f88db languageName: node linkType: hard @@ -25724,6 +25910,75 @@ __metadata: languageName: node linkType: hard +"sharp@npm:^0.33.5": + version: 0.33.5 + resolution: "sharp@npm:0.33.5" + dependencies: + "@img/sharp-darwin-arm64": "npm:0.33.5" + "@img/sharp-darwin-x64": "npm:0.33.5" + "@img/sharp-libvips-darwin-arm64": "npm:1.0.4" + "@img/sharp-libvips-darwin-x64": "npm:1.0.4" + "@img/sharp-libvips-linux-arm": "npm:1.0.5" + "@img/sharp-libvips-linux-arm64": "npm:1.0.4" + "@img/sharp-libvips-linux-s390x": "npm:1.0.4" + "@img/sharp-libvips-linux-x64": "npm:1.0.4" + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4" + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4" + "@img/sharp-linux-arm": "npm:0.33.5" + "@img/sharp-linux-arm64": "npm:0.33.5" + "@img/sharp-linux-s390x": "npm:0.33.5" + "@img/sharp-linux-x64": "npm:0.33.5" + "@img/sharp-linuxmusl-arm64": "npm:0.33.5" + "@img/sharp-linuxmusl-x64": "npm:0.33.5" + "@img/sharp-wasm32": "npm:0.33.5" + "@img/sharp-win32-ia32": "npm:0.33.5" + "@img/sharp-win32-x64": "npm:0.33.5" + color: "npm:^4.2.3" + detect-libc: "npm:^2.0.3" + semver: "npm:^7.6.3" + dependenciesMeta: + "@img/sharp-darwin-arm64": + optional: true + "@img/sharp-darwin-x64": + optional: true + "@img/sharp-libvips-darwin-arm64": + optional: true + "@img/sharp-libvips-darwin-x64": + optional: true + "@img/sharp-libvips-linux-arm": + optional: true + "@img/sharp-libvips-linux-arm64": + optional: true + "@img/sharp-libvips-linux-s390x": + optional: true + "@img/sharp-libvips-linux-x64": + optional: true + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + "@img/sharp-libvips-linuxmusl-x64": + optional: true + "@img/sharp-linux-arm": + optional: true + "@img/sharp-linux-arm64": + optional: true + "@img/sharp-linux-s390x": + optional: true + "@img/sharp-linux-x64": + optional: true + "@img/sharp-linuxmusl-arm64": + optional: true + "@img/sharp-linuxmusl-x64": + optional: true + "@img/sharp-wasm32": + optional: true + "@img/sharp-win32-ia32": + optional: true + "@img/sharp-win32-x64": + optional: true + checksum: 10c0/6b81421ddfe6ee524d8d77e325c5e147fef22884e1c7b1656dfd89a88d7025894115da02d5f984261bf2e6daa16f98cadd1721c4ba408b4212b1d2a60f233484 + languageName: node + linkType: hard + "shebang-command@npm:^1.2.0": version: 1.2.0 resolution: "shebang-command@npm:1.2.0" @@ -26627,22 +26882,6 @@ __metadata: languageName: node linkType: hard -"styled-jsx@npm:5.1.1": - version: 5.1.1 - resolution: "styled-jsx@npm:5.1.1" - dependencies: - client-only: "npm:0.0.1" - peerDependencies: - react: ">= 16.8.0 || 17.x.x || ^18.0.0-0" - peerDependenciesMeta: - "@babel/core": - optional: true - babel-plugin-macros: - optional: true - checksum: 10c0/42655cdadfa5388f8a48bb282d6b450df7d7b8cf066ac37038bd0499d3c9f084815ebd9ff9dfa12a218fd4441338851db79603498d7557207009c1cf4d609835 - languageName: node - linkType: hard - "styled-jsx@npm:5.1.6, styled-jsx@npm:^5.1.6": version: 5.1.6 resolution: "styled-jsx@npm:5.1.6" From aab26d9f052d9000de6df64754e50812759b456a Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Mon, 11 Nov 2024 16:43:33 -0500 Subject: [PATCH 06/17] Docs: Fix global viewports options example --- docs/_snippets/addon-viewport-options-in-preview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/_snippets/addon-viewport-options-in-preview.md b/docs/_snippets/addon-viewport-options-in-preview.md index 332b1e17123..c342682af44 100644 --- a/docs/_snippets/addon-viewport-options-in-preview.md +++ b/docs/_snippets/addon-viewport-options-in-preview.md @@ -4,7 +4,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; export default { parameters: { viewport: { - viewports: INITIAL_VIEWPORTS, + options: INITIAL_VIEWPORTS, }, }, initialGlobals: { @@ -20,7 +20,7 @@ import { Preview } from '@storybook/your-renderer'; const preview: Preview = { parameters: { viewport: { - viewports: INITIAL_VIEWPORTS, + options: INITIAL_VIEWPORTS, }, }, initialGlobals: { From a2b92457e87526548621a6879da01ebe4290c2b0 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 12 Nov 2024 07:22:21 +0100 Subject: [PATCH 07/17] Move nextjs stories to common template directory, add Nextjs 14 sandbox --- ....stories.jsx => DynamicImport.stories.tsx} | 6 +- .../nextjs/template/stories/Font.stories.tsx | 27 +++ .../Font.jsx => stories/Font.tsx} | 1 - .../GetImageProps.stories.tsx} | 6 +- .../Head.stories.tsx} | 5 +- .../{Image.stories.jsx => Image.stories.tsx} | 24 +-- .../ImageLegacy.stories.tsx} | 12 +- .../Link.stories.module.css | 0 .../Link.stories.tsx | 6 +- .../Navigation.stories.tsx | 2 +- .../NextHeader.stories.tsx | 3 +- .../NextHeader.tsx | 22 ++- .../{RSC.stories.jsx => RSC.stories.tsx} | 14 +- .../template/stories/{RSC.jsx => RSC.tsx} | 0 .../Redirect.stories.tsx | 0 .../Router.stories.tsx | 0 .../ServerActions.stories.tsx | 10 +- ...dJsx.stories.jsx => StyledJsx.stories.tsx} | 6 +- ...ic-component.jsx => dynamic-component.tsx} | 0 .../fonts/OFL.txt | 0 .../fonts/RubikStorm-Regular.ttf | Bin .../server-actions.tsx | 6 +- .../Font.stories.jsx | 23 --- .../Link.stories.jsx | 83 --------- .../Link.stories.module.css | 3 - .../cli-storybook/src/sandbox-templates.ts | 13 +- code/yarn.lock | 162 +++++++++++++++++- .../nextjs/stories/DynamicImport.stories.tsx | 2 +- .../nextjs/stories/Head.stories.tsx | 2 +- .../nextjs/stories/NextHeader.stories.tsx | 3 +- .../nextjs/stories/StyledJsx.stories.tsx | 2 +- .../react/stories/AddonTest.stories.tsx | 2 +- 32 files changed, 268 insertions(+), 177 deletions(-) rename code/frameworks/nextjs/template/stories/{DynamicImport.stories.jsx => DynamicImport.stories.tsx} (70%) create mode 100644 code/frameworks/nextjs/template/stories/Font.stories.tsx rename code/frameworks/nextjs/template/{stories_nextjs-default-js/Font.jsx => stories/Font.tsx} (97%) rename code/frameworks/nextjs/template/{stories_nextjs-default-js/GetImageProps.stories.jsx => stories/GetImageProps.stories.tsx} (86%) rename code/frameworks/nextjs/template/{stories_nextjs-default-js/Head.stories.jsx => stories/Head.stories.tsx} (85%) rename code/frameworks/nextjs/template/stories/{Image.stories.jsx => Image.stories.tsx} (88%) rename code/frameworks/nextjs/template/{stories_nextjs-default-js/ImageLegacy.stories.jsx => stories/ImageLegacy.stories.tsx} (90%) rename code/frameworks/nextjs/template/{stories_nextjs-default-js => stories}/Link.stories.module.css (100%) rename code/frameworks/nextjs/template/{stories_nextjs-default-ts => stories}/Link.stories.tsx (94%) rename code/frameworks/nextjs/template/{stories_nextjs-default-ts => stories}/Navigation.stories.tsx (98%) rename code/frameworks/nextjs/template/{stories_nextjs-default-ts => stories}/NextHeader.stories.tsx (94%) rename code/frameworks/nextjs/template/{stories_nextjs-default-ts => stories}/NextHeader.tsx (56%) rename code/frameworks/nextjs/template/stories/{RSC.stories.jsx => RSC.stories.tsx} (66%) rename code/frameworks/nextjs/template/stories/{RSC.jsx => RSC.tsx} (100%) rename code/frameworks/nextjs/template/{stories_nextjs-default-ts => stories}/Redirect.stories.tsx (100%) rename code/frameworks/nextjs/template/{stories_nextjs-default-ts => stories}/Router.stories.tsx (100%) rename code/frameworks/nextjs/template/{stories_nextjs-default-ts => stories}/ServerActions.stories.tsx (93%) rename code/frameworks/nextjs/template/stories/{StyledJsx.stories.jsx => StyledJsx.stories.tsx} (66%) rename code/frameworks/nextjs/template/stories/{dynamic-component.jsx => dynamic-component.tsx} (100%) rename code/frameworks/nextjs/template/{stories_nextjs-default-js => stories}/fonts/OFL.txt (100%) rename code/frameworks/nextjs/template/{stories_nextjs-default-js => stories}/fonts/RubikStorm-Regular.ttf (100%) rename code/frameworks/nextjs/template/{stories_nextjs-default-ts => stories}/server-actions.tsx (76%) delete mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-js/Font.stories.jsx delete mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-js/Link.stories.jsx delete mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/Link.stories.module.css 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 97% rename from code/frameworks/nextjs/template/stories_nextjs-default-js/Font.jsx rename to code/frameworks/nextjs/template/stories/Font.tsx index f7509914db0..5e967379a62 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'; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx b/code/frameworks/nextjs/template/stories/GetImageProps.stories.tsx similarity index 86% rename from code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx rename to code/frameworks/nextjs/template/stories/GetImageProps.stories.tsx index f3e7c0b7462..b82db659510 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx +++ b/code/frameworks/nextjs/template/stories/GetImageProps.stories.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + import { getImageProps } from 'next/image'; import Accessibility from '../../assets/accessibility.svg'; @@ -29,6 +31,6 @@ export default { args: { alt: 'getImageProps Example', }, -}; +} as Meta; -export const Default = {}; +export const Default: StoryObj = {}; 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 85% 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..7bb8a2ff5bf 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,9 +22,9 @@ 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); diff --git a/code/frameworks/nextjs/template/stories/Image.stories.jsx b/code/frameworks/nextjs/template/stories/Image.stories.tsx similarity index 88% rename from code/frameworks/nextjs/template/stories/Image.stories.jsx rename to code/frameworks/nextjs/template/stories/Image.stories.tsx index 47f28711224..5704e31b311 100644 --- a/code/frameworks/nextjs/template/stories/Image.stories.jsx +++ b/code/frameworks/nextjs/template/stories/Image.stories.tsx @@ -1,5 +1,7 @@ import React, { useRef, useState } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + import Image from 'next/image'; import Accessibility from '../../assets/accessibility.svg'; @@ -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,7 +48,7 @@ export const BlurredAbsolutePlaceholder = { }, }; -export const FilledParent = { +export const FilledParent: Story = { args: { fill: true, }, @@ -53,7 +57,7 @@ export const FilledParent = { ], }; -export const Sized = { +export const Sized: Story = { args: { fill: true, sizes: '(max-width: 600px) 100vw, 600px', @@ -63,7 +67,7 @@ export const Sized = { }, }; -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,7 +94,7 @@ export const Eager = { }, }; -export const WithRef = { +export const WithRef: Story = { render() { const [ref, setRef] = useState(null); 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..230544940e9 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/ImageLegacy.stories.jsx +++ b/code/frameworks/nextjs/template/stories/ImageLegacy.stories.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + import Image from 'next/legacy/image'; import Accessibility from '../../assets/accessibility.svg'; @@ -10,17 +12,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_nextjs-default-ts/NextHeader.stories.tsx b/code/frameworks/nextjs/template/stories/NextHeader.stories.tsx similarity index 94% rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx rename to code/frameworks/nextjs/template/stories/NextHeader.stories.tsx index 059bcbcff7b..f5e83ef867f 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx +++ b/code/frameworks/nextjs/template/stories/NextHeader.stories.tsx @@ -1,6 +1,5 @@ import { cookies, headers } from '@storybook/nextjs/headers.mock'; -import type { Meta } from '@storybook/react'; -import type { StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { expect, userEvent, within } from '@storybook/test'; import NextHeader from './NextHeader'; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx b/code/frameworks/nextjs/template/stories/NextHeader.tsx similarity index 56% rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx rename to code/frameworks/nextjs/template/stories/NextHeader.tsx index 6189f84baa6..eca7197ed79 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx +++ b/code/frameworks/nextjs/template/stories/NextHeader.tsx @@ -5,25 +5,23 @@ import { cookies, headers } from 'next/headers'; export default async function Component() { async function handleClick() { 'use server'; - cookies().set('user-id', 'encrypted-id'); + (await cookies()).set('user-id', 'encrypted-id'); } return ( <>

Cookies:

- {cookies() - .getAll() - .map(({ name, value }) => { - return ( -

- Name: {name} - Value: {value} -

- ); - })} + {(await cookies()).getAll().map(({ name, value }) => { + return ( +

+ Name: {name} + Value: {value} +

+ ); + })}

Headers:

- {Array.from(headers().entries()).map(([name, value]: [string, string]) => { + {Array.from((await headers()).entries()).map(([name, value]: [string, string]) => { return (

Name: {name} diff --git a/code/frameworks/nextjs/template/stories/RSC.stories.jsx b/code/frameworks/nextjs/template/stories/RSC.stories.tsx similarity index 66% rename from code/frameworks/nextjs/template/stories/RSC.stories.jsx rename to code/frameworks/nextjs/template/stories/RSC.stories.tsx index 774e129cbd5..92bb9ace41e 100644 --- a/code/frameworks/nextjs/template/stories/RSC.stories.jsx +++ b/code/frameworks/nextjs/template/stories/RSC.stories.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + import { Nested, RSC } from './RSC'; export default { @@ -10,11 +12,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 +26,7 @@ export const DisableRSC = { }, }; -export const Error = { +export const Error: Story = { tags: ['!test'], parameters: { chromatic: { disable: true }, @@ -32,7 +36,7 @@ export const Error = { }, }; -export const NestedRSC = { +export const NestedRSC: Story = { render: (args) => ( diff --git a/code/frameworks/nextjs/template/stories/RSC.jsx b/code/frameworks/nextjs/template/stories/RSC.tsx similarity index 100% rename from code/frameworks/nextjs/template/stories/RSC.jsx rename to code/frameworks/nextjs/template/stories/RSC.tsx diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx b/code/frameworks/nextjs/template/stories/Redirect.stories.tsx similarity index 100% rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx rename to code/frameworks/nextjs/template/stories/Redirect.stories.tsx 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_nextjs-default-ts/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories/ServerActions.stories.tsx similarity index 93% rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx rename to code/frameworks/nextjs/template/stories/ServerActions.stories.tsx index 018c4d33b54..f1a9ad762ee 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx +++ b/code/frameworks/nextjs/template/stories/ServerActions.stories.tsx @@ -58,7 +58,9 @@ export default { }, } as Meta; -export const ProtectedWhileLoggedOut: StoryObj = { +type Story = StoryObj; + +export const ProtectedWhileLoggedOut: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByText('Access protected route')); @@ -70,7 +72,7 @@ export const ProtectedWhileLoggedOut: StoryObj = { }, }; -export const ProtectedWhileLoggedIn: StoryObj = { +export const ProtectedWhileLoggedIn: Story = { beforeEach() { cookies().set('user', 'storybookjs'); }, @@ -86,7 +88,7 @@ export const ProtectedWhileLoggedIn: StoryObj = { }, }; -export const Logout: StoryObj = { +export const Logout: Story = { beforeEach() { cookies().set('user', 'storybookjs'); }, @@ -102,7 +104,7 @@ export const Logout: StoryObj = { }, }; -export const Login: StoryObj = { +export const Login: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByText('Login')); 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 = () => (