From 728fc894a65b538b8e71e80d0a2708520132674f Mon Sep 17 00:00:00 2001 From: Susheel Thapa Date: Sat, 21 Oct 2023 11:24:26 +0545 Subject: [PATCH 1/7] Fix:Typo in multiple files of docs and code folder --- CONTRIBUTING/RELEASING.md | 2 +- code/frameworks/nextjs/README.md | 4 ++-- code/lib/instrumenter/README.md | 2 +- code/lib/postinstall/README.md | 2 +- code/presets/create-react-app/README.md | 2 +- docs/api/main-config-core.md | 2 +- docs/sharing/publish-storybook.md | 2 +- .../angular/my-component-play-function-with-delay.ts.mdx | 2 +- .../common/my-component-play-function-with-delay.js.mdx | 2 +- .../common/my-component-play-function-with-delay.ts-4-9.mdx | 2 +- .../common/my-component-play-function-with-delay.ts.mdx | 2 +- .../my-component-play-function-with-delay.js.mdx | 2 +- .../my-component-play-function-with-delay.ts.mdx | 2 +- 13 files changed, 14 insertions(+), 14 deletions(-) diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md index d1c4eecdb849..afc1bc377451 100644 --- a/CONTRIBUTING/RELEASING.md +++ b/CONTRIBUTING/RELEASING.md @@ -476,7 +476,7 @@ No process is defined for this. ### Merges to `main` without versioning -As described in more details in [the Patch Releases section](#patch-releases), there are scenarios where you want to patch [unreleasable](#which-changes-are-considered-releasable-and-what-does-it-mean) content back to `main` without bumping versions or publishing a new release. This happens automatically as long as all the unpicked patch pull requests have unreleasable labels. In that case the prepared patch pull request will change form slighty, to just cherry-picking the patches without bumping the versions. +As described in more details in [the Patch Releases section](#patch-releases), there are scenarios where you want to patch [unreleasable](#which-changes-are-considered-releasable-and-what-does-it-mean) content back to `main` without bumping versions or publishing a new release. This happens automatically as long as all the unpicked patch pull requests have unreleasable labels. In that case the prepared patch pull request will change form slightly, to just cherry-picking the patches without bumping the versions. ## FAQ diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index 01b2efd88862..d2549a159c26 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -147,7 +147,7 @@ export default { ### Options -You can be pass an options object for addional configuration if needed. +You can be pass an options object for additional configuration if needed. For example: @@ -864,7 +864,7 @@ Next.js comes with a lot of things for free out of the box like sass support, bu Any webpack modifications desired for Storybook should be made in [.storybook/main.js](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config). -Note: Not all webpack modifications are copy/paste-able between `next.config.js` and `.storybook/main.js`. It is recommended to do your reasearch on how to properly make your modifcation to Storybook's webpack config and on how [webpack works](https://webpack.js.org/concepts/). +Note: Not all webpack modifications are copy/paste-able between `next.config.js` and `.storybook/main.js`. It is recommended to do your research on how to properly make your modification to Storybook's webpack config and on how [webpack works](https://webpack.js.org/concepts/). Below is an example of how to add svgr support to Storybook with this framework. diff --git a/code/lib/instrumenter/README.md b/code/lib/instrumenter/README.md index 6bc121553189..74fe933067d9 100644 --- a/code/lib/instrumenter/README.md +++ b/code/lib/instrumenter/README.md @@ -1,6 +1,6 @@ # Storybook Instrumenter -The Storybook Instrumenter is used to patch a (3rd party) module to track and intercept function invocations for step-through debugging using the Interactions addon. In essense, the Instrumenter traverses a given object, recursively monkey-patching any functions to make them "tracked". +The Storybook Instrumenter is used to patch a (3rd party) module to track and intercept function invocations for step-through debugging using the Interactions addon. In essence, the Instrumenter traverses a given object, recursively monkey-patching any functions to make them "tracked". During normal operation, tracked functions simply call through to their original function, forwarding the return value. As a side-effect, they also emit a `call` event whenever they are invoked. diff --git a/code/lib/postinstall/README.md b/code/lib/postinstall/README.md index 73c776f45db8..44d12ca595b5 100644 --- a/code/lib/postinstall/README.md +++ b/code/lib/postinstall/README.md @@ -1,4 +1,4 @@ -# Storybook Postinstall Utilties +# Storybook Postinstall Utilities A minimal utility library for addons to update project configurations after the addon is installed via the [Storybook CLI](https://github.com/storybookjs/storybook/tree/main/lib/cli), e.g. `sb add docs`. diff --git a/code/presets/create-react-app/README.md b/code/presets/create-react-app/README.md index c4fa437a5db7..c20a9d2e7672 100644 --- a/code/presets/create-react-app/README.md +++ b/code/presets/create-react-app/README.md @@ -87,7 +87,7 @@ module.exports = { ### Custom `react-scripts` packages -In most cases, this preset will find your `react-scripts` package, even if it's a fork of the offical `react-scripts`. +In most cases, this preset will find your `react-scripts` package, even if it's a fork of the official `react-scripts`. In the event that it doesn't, you can set the package's name with `scriptsPackageName`. diff --git a/docs/api/main-config-core.md b/docs/api/main-config-core.md index 56c8cf978208..f2c16bf04913 100644 --- a/docs/api/main-config-core.md +++ b/docs/api/main-config-core.md @@ -204,4 +204,4 @@ Enable crash reports to be sent to Storybook [telemetry](../configure/telemetry. Type: `RendererName` - + diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md index 1748a54049b9..96d4a1eaefb6 100644 --- a/docs/sharing/publish-storybook.md +++ b/docs/sharing/publish-storybook.md @@ -166,7 +166,7 @@ Examples: [Netlify](https://www.netlify.com/), [S3](https://aws.amazon.com/en/s3 ## Search engine optimization (SEO) -If your Storybook is publically viewable, you may wish to configure how it is represented in search engine result pages. +If your Storybook is publicly viewable, you may wish to configure how it is represented in search engine result pages. ### Description diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx index 91b835eee7e8..6d5648a642fa 100644 --- a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx +++ b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx @@ -24,7 +24,7 @@ export const DelayedStory: Story = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the ammount of milliseconds between characters being typed + // The delay option set the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); diff --git a/docs/snippets/common/my-component-play-function-with-delay.js.mdx b/docs/snippets/common/my-component-play-function-with-delay.js.mdx index ace73e5f0ace..0cf7440c3c2d 100644 --- a/docs/snippets/common/my-component-play-function-with-delay.js.mdx +++ b/docs/snippets/common/my-component-play-function-with-delay.js.mdx @@ -18,7 +18,7 @@ export const DelayedStory = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the ammount of milliseconds between characters being typed + // The delay option set the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); diff --git a/docs/snippets/common/my-component-play-function-with-delay.ts-4-9.mdx b/docs/snippets/common/my-component-play-function-with-delay.ts-4-9.mdx index 690a07110717..38aa23283955 100644 --- a/docs/snippets/common/my-component-play-function-with-delay.ts-4-9.mdx +++ b/docs/snippets/common/my-component-play-function-with-delay.ts-4-9.mdx @@ -24,7 +24,7 @@ export const DelayedStory: Story = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the ammount of milliseconds between characters being typed + // The delay option set the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); diff --git a/docs/snippets/common/my-component-play-function-with-delay.ts.mdx b/docs/snippets/common/my-component-play-function-with-delay.ts.mdx index ac62dd697b9e..5996c79e3210 100644 --- a/docs/snippets/common/my-component-play-function-with-delay.ts.mdx +++ b/docs/snippets/common/my-component-play-function-with-delay.ts.mdx @@ -24,7 +24,7 @@ export const DelayedStory: Story = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the ammount of milliseconds between characters being typed + // The delay option set the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); diff --git a/docs/snippets/web-components/my-component-play-function-with-delay.js.mdx b/docs/snippets/web-components/my-component-play-function-with-delay.js.mdx index 4a5a8c0c03bf..60f9a6e971ff 100644 --- a/docs/snippets/web-components/my-component-play-function-with-delay.js.mdx +++ b/docs/snippets/web-components/my-component-play-function-with-delay.js.mdx @@ -16,7 +16,7 @@ export const DelayedStory = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the ammount of milliseconds between characters being typed + // The delay option set the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); diff --git a/docs/snippets/web-components/my-component-play-function-with-delay.ts.mdx b/docs/snippets/web-components/my-component-play-function-with-delay.ts.mdx index 9c832c572eab..6bc6c863b7a3 100644 --- a/docs/snippets/web-components/my-component-play-function-with-delay.ts.mdx +++ b/docs/snippets/web-components/my-component-play-function-with-delay.ts.mdx @@ -20,7 +20,7 @@ export const DelayedStory: Story = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the ammount of milliseconds between characters being typed + // The delay option set the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); From 7b2167af4796c43f1e8ce4632d102359dbfcdf75 Mon Sep 17 00:00:00 2001 From: Susheel Thapa Date: Thu, 26 Oct 2023 06:36:20 +0545 Subject: [PATCH 2/7] Updated wording --- .../common/my-component-play-function-with-delay.ts.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/snippets/common/my-component-play-function-with-delay.ts.mdx b/docs/snippets/common/my-component-play-function-with-delay.ts.mdx index 5996c79e3210..d23737666c79 100644 --- a/docs/snippets/common/my-component-play-function-with-delay.ts.mdx +++ b/docs/snippets/common/my-component-play-function-with-delay.ts.mdx @@ -24,7 +24,7 @@ export const DelayedStory: Story = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the amount of milliseconds between characters being typed + // The delay option sets the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); From b03f4025c40fc3ed2f6a3d9a35d8d5d958f136b6 Mon Sep 17 00:00:00 2001 From: Susheel Thapa Date: Fri, 27 Oct 2023 07:23:00 +0545 Subject: [PATCH 3/7] fix wording in multiple files --- .../angular/my-component-play-function-with-delay.ts.mdx | 2 +- .../common/my-component-play-function-with-delay.js.mdx | 2 +- .../common/my-component-play-function-with-delay.ts-4-9.mdx | 2 +- .../web-components/my-component-play-function-with-delay.js.mdx | 2 +- .../web-components/my-component-play-function-with-delay.ts.mdx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx index 6d5648a642fa..1160573a8c8e 100644 --- a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx +++ b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx @@ -24,7 +24,7 @@ export const DelayedStory: Story = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the amount of milliseconds between characters being typed + // The delay option sets the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); diff --git a/docs/snippets/common/my-component-play-function-with-delay.js.mdx b/docs/snippets/common/my-component-play-function-with-delay.js.mdx index 0cf7440c3c2d..32a66062e557 100644 --- a/docs/snippets/common/my-component-play-function-with-delay.js.mdx +++ b/docs/snippets/common/my-component-play-function-with-delay.js.mdx @@ -18,7 +18,7 @@ export const DelayedStory = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the amount of milliseconds between characters being typed + // The delay option sets the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); diff --git a/docs/snippets/common/my-component-play-function-with-delay.ts-4-9.mdx b/docs/snippets/common/my-component-play-function-with-delay.ts-4-9.mdx index 38aa23283955..1494692a1793 100644 --- a/docs/snippets/common/my-component-play-function-with-delay.ts-4-9.mdx +++ b/docs/snippets/common/my-component-play-function-with-delay.ts-4-9.mdx @@ -24,7 +24,7 @@ export const DelayedStory: Story = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the amount of milliseconds between characters being typed + // The delay option sets the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); diff --git a/docs/snippets/web-components/my-component-play-function-with-delay.js.mdx b/docs/snippets/web-components/my-component-play-function-with-delay.js.mdx index 60f9a6e971ff..048158d5ab64 100644 --- a/docs/snippets/web-components/my-component-play-function-with-delay.js.mdx +++ b/docs/snippets/web-components/my-component-play-function-with-delay.js.mdx @@ -16,7 +16,7 @@ export const DelayedStory = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the amount of milliseconds between characters being typed + // The delay option sets the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); diff --git a/docs/snippets/web-components/my-component-play-function-with-delay.ts.mdx b/docs/snippets/web-components/my-component-play-function-with-delay.ts.mdx index 6bc6c863b7a3..c3ea6b38dc81 100644 --- a/docs/snippets/web-components/my-component-play-function-with-delay.ts.mdx +++ b/docs/snippets/web-components/my-component-play-function-with-delay.ts.mdx @@ -20,7 +20,7 @@ export const DelayedStory: Story = { const exampleElement = canvas.getByLabelText('example-element'); - // The delay option set the amount of milliseconds between characters being typed + // The delay option sets the amount of milliseconds between characters being typed await userEvent.type(exampleElement, 'random string', { delay: 100, }); From 3fa771c2f0f4a0abfab61e3d3353e443d7af6759 Mon Sep 17 00:00:00 2001 From: nikospapcom Date: Fri, 27 Oct 2023 10:42:35 +0300 Subject: [PATCH 4/7] feat: Support next@14.0.0 --- code/frameworks/nextjs/package.json | 6 +- code/yarn.lock | 96 ++++++++++++++--------------- node_modules/.package-lock.json | 6 ++ 3 files changed, 57 insertions(+), 51 deletions(-) create mode 100644 node_modules/.package-lock.json diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 76fdfcd405e1..0be65ee2da6d 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -119,13 +119,13 @@ "@types/babel__core": "^7", "@types/babel__plugin-transform-runtime": "^7", "@types/babel__preset-env": "^7", - "next": "13.5.4", + "next": "14.0.0", "typescript": "^4.9.3", "webpack": "^5.65.0" }, "peerDependencies": { "@next/font": "^13.0.0", - "next": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0", + "next": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "webpack": "^5.0.0" @@ -145,7 +145,7 @@ } }, "engines": { - "node": ">=16.0.0" + "node": ">=18.17.0" }, "publishConfig": { "access": "public" diff --git a/code/yarn.lock b/code/yarn.lock index ac5d3a3cadb9..2e85205f3e12 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -3973,72 +3973,72 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:13.5.4": - version: 13.5.4 - resolution: "@next/env@npm:13.5.4" - checksum: 69c013047371bde6c4dc6d03ec77140059bd4e3db38c1991a8aa8a9c8ce4d1370b98a141145a6f60e23f32ce97a3040b448bfd0455b0d9e5ba6efda8df33c89f +"@next/env@npm:14.0.0": + version: 14.0.0 + resolution: "@next/env@npm:14.0.0" + checksum: c43e81dbd162a29a4b380342e416209d69d731e8ced7688d09668ec8196f543e358ed65adad81a26e943c63a293d7a018552f8389b6b1ac95cd0f63f4ef257c0 languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:13.5.4": - version: 13.5.4 - resolution: "@next/swc-darwin-arm64@npm:13.5.4" +"@next/swc-darwin-arm64@npm:14.0.0": + version: 14.0.0 + resolution: "@next/swc-darwin-arm64@npm:14.0.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:13.5.4": - version: 13.5.4 - resolution: "@next/swc-darwin-x64@npm:13.5.4" +"@next/swc-darwin-x64@npm:14.0.0": + version: 14.0.0 + resolution: "@next/swc-darwin-x64@npm:14.0.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:13.5.4": - version: 13.5.4 - resolution: "@next/swc-linux-arm64-gnu@npm:13.5.4" +"@next/swc-linux-arm64-gnu@npm:14.0.0": + version: 14.0.0 + resolution: "@next/swc-linux-arm64-gnu@npm:14.0.0" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:13.5.4": - version: 13.5.4 - resolution: "@next/swc-linux-arm64-musl@npm:13.5.4" +"@next/swc-linux-arm64-musl@npm:14.0.0": + version: 14.0.0 + resolution: "@next/swc-linux-arm64-musl@npm:14.0.0" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:13.5.4": - version: 13.5.4 - resolution: "@next/swc-linux-x64-gnu@npm:13.5.4" +"@next/swc-linux-x64-gnu@npm:14.0.0": + version: 14.0.0 + resolution: "@next/swc-linux-x64-gnu@npm:14.0.0" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:13.5.4": - version: 13.5.4 - resolution: "@next/swc-linux-x64-musl@npm:13.5.4" +"@next/swc-linux-x64-musl@npm:14.0.0": + version: 14.0.0 + resolution: "@next/swc-linux-x64-musl@npm:14.0.0" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:13.5.4": - version: 13.5.4 - resolution: "@next/swc-win32-arm64-msvc@npm:13.5.4" +"@next/swc-win32-arm64-msvc@npm:14.0.0": + version: 14.0.0 + resolution: "@next/swc-win32-arm64-msvc@npm:14.0.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:13.5.4": - version: 13.5.4 - resolution: "@next/swc-win32-ia32-msvc@npm:13.5.4" +"@next/swc-win32-ia32-msvc@npm:14.0.0": + version: 14.0.0 + resolution: "@next/swc-win32-ia32-msvc@npm:14.0.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:13.5.4": - version: 13.5.4 - resolution: "@next/swc-win32-x64-msvc@npm:13.5.4" +"@next/swc-win32-x64-msvc@npm:14.0.0": + version: 14.0.0 + resolution: "@next/swc-win32-x64-msvc@npm:14.0.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -7323,7 +7323,7 @@ __metadata: fs-extra: "npm:^11.1.0" image-size: "npm:^1.0.0" loader-utils: "npm:^3.2.0" - next: "npm:13.5.4" + next: "npm:14.0.0" node-polyfill-webpack-plugin: "npm:^2.0.1" pnp-webpack-plugin: "npm:^1.7.0" postcss: "npm:^8.4.21" @@ -7340,7 +7340,7 @@ __metadata: webpack: "npm:^5.65.0" peerDependencies: "@next/font": ^13.0.0 - next: ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 + next: ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 webpack: ^5.0.0 @@ -23937,20 +23937,20 @@ __metadata: languageName: node linkType: hard -"next@npm:13.5.4": - version: 13.5.4 - resolution: "next@npm:13.5.4" - dependencies: - "@next/env": "npm:13.5.4" - "@next/swc-darwin-arm64": "npm:13.5.4" - "@next/swc-darwin-x64": "npm:13.5.4" - "@next/swc-linux-arm64-gnu": "npm:13.5.4" - "@next/swc-linux-arm64-musl": "npm:13.5.4" - "@next/swc-linux-x64-gnu": "npm:13.5.4" - "@next/swc-linux-x64-musl": "npm:13.5.4" - "@next/swc-win32-arm64-msvc": "npm:13.5.4" - "@next/swc-win32-ia32-msvc": "npm:13.5.4" - "@next/swc-win32-x64-msvc": "npm:13.5.4" +"next@npm:14.0.0": + version: 14.0.0 + resolution: "next@npm:14.0.0" + dependencies: + "@next/env": "npm:14.0.0" + "@next/swc-darwin-arm64": "npm:14.0.0" + "@next/swc-darwin-x64": "npm:14.0.0" + "@next/swc-linux-arm64-gnu": "npm:14.0.0" + "@next/swc-linux-arm64-musl": "npm:14.0.0" + "@next/swc-linux-x64-gnu": "npm:14.0.0" + "@next/swc-linux-x64-musl": "npm:14.0.0" + "@next/swc-win32-arm64-msvc": "npm:14.0.0" + "@next/swc-win32-ia32-msvc": "npm:14.0.0" + "@next/swc-win32-x64-msvc": "npm:14.0.0" "@swc/helpers": "npm:0.5.2" busboy: "npm:1.6.0" caniuse-lite: "npm:^1.0.30001406" @@ -23988,7 +23988,7 @@ __metadata: optional: true bin: next: dist/bin/next - checksum: 0b0bc7fa42844859a0444a79122a48b5e65116c30ce077a3edaaecd7cee1d7925214a659391ae6ecf8dc612869a7a646ab3a1a8aa12d074ff17e3f18c53a2621 + checksum: cfb18a72d6e1d875efb1bb3806f9a06551f482c5cb87231e77e179a71d26f3d43700290988ad27e739302bfa7ff8ac8081aafd5456c39a2819fdd315617e5acf languageName: node linkType: hard diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json new file mode 100644 index 000000000000..b157d40c0f7a --- /dev/null +++ b/node_modules/.package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "@storybook/root", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} From 83f4ef010ce052b1d7599cc42db7b980ac65dab0 Mon Sep 17 00:00:00 2001 From: nikospapcom Date: Fri, 27 Oct 2023 10:50:53 +0300 Subject: [PATCH 5/7] chore: Remove package-lock file --- node_modules/.package-lock.json | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 node_modules/.package-lock.json diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json deleted file mode 100644 index b157d40c0f7a..000000000000 --- a/node_modules/.package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "@storybook/root", - "lockfileVersion": 3, - "requires": true, - "packages": {} -} From a27e78999178fae5c6558a2cb6548edd32e286b5 Mon Sep 17 00:00:00 2001 From: nikospapcom Date: Fri, 27 Oct 2023 11:34:01 +0300 Subject: [PATCH 6/7] chore: Revert node engine to 16 --- code/frameworks/nextjs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 0be65ee2da6d..c4d58b73f0f1 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -145,7 +145,7 @@ } }, "engines": { - "node": ">=18.17.0" + "node": ">=16.0.0" }, "publishConfig": { "access": "public" From 715381c08d83ad68a5fd3b3502587f29c990edfd Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 27 Oct 2023 15:07:18 +0200 Subject: [PATCH 7/7] Fix next/legacy/image imports for Next.js v14 --- code/frameworks/nextjs/package.json | 4 ++-- code/frameworks/nextjs/src/images/webpack.ts | 2 +- code/frameworks/nextjs/src/nextImport/webpack.ts | 12 ++---------- code/yarn.lock | 6 +++--- 4 files changed, 8 insertions(+), 16 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index c4d58b73f0f1..d5ba68b05c9f 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -119,12 +119,12 @@ "@types/babel__core": "^7", "@types/babel__plugin-transform-runtime": "^7", "@types/babel__preset-env": "^7", - "next": "14.0.0", + "next": "^14.0.0", "typescript": "^4.9.3", "webpack": "^5.65.0" }, "peerDependencies": { - "@next/font": "^13.0.0", + "@next/font": "^13.0.0|| ^14.0.0", "next": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/frameworks/nextjs/src/images/webpack.ts b/code/frameworks/nextjs/src/images/webpack.ts index e6b91f0712d3..e80e03545beb 100644 --- a/code/frameworks/nextjs/src/images/webpack.ts +++ b/code/frameworks/nextjs/src/images/webpack.ts @@ -20,7 +20,7 @@ const configureImageDefaults = (baseConfig: WebpackConfig): void => { 'next/image': path.resolve(__dirname, './images/next-image'), }; - if (semver.satisfies(version, '^13.0.0')) { + if (semver.satisfies(version, '>=13.0.0')) { resolve.alias = { ...resolve.alias, 'sb-original/next/legacy/image': require.resolve('next/legacy/image'), diff --git a/code/frameworks/nextjs/src/nextImport/webpack.ts b/code/frameworks/nextjs/src/nextImport/webpack.ts index b017462ae256..fc5d359ef8e2 100644 --- a/code/frameworks/nextjs/src/nextImport/webpack.ts +++ b/code/frameworks/nextjs/src/nextImport/webpack.ts @@ -7,20 +7,11 @@ export function configureNextImport(baseConfig: WebpackConfig) { const nextJSVersion = getNextjsVersion(); const isNext12 = semver.satisfies(nextJSVersion, '~12'); - const isNext13 = semver.satisfies(nextJSVersion, '~13'); const isNextVersionSmallerThan12dot2 = semver.lt(nextJSVersion, '12.2.0'); const isNextVersionSmallerThan13 = semver.lt(nextJSVersion, '13.0.0'); baseConfig.plugins = baseConfig.plugins ?? []; - if (!isNext13) { - baseConfig.plugins.push( - new IgnorePlugin({ - resourceRegExp: /next\/legacy\/image$/, - }) - ); - } - if (!isNext12 || isNextVersionSmallerThan12dot2) { baseConfig.plugins.push( new IgnorePlugin({ @@ -32,7 +23,8 @@ export function configureNextImport(baseConfig: WebpackConfig) { if (isNextVersionSmallerThan13) { baseConfig.plugins.push( new IgnorePlugin({ - resourceRegExp: /next\/dist\/shared\/lib\/hooks-client-context$/, + // ignore next/dist/shared/lib/hooks-client-context and next/legacy/image imports + resourceRegExp: /(next\/dist\/shared\/lib\/hooks-client-context|next\/legacy\/image)$/, }) ); } diff --git a/code/yarn.lock b/code/yarn.lock index 2e85205f3e12..a4f61e11d94f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7323,7 +7323,7 @@ __metadata: fs-extra: "npm:^11.1.0" image-size: "npm:^1.0.0" loader-utils: "npm:^3.2.0" - next: "npm:14.0.0" + next: "npm:^14.0.0" node-polyfill-webpack-plugin: "npm:^2.0.1" pnp-webpack-plugin: "npm:^1.7.0" postcss: "npm:^8.4.21" @@ -7339,7 +7339,7 @@ __metadata: typescript: "npm:^4.9.3" webpack: "npm:^5.65.0" peerDependencies: - "@next/font": ^13.0.0 + "@next/font": ^13.0.0|| ^14.0.0 next: ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -23937,7 +23937,7 @@ __metadata: languageName: node linkType: hard -"next@npm:14.0.0": +"next@npm:^14.0.0": version: 14.0.0 resolution: "next@npm:14.0.0" dependencies: