Release: Prerelease 8.0.0-alpha.1

.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,19 @@
+## 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)!
+- SvelteKit: Fix HMR not working - [#25031](https://github.com/storybookjs/storybook/pull/25031), thanks [@JReinhold](https://github.com/JReinhold)!
+- Test: Downgrade @testing-library/user-event to 14.3.0 - [#25004](https://github.com/storybookjs/storybook/pull/25004), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Webpack: Fix exclude regex in react-docgen-loader - [#25030](https://github.com/storybookjs/storybook/pull/25030), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
 ## 7.6.0
 
 Storybook 7.6 is here with increased performance and much more!

CHANGELOG.prerelease.md

@@ -1,3 +1,27 @@
+## 8.0.0-alpha.1
+
+- Angular: Drop v14.x support - [#25101](https://github.com/storybookjs/storybook/pull/25101), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Angular: Fix CSF Plugin - [#25098](https://github.com/storybookjs/storybook/pull/25098), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Build: Fix Angular sandbox - [#23896](https://github.com/storybookjs/storybook/pull/23896), thanks [@Marklb](https://github.com/Marklb)!
+- CLI: Improve dependency metadata detection in storybook doctor - [#25037](https://github.com/storybookjs/storybook/pull/25037), thanks [@yannbf](https://github.com/yannbf)!
+- CLI: Point the update-notice to the changelog in the suggested version - [#19911](https://github.com/storybookjs/storybook/pull/19911), thanks [@cprecioso](https://github.com/cprecioso)!
+- CLI: Typescript strict mode - [#22254](https://github.com/storybookjs/storybook/pull/22254), thanks [@0916dhkim](https://github.com/0916dhkim)!
+- CSF: Autotitle fix multiple dots and handle stories.js - [#21840](https://github.com/storybookjs/storybook/pull/21840), thanks [@agriffis](https://github.com/agriffis)!
+- Next.js: Add next/font/local declarations support - [#24983](https://github.com/storybookjs/storybook/pull/24983), thanks [@MauricioRobayo](https://github.com/MauricioRobayo)!
+- Next.js: Drop Next.js < v13.5 support - [#25104](https://github.com/storybookjs/storybook/pull/25104), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Next.js: Fix AppRouterProvider usage - [#25032](https://github.com/storybookjs/storybook/pull/25032), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Next.js: Fix next/font/local usage in babel mode - [#25045](https://github.com/storybookjs/storybook/pull/25045), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Next.js: Update validateData function for next/font compatibility - [#25061](https://github.com/storybookjs/storybook/pull/25061), thanks [@kkirby](https://github.com/kkirby)!
+- NextJS: Add experimental RSC support - [#25091](https://github.com/storybookjs/storybook/pull/25091), thanks [@shilman](https://github.com/shilman)!
+- React-Docgen: Make error-handling more gentle - [#25055](https://github.com/storybookjs/storybook/pull/25055), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- React: Change `StoryFnReactReturnType` to `JSX.Element` - [#23204](https://github.com/storybookjs/storybook/pull/23204), thanks [@chakAs3](https://github.com/chakAs3)!
+- React: Set `react-docgen` to default TS docgen - [#24165](https://github.com/storybookjs/storybook/pull/24165), thanks [@shilman](https://github.com/shilman)!
+- SvelteKit: Fix HMR not working - [#25031](https://github.com/storybookjs/storybook/pull/25031), thanks [@JReinhold](https://github.com/JReinhold)!
+- TypeScript: Migrate `@storybook/docs-tools` to strict TS - [#22567](https://github.com/storybookjs/storybook/pull/22567), thanks [@efrenaragon96](https://github.com/efrenaragon96)!
+- UI: Add stricter types to the language property of the SyntaxHighlighter - [#22790](https://github.com/storybookjs/storybook/pull/22790), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Viewport: Fix viewport dts files - [#25107](https://github.com/storybookjs/storybook/pull/25107), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Webpack: Fix exclude regex in react-docgen-loader - [#25030](https://github.com/storybookjs/storybook/pull/25030), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
 ## 8.0.0-alpha.0
 
 - Addon Viewport: Expose types for user parameter validation - [#24896](https://github.com/storybookjs/storybook/pull/24896), thanks [@piratetaco](https://github.com/piratetaco)!

MIGRATION.md

@@ -3,11 +3,16 @@
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
   - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
   - [Core changes](#core-changes)
+    - [Autotitle breaking fixes](#autotitle-breaking-fixes)
     - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons)
-      - [Storyshots has been removed](#storyshots-has-been-removed)
+    - [Storyshots has been removed](#storyshots-has-been-removed)
     - [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)
@@ -320,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)
@@ -373,14 +379,26 @@ To summarize:
 
 ### Core changes
 
+#### Autotitle breaking fixes
+
+In Storybook 7, the file name `path/to/foo.bar.stories.js` would result in the [autotitle](https://storybook.js.org/docs/react/configure/overview#configure-story-loading) `path/to/foo`. In 8.0, this has been changed to generate `path/to/foo.bar`. We consider this a bugfix but it is also a breaking change if you depended on the old behavior. To get the old titles, you can manually specify the desired title in the default export of your story file. For example:
+
+```js
+export default {
+  title: 'path/to/foo',
+}
+```
+
+Alternatively, if you need to achieve a different behavior for a large number of files, you can provide a [custom indexer](https://storybook.js.org/docs/7.0/vue/configure/sidebar-and-urls#processing-custom-titles) to generate the titles dynamically.
+
 #### React v18 in the manager UI (including addons)
 
 Storybook 7 used React 16 in the manager. In Storybook 8 this is upgraded to react v18.
 Addons that inject UI into panels, tools, etc. are possibly affected by this.
 
 Addon authors are advised to upgrade to react v18.
 
-##### Storyshots has been removed
+#### Storyshots has been removed
 
 Storyshots was an addon for storybook which allowed users to turn their stories into automated snapshot-tests.
 
@@ -429,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

README.md

@@ -91,7 +91,7 @@ Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/confi
 
 ### Community
 
-For additional help, join us in the [Storybook Discord](https://discord.gg/storybook).
+For additional help, share your issue in [the repo's GitHub Discussions](https://github.com/storybookjs/storybook/discussions/new?category=help).
 
 ## Projects
 

code/addons/controls/README.md

@@ -44,7 +44,7 @@ Addon-knobs is one of Storybook's most popular addons with over 1M weekly downlo
 
 Therefore, rather than deprecating addon-knobs immediately, we will continue to release knobs with the Storybook core distribution until 7.0. This will give us time to improve Controls based on user feedback, and also give knobs users ample time to migrate.
 
-If you are somehow tied to knobs or prefer the knobs interface, we are happy to take on maintainers for the knobs project. If this interests you, hop on our [Discord](https://discord.gg/storybook).
+If you are somehow tied to knobs or prefer the knobs interface, we are happy to take on maintainers for the knobs project. If this interests you, please get in touch with us in the [`#contributing`](https://discord.com/channels/486522875931656193/839297503446695956) Discord channel.
 
 ### How do I migrate from addon-knobs?
 

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