Merge branch 'next' into chore/upgrade-testing-libs

.circleci/config.yml

@@ -86,7 +86,7 @@ jobs:
       - restore_cache:
           name: Restore Yarn cache
           keys:
-            - build-yarn-2-cache-v2--{{ checksum "yarn.lock" }}
+            - build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
       - run:
           name: Install dependencies
           command: yarn install --immutable
@@ -95,7 +95,7 @@ jobs:
           command: yarn bootstrap --core
       - save_cache:
           name: Save Yarn cache
-          key: build-yarn-2-cache-v2--{{ checksum "yarn.lock" }}
+          key: build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
           paths:
             - ~/.yarn/berry/cache
       - persist_to_workspace:
@@ -136,7 +136,7 @@ jobs:
     executor:
       class: medium
       name: sb_node_14_browsers
-    parallelism: 4
+    parallelism: 17
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

CHANGELOG.md

@@ -1,3 +1,75 @@
+## 6.5.0-alpha.48 (March 14, 2022)
+
+### Features
+
+- Addon-docs: Auto-disable docs presets if docs/controls unused ([#17697](https://github.com/storybookjs/storybook/pull/17697))
+
+### Bug Fixes
+
+- Web-components: Fix CSS class usage in CLI template ([#17702](https://github.com/storybookjs/storybook/pull/17702))
+
+### Maintenance
+
+- Addon-docs: Refactor docs support into individual framework packages ([#17695](https://github.com/storybookjs/storybook/pull/17695))
+
+## 6.5.0-alpha.47 (March 10, 2022)
+
+### Bug Fixes
+
+- Webpack4: Fix useExports for angular-cli ([#17674](https://github.com/storybookjs/storybook/pull/17674))
+- Core: Ensure that we do not render a story twice if re-rendered during preparing ([#17599](https://github.com/storybookjs/storybook/pull/17599))
+- Addon-docs: DocsPage story order should match the index ([#17669](https://github.com/storybookjs/storybook/pull/17669))
+- Core: Fix staticDirs path issue on Windows ([#17641](https://github.com/storybookjs/storybook/pull/17641))
+- Angular: Set ForkTsCheckerWebpackPlugin to async ([#17389](https://github.com/storybookjs/storybook/pull/17389))
+- Core: Fix core.builder check ([#17606](https://github.com/storybookjs/storybook/pull/17606))
+
+### Maintenance
+
+- Examples: Build stories.json for examples that support it ([#17670](https://github.com/storybookjs/storybook/pull/17670))
+- Core: Refactor preview rendering out of `PreviewWeb` ([#17598](https://github.com/storybookjs/storybook/pull/17598))
+- Prevent lint hook from running on all files ([#17662](https://github.com/storybookjs/storybook/pull/17662))
+- TypeScript: Change imports of types to be prefixed ([#17627](https://github.com/storybookjs/storybook/pull/17627))
+- Build: Give linting sub-commands a directory to run against ([#17545](https://github.com/storybookjs/storybook/pull/17545))
+- TypeScript: remove unnecessary 'as any' ([#17595](https://github.com/storybookjs/storybook/pull/17595))
+
+### Dependency Upgrades
+
+- Update shelljs dependency version ([#17602](https://github.com/storybookjs/storybook/pull/17602))
+- Remove unused `uuid` that's also deprecated ([#17615](https://github.com/storybookjs/storybook/pull/17615))
+
+## 6.5.0-alpha.46 (March 5, 2022)
+
+### Bug Fixes
+
+- Addon-interactions: Use 'global' package instead of `global` ([#17614](https://github.com/storybookjs/storybook/pull/17614))
+
+## 6.5.0-alpha.45 (March 2, 2022)
+
+### Bug Fixes
+
+- CSF3: Fix Auto-title to respect file system capitalization ([#17574](https://github.com/storybookjs/storybook/pull/17574))
+
+### Maintenance
+
+- Core: Remove unused babel dependencies ([#17425](https://github.com/storybookjs/storybook/pull/17425))
+
+## 6.5.0-alpha.44 (February 28, 2022)
+
+### Dependency Upgrades
+
+- Fix mdx-csf dependencies to canary dist-tag ([#17592](https://github.com/storybookjs/storybook/pull/17592))
+
+## 6.5.0-alpha.43 (February 28, 2022)
+
+### Features
+
+- Addon-docs: MDX2 support ([#17515](https://github.com/storybookjs/storybook/pull/17515))
+
+### Bug Fixes
+
+- Core: Fix global render fn ([#17577](https://github.com/storybookjs/storybook/pull/17577))
+- Addon-interactions: Mock window in browser environments ([#17535](https://github.com/storybookjs/storybook/pull/17535))
+
 ## 6.5.0-alpha.42 (February 25, 2022)
 
 ### Bug Fixes

MIGRATION.md

@@ -1,7 +1,11 @@
 <h1>Migration</h1>
 
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
-  - [CSF3 auto-title redundant filename](#csf3-auto-title-redundant-filename)
+  - [Docs framework refactor for React](#docs-framework-refactor-for-react)
+  - [Opt-in MDX2 support](#opt-in-mdx2-support)
+  - [CSF3 auto-title improvements](#csf3-auto-title-improvements)
+    - [Auto-title filename case](#auto-title-filename-case)
+    - [Auto-title redundant filename](#auto-title-redundant-filename)
 - [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
   - [Automigrate](#automigrate)
   - [CRA5 upgrade](#cra5-upgrade)
@@ -192,13 +196,57 @@
 
 ## From version 6.4.x to 6.5.0
 
-### CSF3 auto-title redundant filename
+### Docs framework refactor for React
+
+SB6.5 moves framework specializations (e.g. ArgType inference, dynamic snippet rendering) out of `@storybook/addon-docs` and into the specific framework packages to which they apply (e.g. `@storybook/react`).
+
+This change should not require any specific migrations on your part if you are using the docs addon as described in the documentation. However, if you are using `react-docgen` or `react-docgen-typescript` information in some custom way outside of `addon-docs`, you should be aware of this change.
+
+In SB6.4, `@storybook/react` added `react-docgen` to its babel settings and `react-docgen-typescript` to its webpack settings. In SB6.5, this only happens if you are using `addon-docs` or `addon-controls`, either directly or indirectly through `addon-essentials`. If you're not using either of those addons, but require that information for some other addon, please configure that manually in your `.storybook/main.js` configuration. You can see the docs configuration here: https://github.com/storybookjs/storybook/blob/next/app/react/src/server/framework-preset-react-docs.ts
+
+### Opt-in MDX2 support
+
+SB6.5 adds experimental opt-in support for MDXv2. To install:
+
+```sh
+yarn add @storybook/mdx2-csf -D
+```
+
+Then add the `previewMdx2` feature flag to your `.storybook/main.js` config:
+
+```js
+module.exports = {
+  features: {
+    previewMdx2: true,
+  },
+};
+```
+
+### CSF3 auto-title improvements
 
 SB 6.4 introduced experimental "auto-title", in which a story's location in the sidebar (aka `title`) can be automatically inferred from its location on disk. For example, the file `atoms/Button.stories.js` might result in the title `Atoms/Button`.
 
+We've made two improvements to Auto-title based on user feedback:
+
+- Auto-title preserves filename case
+- Auto-title removes redundant filenames from the path
+
+#### Auto-title filename case
+
+SB 6.4's implementation of auto-title ran `startCase` on each path component. For example, the file `atoms/MyButton` would be transformed to `Atoms/My Button`.
+
+We've changed this in SB 6.5 to preserve the filename case, so that instead it the same file would result in the title `atoms/MyButton`. The rationale is that this gives more control to users about what their auto-title will be.
+
+This might be considered a breaking change. However, we feel justified to release this in 6.5 because:
+
+1. We consider it a bug in the initial auto-title implementation
+2. CSF3 and the auto-title feature are experimental, and we reserve the right to make breaking changes outside of semver (tho we try to avoid it)
+
+#### Auto-title redundant filename
+
 The heuristic failed in the common scenario in which each component gets its own directory, e.g. `atoms/Button/Button.stories.js`, which would result in the redundant title `Atoms/Button/Button`. Alternatively, `atoms/Button/index.stories.js` would result in `Atoms/Button/Index`.
 
-To address this problem, 6.5 introduces a new heuristic to removes the filename if it matches the directory name (case insensitive) or `index`. So `atoms/Button/Button.stories.js` and `atoms/Button/index.stories.js` would both result in the title `Atoms/Button`.
+To address this problem, 6.5 introduces a new heuristic to removes the filename if it matches the directory name or `index`. So `atoms/Button/Button.stories.js` and `atoms/Button/index.stories.js` would both result in the title `Atoms/Button` (or `atoms/Button` if `autoTitleFilenameCase` is set, see above).
 
 Since CSF3 is experimental, we are introducing this technically breaking change in a minor release. If you desire the old structure, you can manually specify the title in file. For example:
 
@@ -498,8 +546,8 @@ In 6.4 the behavior of loaders when arg changes occurred was tweaked so loaders
 
 Since SB6.3, Storybook for Angular supports a builder configuration in your project's `angular.json`. This provides an Angular-style configuration for running and building your Storybook. The full builder documentation will be shown in the [main documentation page](https://storybook.js.org/docs/angular) soon, but for now you can check out an example here:
 
-- `start-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78
-- `build-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L86
+- `start-storybook`: [example](https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78) [schema](https://github.com/storybookjs/storybook/blob/next/app/angular/src/builders/start-storybook/schema.json)
+- `build-storybook`: [example](https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L86) [schema](https://github.com/storybookjs/storybook/blob/next/app/angular/src/builders/build-storybook/schema.json)
 
 #### Angular13
 
@@ -538,6 +586,13 @@ If you need storybook-specific styles separate from your app, you can configure
       }
 ```
 
+Then, once you've set this up, you should run Storybook through the builder:
+
+```sh
+ng run my-default-project:storybook
+ng run my-default-project:build-storybook
+```
+
 #### Angular component parameter removed
 
 In SB6.3 and earlier, the `default.component` metadata was implemented as a parameter, meaning that stories could set `parameters.component` to override the default export. This was an internal implementation that was never documented, but it was mistakenly used in some Angular examples.

addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "6.5.0-alpha.42",
+  "version": "6.5.0-alpha.48",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -45,14 +45,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.42",
-    "@storybook/api": "6.5.0-alpha.42",
-    "@storybook/channels": "6.5.0-alpha.42",
-    "@storybook/client-logger": "6.5.0-alpha.42",
-    "@storybook/components": "6.5.0-alpha.42",
-    "@storybook/core-events": "6.5.0-alpha.42",
+    "@storybook/addons": "6.5.0-alpha.48",
+    "@storybook/api": "6.5.0-alpha.48",
+    "@storybook/channels": "6.5.0-alpha.48",
+    "@storybook/client-logger": "6.5.0-alpha.48",
+    "@storybook/components": "6.5.0-alpha.48",
+    "@storybook/core-events": "6.5.0-alpha.48",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.42",
+    "@storybook/theming": "6.5.0-alpha.48",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -81,7 +81,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
+  "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Accessibility",

addons/a11y/src/components/Report/Rules.tsx

@@ -10,8 +10,8 @@ const List = styled.div({
   paddingBottom: 4,
   paddingRight: 4,
   paddingTop: 4,
-  fontWeight: '400',
-} as any);
+  fontWeight: 400,
+});
 
 const Item = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
   const maxWidthBeforeBreak = 407;

addons/a11y/src/index.ts

@@ -1,4 +1,4 @@
-import { AnyFramework, DecoratorFunction } from '@storybook/csf';
+import type { AnyFramework, DecoratorFunction } from '@storybook/csf';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 

addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "6.5.0-alpha.42",
+  "version": "6.5.0-alpha.48",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -41,12 +41,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.42",
-    "@storybook/api": "6.5.0-alpha.42",
-    "@storybook/components": "6.5.0-alpha.42",
-    "@storybook/core-events": "6.5.0-alpha.42",
+    "@storybook/addons": "6.5.0-alpha.48",
+    "@storybook/api": "6.5.0-alpha.48",
+    "@storybook/components": "6.5.0-alpha.48",
+    "@storybook/core-events": "6.5.0-alpha.48",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.42",
+    "@storybook/theming": "6.5.0-alpha.48",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
@@ -79,7 +79,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
+  "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Actions",

addons/actions/src/components/ActionLogger/index.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import { styled, withTheme } from '@storybook/theming';
+import type { Theme } from '@storybook/theming';
 
 import Inspector from 'react-inspector';
 import { ActionBar, ScrollArea } from '@storybook/components';

addons/actions/src/preset/addArgsHelpers.test.ts

@@ -1,4 +1,4 @@
-import { StoryContext } from '@storybook/addons';
+import type { StoryContext } from '@storybook/addons';
 import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';
 
 describe('actions parameter enhancers', () => {

addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "6.5.0-alpha.42",
+  "version": "6.5.0-alpha.48",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -45,13 +45,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.42",
-    "@storybook/api": "6.5.0-alpha.42",
-    "@storybook/client-logger": "6.5.0-alpha.42",
-    "@storybook/components": "6.5.0-alpha.42",
-    "@storybook/core-events": "6.5.0-alpha.42",
+    "@storybook/addons": "6.5.0-alpha.48",
+    "@storybook/api": "6.5.0-alpha.48",
+    "@storybook/client-logger": "6.5.0-alpha.48",
+    "@storybook/components": "6.5.0-alpha.48",
+    "@storybook/core-events": "6.5.0-alpha.48",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.42",
+    "@storybook/theming": "6.5.0-alpha.48",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
@@ -77,7 +77,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
+  "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Backgrounds",

addons/backgrounds/src/decorators/withBackground.ts

@@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {

addons/backgrounds/src/decorators/withGrid.ts

@@ -1,7 +1,7 @@
 import dedent from 'ts-dedent';
 import deprecate from 'util-deprecate';
 import { useMemo, useEffect } from '@storybook/addons';
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';

addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "6.5.0-alpha.42",
+  "version": "6.5.0-alpha.48",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -45,15 +45,15 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.42",
-    "@storybook/api": "6.5.0-alpha.42",
-    "@storybook/client-logger": "6.5.0-alpha.42",
-    "@storybook/components": "6.5.0-alpha.42",
-    "@storybook/core-common": "6.5.0-alpha.42",
+    "@storybook/addons": "6.5.0-alpha.48",
+    "@storybook/api": "6.5.0-alpha.48",
+    "@storybook/client-logger": "6.5.0-alpha.48",
+    "@storybook/components": "6.5.0-alpha.48",
+    "@storybook/core-common": "6.5.0-alpha.48",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.5.0-alpha.42",
-    "@storybook/store": "6.5.0-alpha.42",
-    "@storybook/theming": "6.5.0-alpha.42",
+    "@storybook/node-logger": "6.5.0-alpha.48",
+    "@storybook/store": "6.5.0-alpha.48",
+    "@storybook/theming": "6.5.0-alpha.48",
     "core-js": "^3.8.2",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
@@ -73,7 +73,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1477954e18494e721ae8d3c99bc710381eab1351",
+  "gitHead": "5f3afb8cf4389c16be11a6e5099e902d16a82762",
   "sbmodern": "dist/modern/register.js",
   "storybook": {
     "displayName": "Controls",