Merge branch 'next' into next-jd-add-missing-barHoverColor-in-your-th…

…eme.js-snippet

.circleci/config.yml

@@ -614,30 +614,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 36
+          parallelism: 35
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 36
+          parallelism: 35
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 33
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 31
+          parallelism: 30
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 31
+          parallelism: 30
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 7.6.3
+
+- Next.js: Fix next/font/local usage in babel mode - [#25045](https://github.com/storybookjs/storybook/pull/25045), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
+## 7.6.2
+
+- CLI: Improve dependency metadata detection in storybook doctor - [#25037](https://github.com/storybookjs/storybook/pull/25037), thanks [@yannbf](https://github.com/yannbf)!
+- React-Docgen: Make error-handling more gentle - [#25055](https://github.com/storybookjs/storybook/pull/25055), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
 ## 7.6.1
 
 - Next.js: Fix AppRouterProvider usage - [#25032](https://github.com/storybookjs/storybook/pull/25032), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!

MIGRATION.md

@@ -9,6 +9,10 @@
     - [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
     - [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)
@@ -321,6 +325,7 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+
 ## From version 7.x to 8.0.0
 
 ### Implicit actions can not be used during rendering (for example in the play function)
@@ -442,6 +447,32 @@ The `IconButton` doesn't have any deprecated props but it now uses the new `Butt
 
 In Storybook 8.0 we are introducing a new icon library available with `@storybook/icons`. We are deprecating the `Icons` component in `@storybook/components` and recommend that addon creators and Storybook maintainers use the new `@storybook/icons` component instead.
 
+#### React-docgen component analysis by default
+
+In Storybook 7, we used `react-docgen-typescript` to analyze React component props and auto-generate controls. In Storybook 8, we have moved to `react-docgen` as the new default. `react-docgen` is dramatically more efficient, shaving seconds off of dev startup times. However, it only analyzes basic TypeScript constructs.
+
+We feel `react-docgen` is the right tradeoff for most React projects. However, if you need the full fidelity of `react-docgen-typescript`, you can opt-in using the following setting in `.storybook/main.js`:
+
+```js
+export default {
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  }
+}
+```
+
+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

code/addons/docs/react/README.md

@@ -15,7 +15,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
 - [Props tables](#props-tables)
 - [MDX](#mdx)
 - [Inline stories](#inline-stories)
-- [TypeScript props with `react-docgen`](#typescript-props-with-react-docgen)
+- [TypeScript props with `react-docgen-typescript`](#typescript-props-with-react-docgen-typescript)
 - [More resources](#more-resources)
 
 ## Installation
@@ -108,17 +108,17 @@ To do so for all stories, update `.storybook/preview.js`:
 export const parameters = { docs: { story: { inline: false } } };
 ```
 
-## TypeScript props with `react-docgen`
+## TypeScript props with `react-docgen-typescript`
 
-If you're using TypeScript, there are two different options for generating props: `react-docgen-typescript` (default) or `react-docgen`.
+If you're using TypeScript, there are two different options for generating props: `react-docgen` (default) or `react-docgen-typescript`.
 
 You can add the following lines to your `.storybook/main.js` to switch between the two (or disable docgen):
 
 ```js
 export default {
   typescript: {
-    // also valid 'react-docgen-typescript' | false
-    reactDocgen: 'react-docgen',
+    // also valid 'react-docgen' | false
+    reactDocgen: 'react-docgen-typescript',
   },
 };
 ```
@@ -129,7 +129,7 @@ Neither option is perfect, so here's everything you should know if you're thinki
 | --------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
 | **Features**    | **Great**. The analysis produces great results which gives the best props table experience.                               | **OK**. React-docgen produces basic results that are fine for most use cases.                         |
 | **Performance** | **Slow**. It's doing a lot more work to produce those results, and may also have an inefficient implementation.           | **Blazing fast**. Adding it to your project increases build time negligibly.                          |
-| **Bugs**        | **Many**. There are a lot of corner cases that are not handled properly, and are annoying for developers.                 | **Few**. But there's a dealbreaker, which is lack for imported types (see below).                     |
+| **Bugs**        | **Some**. There are corner cases that are not handled properly, and are annoying for developers.                          | **Some**. There are corner cases that are not handled properly, and are annoying for developers.      |
 | **SB docs**     | **Good**. Our prop tables have supported `react-docgen-typescript` results from the beginning, so it's relatively stable. | **OK**. There are some obvious improvements to fully support `react-docgen`, and they're coming soon. |
 
 **Performance** is a common question, so here are build times from a random project to quantify. Your mileage may vary:
@@ -140,34 +140,6 @@ Neither option is perfect, so here's everything you should know if you're thinki
 | react-docgen            | 29s        |
 | none                    | 28s        |
 
-The biggest limitation of `react-docgen` is lack of support for imported types. What that means is that when a component uses a type defined in another file or package, `react-docgen` is unable to extract props information for that type.
-
-```tsx
-import React, { FC } from 'react';
-import SomeType from './someFile';
-
-type NewType = SomeType & { foo: string };
-const MyComponent: FC<NewType> = ...
-```
-
-So in the previous example, `SomeType` would simply be ignored! There's an [open PR for this in the `react-docgen` repo](https://github.com/reactjs/react-docgen/pull/352) which you can upvote if it affects you.
-
-Another common pitfall when switching to `react-docgen` is [lack of support for `React.FC`](https://github.com/reactjs/react-docgen/issues/387). This means that the following common pattern **DOESN'T WORK**:
-
-```tsx
-import React, { FC } from 'react';
-interface IProps { ... };
-const MyComponent: FC<IProps> = ({ ... }) => ...
-```
-
-Fortunately, the following workaround works:
-
-```tsx
-const MyComponent: FC<IProps> = ({ ... }: IProps) => ...
-```
-
-Please upvote [the issue](https://github.com/reactjs/react-docgen/issues/387) if this is affecting your productivity, or better yet, submit a fix!
-
 ## More resources
 
 Want to learn more? Here are some more articles on Storybook Docs:

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",

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",

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';

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';

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",

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: