Merge remote-tracking branch 'origin/next' into 16222-sort-function-e…

…rrors
storybookjs · Oct 12, 2021 · 4e7b64c · 4e7b64c
2 parents 06b7bbf + 27f04a6
commit 4e7b64c
Show file tree

Hide file tree

Showing 195 changed files with 6,062 additions and 2,265 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,80 @@
+## 6.4.0-beta.9 (October 12, 2021)
+
+### Features
+
+* Webpack5: Don't emit stats unless debugWebpack is set ([#16132](https://github.com/storybookjs/storybook/pull/16132))
+
+### Bug Fixes
+
+* CLI: Fix CRA version detection crash ([#16308](https://github.com/storybookjs/storybook/pull/16308))
+* Core: Better story id generation, cope with unusual stories ([#16309](https://github.com/storybookjs/storybook/pull/16309))
+* Core: Simplify `DOCS_RENDERED` and only use `STORY_RENDERED` for hooks ([#16310](https://github.com/storybookjs/storybook/pull/16310))
+* Core: Fix `extract`, `SET_STORIES` and `getStoriesJsonData` ([#16299](https://github.com/storybookjs/storybook/pull/16299))
+* TypeScript: Add `id` to BaseMeta type ([#16216](https://github.com/storybookjs/storybook/pull/16216))
+* CSF: Fix support for `X.story` annotations ([#16297](https://github.com/storybookjs/storybook/pull/16297))
+
+## 6.4.0-beta.8 (October 11, 2021)
+
+### Bug Fixes
+
+- Core: Fix multiple invalidations ([#16294](https://github.com/storybookjs/storybook/pull/16294))
+
+### Maintenance
+
+- Add ability to skip cypress tests based on framework ([#16285](https://github.com/storybookjs/storybook/pull/16285))
+
+### Dependency Upgrades
+
+- Addons: Add webpack-env as dependency ([#16302](https://github.com/storybookjs/storybook/pull/16302))
+- Upgrade npmlog dependency ([#16289](https://github.com/storybookjs/storybook/pull/16289))
+
+## 6.4.0-beta.7 (October 8, 2021)
+
+### Bug Fixes
+
+- Addon-docs: Always render the `children` of the `Canvas` component ([#16280](https://github.com/storybookjs/storybook/pull/16280))
+- Addon-docs: Fix args passing for Vue inline rendering ([#16279](https://github.com/storybookjs/storybook/pull/16279))
+
+## 6.4.0-beta.6 (October 7, 2021)
+
+### Features
+
+- Core: HMR for StoryIndex server ([#16160](https://github.com/storybookjs/storybook/pull/16160))
+
+### Bug Fixes
+
+- Angular: Make types generic for angular's built-in decorators ([#16266](https://github.com/storybookjs/storybook/pull/16266))
+- Args: Re-render the whole container when args or globals change ([#16264](https://github.com/storybookjs/storybook/pull/16264))
+
+### Maintenance
+
+- CSF: Add CSF2 play function example ([#16121](https://github.com/storybookjs/storybook/pull/16121))
+- Core: Unified story specifiers ([#16220](https://github.com/storybookjs/storybook/pull/16220))
+
+## 6.3.10 (October 6, 2021)
+
+### Bug Fixes
+
+- CLI: Don't upgrade preset-create-react-app if react-scripts < 5 ([#16255](https://github.com/storybookjs/storybook/pull/16255))
+
+## 6.4.0-beta.5 (October 6, 2021)
+
+### Features
+
+- CLI: Add "automigrate" command for configuration issues and migrations ([#16193](https://github.com/storybookjs/storybook/pull/16193))
+- Vue: support @values in args table ([#16019](https://github.com/storybookjs/storybook/pull/16019))
+
+### Bug Fixes
+
+- CLI: Don't upgrade preset-create-react-app if react-scripts < 5 ([#16255](https://github.com/storybookjs/storybook/pull/16255))
+- Angular: Fix getComponentInputsOutputs for multiple decorators ([#16217](https://github.com/storybookjs/storybook/pull/16217))
+
+### Maintenance
+
+- CSF: Add error handling for CSF story index generation ([#16241](https://github.com/storybookjs/storybook/pull/16241))
+- Official-storybook: Fix show source in no-args stories ([#16259](https://github.com/storybookjs/storybook/pull/16259))
+- CLI: Remove story format parameter ([#16233](https://github.com/storybookjs/storybook/pull/16233))
+
 ## 6.4.0-beta.4 (October 5, 2021)
 
 ### Features

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,7 +1,10 @@
 <h1>Migration</h1>
 
 - [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
+  - [CRA5 upgrade](#cra5-upgrade)
   - [CSF3 enabled](#csf3-enabled)
+    - [Optional titles](#optional-titles)
+    - [String literal titles](#string-literal-titles)
   - [Story Store v7](#story-store-v7)
     - [Behavioral differences](#behavioral-differences)
     - [Using the v7 store](#using-the-v7-store)
@@ -10,7 +13,10 @@
   - [Loader behavior with args changes](#loader-behavior-with-args-changes)
   - [Angular component parameter removed](#angular-component-parameter-removed)
 - [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
-  - [Webpack 5 manager build](#webpack-5-manager-build)
+  - [Webpack 5](#webpack-5-manager-build)
+    - [Fixing hoisting issues](#fixing-hoisting-issues)
+      - [Webpack 5 manager build](#webpack-5-manager-build)
+      - [Wrong webpack version](#wrong-webpack-version)
   - [Angular 12 upgrade](#angular-12-upgrade)
   - [Lit support](#lit-support)
   - [No longer inferring default values of args](#no-longer-inferring-default-values-of-args)
@@ -173,10 +179,87 @@
 
 ## From version 6.3.x to 6.4.0
 
+### CRA5 upgrade
+
+Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to
+upgrade the configuration. You can do this automatically by running:
+
+```
+npx sb@next fix
+```
+
+Or you can do the following steps manually to force Storybook to use webpack 5 for building your project:
+
+```shell
+yarn add @storybook/builder-webpack5@next @storybook/manager-webpack5 --dev
+# Or
+npm install @storybook/builder-webpack5@next @storybook/manager-webpack5 --save-dev
+```
+
+Then edit your `.storybook/main.js` config:
+
+```js
+module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
+};
+```
+
 ### CSF3 enabled
 
 SB6.3 introduced a feature flag, `features.previewCsfV3`, to opt-in to experimental [CSF3 syntax support](https://storybook.js.org/blog/component-story-format-3-0/). In SB6.4, CSF3 is supported regardless of `previewCsfV3`'s value. This should be a fully backwards-compatible change. The `previewCsfV3` flag has been deprecated and will be removed in SB7.0.
 
+#### Optional titles
+
+In SB6.3 and earlier, component titles were required in CSF default exports. Starting in 6.4, they are optional.
+If you don't specify a component file, it will be inferred from the file's location on disk.
+
+Consider a project configuration `/path/to/project/.storybook/main.js` containing:
+
+```js
+module.exports = { stories: ['../src/**/*.stories.*'] };
+```
+
+And te file `/path/to/project/src/components/Button.stories.tsx` containing the default export:
+
+```js
+import { Button } from './Button';
+export default { component: Button };
+// named exports...
+```
+
+The inferred title of this file will be `components/Button` based on the stories glob in the configuration file.
+We will provide more documentation soon on how to configure this.
+
+#### String literal titles
+
+Starting in 6.4 CSF component [titles are optional](#optional-titles). However, if you do specify titles, title handing is becoming more strict in V7 and are limited to string literals.
+
+Earlier versions of Storybook supported story titles that are dynamic Javascript expressions
+
+```js
+// ✅ string literals 6.3 OK / 7.0 OK
+export default {
+  title: 'Components/Atoms/Button',
+};
+
+// ✅ undefined 6.3 KO / 7.0 OK
+export default {
+  component: Button,
+};
+
+// ❌ expressions: 6.3 OK / 7.0 KO
+export default {
+  title: foo('bar'),
+};
+
+// ❌ template literals 6.3 OK / 7.0 KO
+export default {
+  title: `${bar}`,
+};
+```
+
 ### Story Store v7
 
 SB6.4 introduces an opt-in feature flag, `features.storyStoreV7`, which loads stories in an "on demand" way (that is when rendered), rather than up front when the Storybook is booted. This way of operating will become the default in 7.0 and will likely be switched to opt-out in that version.
@@ -194,7 +277,7 @@ However, the `autoTitle` feature is supported.
 
 The key behavioral differences of the v7 store are:
 
-- `SET_STORIES` is not emitted on boot up. Instead the manager loads the story index independenly.
+- `SET_STORIES` is not emitted on boot up. Instead the manager loads the story index independently.
 - A new event `STORY_PREPARED` is emitted when a story is rendered for the first time, which contains metadata about the story, such as `parameters`.
 - All "entire" store APIs such as `extract()` need to be proceeded by an async call to `loadAllCSFFiles()` which fetches all CSF files and processes them.
 
@@ -305,7 +388,29 @@ export const MyStory = () => ({ component: MyComponent, ... })
 
 ## From version 6.2.x to 6.3.0
 
-### Webpack 5 manager build
+### Webpack 5
+
+Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so:
+
+```shell
+yarn add @storybook/builder-webpack5@next @storybook/manager-webpack5 --dev
+# Or
+npm install @storybook/builder-webpack5@next @storybook/manager-webpack5 --save-dev
+```
+
+Then edit your `.storybook/main.js` config:
+
+```js
+module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
+};
+```
+
+#### Fixing hoisting issues
+
+##### Webpack 5 manager build
 
 Storybook 6.2 introduced **experimental** webpack5 support for building user components. Storybook 6.3 also supports building the manager UI in webpack 5 to avoid strange hoisting issues.
 
@@ -317,6 +422,8 @@ yarn add @storybook/manager-webpack5 --dev
 npm install @storybook/manager-webpack5 --save-dev
 ```
 
+##### Wrong webpack version
+
 Because Storybook uses `webpack@4` as the default, it's possible for the wrong version of webpack to get hoisted by your package manager. If you receive an error that looks like you might be using the wrong version of webpack, install `webpack@5` explicitly as a dev dependency to force it to be hoisted:
 
 ```shell
@@ -327,23 +434,7 @@ npm install webpack@5 --save-dev
 
 ### Angular 12 upgrade
 
-Storybook 6.3 supports Angular 12 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to do the following steps to force Storybook to use webpack 5 for building your project:
-
-```shell
-yarn add @storybook/builder-webpack5@next @storybook/manager-webpack5@next --dev
-# Or
-npm install @storybook/builder-webpack5@next @storybook/manager-webpack5@next --save-dev
-```
-
-Then edit your `.storybook/main.js` config:
-
-```js
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-};
-```
+Storybook 6.3 supports Angular 12 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to [follow the steps for opting-in to webpack 5](#webpack-5).
 
 ### Lit support
 

diff --git a/README.md b/README.md
@@ -103,11 +103,11 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
 | [Ember](app/ember)                                             | [v6.3.x](https://storybookjs.netlify.com/ember-cli/)                                        | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember)                            |
 | [Svelte](app/svelte)                                           | [v6.3.x](https://storybookjs.netlify.com/svelte-kitchen-sink/)                              | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte)                         |
 | [Preact](app/preact)                                           | [v6.3.x](https://storybookjs.netlify.com/preact-kitchen-sink/)                              | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact)                         |
-| [Marionette.js](app/marionette)                                | -                                                                                           | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette)          |
-| [Mithril](app/mithril)                                         | [v6.3.x](https://storybookjs.netlify.com/mithril-kitchen-sink/)                             | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril)                      |
-| [Marko](app/marko)                                             | [v6.3.x](https://storybookjs.netlify.com/marko-cli/)                                        | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko)                            |
-| [Riot](app/riot)                                               | [v6.3.x](https://storybookjs.netlify.com/riot-kitchen-sink/)                                | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot)                               |
-| [Rax](app/rax)                                                 | [v6.3.x](https://storybookjs.netlify.com/rax-kitchen-sink/)                                 | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax)                                  |
+| [Marionette.js](https://github.com/storybookjs/marionette)                                | -                                                                                           | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette)          |
+| [Mithril](https://github.com/storybookjs/mithril)                                         | [v6.3.x](https://storybookjs.netlify.com/mithril-kitchen-sink/)                             | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril)                      |
+| [Marko](https://github.com/storybookjs/marko)                                             | [v6.3.x](https://storybookjs.netlify.com/marko-cli/)                                        | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko)                            |
+| [Riot](https://github.com/storybookjs/riot)                                               | [v6.3.x](https://storybookjs.netlify.com/riot-kitchen-sink/)                                | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot)                               |
+| [Rax](https://github.com/storybookjs/rax)                                                 | [v6.3.x](https://storybookjs.netlify.com/rax-kitchen-sink/)                                 | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax)                                  |
 | [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.3.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Rax](https://img.shields.io/npm/dm/@storybook/native.svg)](https://github.com/storybookjs/native) |
 
 ### Sub Projects
@@ -143,8 +143,8 @@ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/fr
 
 | Addons                                                                           |                                                            |
 | -------------------------------------------------------------------------------- | ---------------------------------------------------------- |
-| [info](https://github.com/storybookjs/deprecated-addons/tree/main/addons/info)   | Annotate stories with extra component usage information    |
-| [notes](https://github.com/storybookjs/deprecated-addons/tree/main/addons/notes) | Annotate Storybook stories with notes                      |
+| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info)   | Annotate stories with extra component usage information    |
+| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes                      |
 | [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/)           | Addon for driving your components under dynamic contexts   |
 | [options](https://www.npmjs.com/package/@storybook/addon-options)                | Customize the Storybook UI in code                         |
 | [knobs](https://github.com/storybookjs/addon-knobs)                              | Interactively edit component prop data in the Storybook UI |

diff --git a/SECURITY.md b/SECURITY.md
@@ -4,7 +4,7 @@
 
 | Version | Supported          |
 | ------- | ------------------ |
-| 6.0.x   | :white_check_mark: |
+| 6.x     | :white_check_mark: |
 | 5.3.x   | :white_check_mark: |
 
 ## Reporting a Vulnerability

diff --git a/__mocks__/fs-extra.js b/__mocks__/fs-extra.js
@@ -0,0 +1,29 @@
+const fs = jest.createMockFromModule('fs-extra');
+
+// This is a custom function that our tests can use during setup to specify
+// what the files on the "mock" filesystem should look like when any of the
+// `fs` APIs are used.
+let mockFiles = Object.create(null);
+
+// eslint-disable-next-line no-underscore-dangle
+function __setMockFiles(newMockFiles) {
+  mockFiles = newMockFiles;
+}
+
+// A custom version of `readdirSync` that reads from the special mocked out
+// file list set via __setMockFiles
+const readFile = async (filePath) => mockFiles[filePath];
+const readFileSync = (filePath = '') => mockFiles[filePath];
+const existsSync = (filePath) => !!mockFiles[filePath];
+const lstatSync = (filePath) => ({
+  isFile: () => !!mockFiles[filePath],
+});
+
+// eslint-disable-next-line no-underscore-dangle
+fs.__setMockFiles = __setMockFiles;
+fs.readFile = readFile;
+fs.readFileSync = readFileSync;
+fs.existsSync = existsSync;
+fs.lstatSync = lstatSync;
+
+module.exports = fs;
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "6.4.0-beta.4",
+  "version": "6.4.0-beta.9",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -45,14 +45,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.4.0-beta.4",
-    "@storybook/api": "6.4.0-beta.4",
-    "@storybook/channels": "6.4.0-beta.4",
-    "@storybook/client-logger": "6.4.0-beta.4",
-    "@storybook/components": "6.4.0-beta.4",
-    "@storybook/core-events": "6.4.0-beta.4",
+    "@storybook/addons": "6.4.0-beta.9",
+    "@storybook/api": "6.4.0-beta.9",
+    "@storybook/channels": "6.4.0-beta.9",
+    "@storybook/client-logger": "6.4.0-beta.9",
+    "@storybook/components": "6.4.0-beta.9",
+    "@storybook/core-events": "6.4.0-beta.9",
     "@storybook/csf": "0.0.2--canary.6aca495.0",
-    "@storybook/theming": "6.4.0-beta.4",
+    "@storybook/theming": "6.4.0-beta.9",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -81,7 +81,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "294cc94b04cb92813efd12c0a85be443788d0d5b",
+  "gitHead": "a22654ce25781cfb510ecc95a6465de0247f8487",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Accessibility",