Merge branch 'next' into marklb/fix-multi-ng-app-rendering

Marklb · Dec 6, 2023 · 5600238 · 5600238
2 parents 29ab192 + 7bee11f
commit 5600238
Show file tree

Hide file tree

Showing 218 changed files with 4,844 additions and 3,117 deletions.
diff --git a/Issue.md b/Issue.md
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -10,6 +10,9 @@
     - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
     - [Icons is deprecated](#icons-is-deprecated)
     - [React-docgen component analysis by default](#react-docgen-component-analysis-by-default)
+  - [Framework-specific changes](#framework-specific-changes)
+    - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15)
+    - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -460,6 +463,16 @@ export default {
 
 For more information see: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgen
 
+### Framework-specific changes
+
+#### Angular: Drop support for Angular \< 15
+
+Starting in 8.0, we drop support for Angular < 15
+
+#### Next.js: Drop support for version \< 13.5
+
+Starting in 8.0, we drop support for Next.js < 13.5.
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated

diff --git a/README.md b/README.md
@@ -131,21 +131,21 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 | [measure](code/addons/measure/)                                           | Visually inspect the layout and box model within the Storybook UI          |
 | [outline](code/addons/outline/)                                           | Visually debug the CSS layout and alignment within the Storybook UI        |
 | [query params](https://github.com/storybookjs/addon-queryparams)          | Mock query params                                                          |
-| [storyshots](code/addons/storyshots-core/)                                | Snapshot testing for components in Storybook                               |
 | [storysource](code/addons/storysource/)                                   | View the code of your stories within the Storybook UI                      |
 | [viewport](code/addons/viewport/)                                         | Change display sizes and layouts for responsive components using Storybook |
 
 See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
 
 ### Deprecated Addons
 
-| Addons                                                                             |                                                            |
-| ---------------------------------------------------------------------------------- | ---------------------------------------------------------- |
-| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/)             | Addon for driving your components under dynamic contexts   |
-| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info)   | Annotate stories with extra component usage information    |
-| [knobs](https://github.com/storybookjs/addon-knobs)                                | Interactively edit component prop data in the Storybook UI |
-| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes                      |
-| [options](https://www.npmjs.com/package/@storybook/addon-options)                  | Customize the Storybook UI in code                         |
+| Addons                                                                                       |                                                            |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/)                       | Addon for driving your components under dynamic contexts   |
+| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info)             | Annotate stories with extra component usage information    |
+| [knobs](https://github.com/storybookjs/addon-knobs)                                          | Interactively edit component prop data in the Storybook UI |
+| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes)           | Annotate Storybook stories with notes                      |
+| [options](https://www.npmjs.com/package/@storybook/addon-options)                            | Customize the Storybook UI in code                         |
+| [storyshots](https://github.com/storybookjs/storybook/tree/main/code/addons/storyshots-core) | Snapshot testing for components in Storybook               |
 
 To continue improving your experience, we have to eventually deprecate certain addons in favor of new and better tools.
 

diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
@@ -47,6 +47,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
+    "@storybook/source-loader": "workspace:*",
     "estraverse": "^5.2.0",
     "tiny-invariant": "^1.3.1"
   },
@@ -56,7 +57,6 @@
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/router": "workspace:*",
-    "@storybook/source-loader": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@types/react": "^18.0.37",
     "@types/react-syntax-highlighter": "11.0.5",

diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
@@ -30,8 +30,6 @@
       "import": "./dist/index.mjs"
     },
     "./manager": "./dist/manager.js",
-    "./preview": "./dist/preview.ts",
-    "./register": "./dist/manager.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -74,9 +72,6 @@
     ],
     "managerEntries": [
       "./src/manager.tsx"
-    ],
-    "previewEntries": [
-      "./src/preview.ts"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",

diff --git a/code/addons/viewport/src/index.ts b/code/addons/viewport/src/index.ts
@@ -1,4 +1,2 @@
-export * from './constants';
 export * from './defaults';
-export * from './models';
-export * from './shortcuts';
+export type * from './models';
diff --git a/code/addons/viewport/src/models/index.ts b/code/addons/viewport/src/models/index.ts
@@ -1,2 +1,2 @@
-export * from './Viewport';
-export * from './ViewportAddonParameter';
+export type * from './Viewport';
+export type * from './ViewportAddonParameter';
diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts
diff --git a/code/e2e-tests/addon-actions.spec.ts b/code/e2e-tests/addon-actions.spec.ts
@@ -3,9 +3,16 @@ import process from 'process';
 import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 
 test.describe('addon-actions', () => {
   test('should trigger an action', async ({ page }) => {
+    // eslint-disable-next-line jest/no-disabled-tests
+    test.skip(
+      // eslint-disable-next-line jest/valid-title
+      templateName.includes('svelte') && templateName.includes('prerelease'),
+      'Svelte 5 prerelase does not support automatic actions with our current example components yet'
+    );
     await page.goto(storybookUrl);
     const sbPage = new SbPage(page);
     sbPage.waitUntilLoaded();

diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
@@ -65,18 +65,18 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1600.0-rc.4",
-    "@angular-devkit/build-angular": "^16.0.0-rc.4",
-    "@angular-devkit/core": "^16.0.0-rc.4",
-    "@angular/animations": "^16.0.0-rc.4",
-    "@angular/cli": "^16.0.0-rc.4",
-    "@angular/common": "^16.0.0-rc.4",
-    "@angular/compiler": "^16.0.0-rc.4",
-    "@angular/compiler-cli": "^16.0.0-rc.4",
-    "@angular/core": "^16.0.0-rc.4",
-    "@angular/forms": "^16.0.0-rc.4",
-    "@angular/platform-browser": "^16.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "^16.0.0-rc.4",
+    "@angular-devkit/architect": "^0.1700.5",
+    "@angular-devkit/build-angular": "^17.0.5",
+    "@angular-devkit/core": "^17.0.5",
+    "@angular/animations": "^17.0.5",
+    "@angular/cli": "^17.0.5",
+    "@angular/common": "^17.0.5",
+    "@angular/compiler": "^17.0.5",
+    "@angular/compiler-cli": "^17.0.5",
+    "@angular/core": "^17.0.5",
+    "@angular/forms": "^17.0.5",
+    "@angular/platform-browser": "^17.0.5",
+    "@angular/platform-browser-dynamic": "^17.0.5",
     "@types/cross-spawn": "^6.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
@@ -86,20 +86,20 @@
     "tmp": "^0.2.1",
     "typescript": "^5.3.2",
     "webpack": "5",
-    "zone.js": "^0.13.0"
+    "zone.js": "^0.14.2"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1400.0 < 0.1800.0",
-    "@angular-devkit/build-angular": ">=14.1.0 < 18.0.0",
-    "@angular-devkit/core": ">=14.1.0 < 18.0.0",
-    "@angular/cli": ">=14.1.0 < 18.0.0",
-    "@angular/common": ">=14.1.0 < 18.0.0",
-    "@angular/compiler": ">=14.1.0 < 18.0.0",
-    "@angular/compiler-cli": ">=14.1.0 < 18.0.0",
-    "@angular/core": ">=14.1.0 < 18.0.0",
-    "@angular/forms": ">=14.1.0 < 18.0.0",
-    "@angular/platform-browser": ">=14.1.0 < 18.0.0",
-    "@angular/platform-browser-dynamic": ">=14.1.0 < 18.0.0",
+    "@angular-devkit/architect": ">=0.1500.0 < 0.1800.0",
+    "@angular-devkit/build-angular": ">=15.0.0 < 18.0.0",
+    "@angular-devkit/core": ">=15.0.0 < 18.0.0",
+    "@angular/cli": ">=15.0.0 < 18.0.0",
+    "@angular/common": ">=15.0.0 < 18.0.0",
+    "@angular/compiler": ">=15.0.0 < 18.0.0",
+    "@angular/compiler-cli": ">=15.0.0 < 18.0.0",
+    "@angular/core": ">=15.0.0 < 18.0.0",
+    "@angular/forms": ">=15.0.0 < 18.0.0",
+    "@angular/platform-browser": ">=15.0.0 < 18.0.0",
+    "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0",
     "@babel/core": "*",
     "rxjs": "^6.0.0 || ^7.4.0",
     "typescript": "^4.0.0 || ^5.0.0",

diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md
@@ -40,6 +40,7 @@
   - [Runtime Config](#runtime-config)
   - [Custom Webpack Config](#custom-webpack-config)
   - [Typescript](#typescript)
+  - [Experimental React Server Components (RSC)](#experimental-react-server-components-rsc)
   - [Notes for Yarn v2 and v3 users](#notes-for-yarn-v2-and-v3-users)
   - [FAQ](#faq)
     - [Stories for pages/components which fetch data](#stories-for-pagescomponents-which-fetch-data)
@@ -268,7 +269,6 @@ The following features are not supported (yet). Support for these features might
 - [Support font loaders configuration in next.config.js](https://nextjs.org/docs/basic-features/font-optimization#specifying-a-subset)
 - [fallback](https://nextjs.org/docs/api-reference/next/font#fallback) option
 - [adjustFontFallback](https://nextjs.org/docs/api-reference/next/font#adjustfontfallback) option
-- [declarations](https://nextjs.org/docs/api-reference/next/font#declarations) option
 - [preload](https://nextjs.org/docs/api-reference/next/font#preload) option gets ignored. Storybook handles Font loading its own way.
 - [display](https://nextjs.org/docs/api-reference/next/font#display) option gets ignored. All fonts are loaded with display set to "block" to make Storybook load the font properly.
 
@@ -909,6 +909,39 @@ Storybook handles most [Typescript](https://www.typescriptlang.org/) configurati
 }
 ```
 
+### Experimental React Server Components (RSC)
+
+If your app uses [React Server Components (RSC)](https://nextjs.org/docs/app/building-your-application/rendering/server-components), Storybook can render them in stories in the browser.
+
+To enable this set the `experimentalNextRSC` feature flag in your `.storybook/main.js` config:
+
+```js
+// main.js
+export default {
+  features: {
+    experimentalNextRSC: true,
+  },
+};
+```
+
+Setting this flag automatically wraps your story in a [Suspense](https://react.dev/reference/react/Suspense) wrapper, which is able to render asynchronous components in NextJS's version of React.
+
+If this wrapper causes problems in any of your existing stories, you can selectively disable it using the `nextjs.rsc` [parameter](https://storybook.js.org/docs/writing-stories/parameters) at the global/component/story level:
+
+```js
+// MyServerComponent.stories.js
+export default {
+  component: MyServerComponent,
+  parameters: { nextjs: { rsc: false } },
+};
+```
+
+Note that wrapping your server components in Suspense does not help if your server components access server-side resources like the file system or Node-specific libraries. To deal work around this, you'll need to mock out your data access layer using [Webpack aliases](https://webpack.js.org/configuration/resolve/#resolvealias) or an addon like [storybook-addon-module-mock](https://storybook.js.org/addons/storybook-addon-module-mock).
+
+If your server components access data via the network, we recommend using the [MSW Storybook Addon](https://storybook.js.org/addons/msw-storybook-addon) to mock network requests.
+
+In the future we will provide better mocking support in Storybook and support for [Server Actions](https://nextjs.org/docs/app/api-reference/functions/server-actions).
+
 ### Notes for Yarn v2 and v3 users
 
 If you're using [Yarn](https://yarnpkg.com/) v2 or v3, you may run into issues where Storybook can't resolve `style-loader` or `css-loader`. For example, you might get errors like:

diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
@@ -32,16 +32,6 @@
       "require": "./dist/image-context.js",
       "import": "./dist/image-context.mjs"
     },
-    "./dist/routing/app-router-provider": {
-      "types": "./dist/routing/app-router-provider.d.ts",
-      "require": "./dist/routing/app-router-provider.js",
-      "import": "./dist/routing/app-router-provider.mjs"
-    },
-    "./dist/routing/app-router-provider-mock": {
-      "types": "./dist/routing/app-router-provider-mock.d.ts",
-      "require": "./dist/routing/app-router-provider-mock.js",
-      "import": "./dist/routing/app-router-provider-mock.mjs"
-    },
     "./preset": {
       "types": "./dist/preset.d.ts",
       "require": "./dist/preset.js"
@@ -52,6 +42,7 @@
       "import": "./dist/font/webpack/loader/storybook-nextjs-font-loader.mjs"
     },
     "./dist/preview.mjs": "./dist/preview.mjs",
+    "./dist/previewRSC.mjs": "./dist/previewRSC.mjs",
     "./next-image-loader-stub.js": {
       "types": "./dist/next-image-loader-stub.d.ts",
       "require": "./dist/next-image-loader-stub.js",
@@ -137,16 +128,12 @@
     "webpack": "^5.65.0"
   },
   "peerDependencies": {
-    "@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",
+    "next": "^13.5.0 || ^14.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "webpack": "^5.0.0"
   },
   "peerDependenciesMeta": {
-    "@next/font": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     },
@@ -166,13 +153,11 @@
       "./src/index.ts",
       "./src/preset.ts",
       "./src/preview.tsx",
+      "./src/previewRSC.tsx",
       "./src/next-image-loader-stub.ts",
       "./src/images/decorator.tsx",
-      "./src/images/next-future-image.tsx",
       "./src/images/next-legacy-image.tsx",
       "./src/images/next-image.tsx",
-      "./src/routing/app-router-provider.tsx",
-      "./src/routing/app-router-provider-mock.tsx",
       "./src/font/webpack/loader/storybook-nextjs-font-loader.ts",
       "./src/swc/next-swc-loader-patch.ts"
     ],