Merge branch 'next' into pr/darthtrevino/16970

storybookjs · Jan 5, 2022 · cc835b0 · cc835b0
2 parents 2f2fff7 + 5f460ec
commit cc835b0
Show file tree

Hide file tree

Showing 234 changed files with 11,312 additions and 2,340 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -250,7 +250,7 @@ jobs:
             cd ..
             npx create-react-app cra-bench
             cd cra-bench
-            npx @storybook/bench 'npx sb init' --label cra --extra-flags "--modern"
+            npx @storybook/bench@latest 'npx sb init' --label cra --extra-flags "--modern"
   e2e-tests-pnp:
     executor:
       class: medium

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,6 +3,10 @@ module.exports = {
   extends: ['@storybook/eslint-config-storybook', 'plugin:storybook/recommended'],
   rules: {
     '@typescript-eslint/ban-ts-comment': 'warn',
+    'jest/no-standalone-expect': [
+      'error',
+      { additionalTestBlockFunctions: ['it.skipWindows', 'it.onWindows'] },
+    ],
   },
   overrides: [
     {

diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml
@@ -1,16 +1,33 @@
 name: Unit tests
 
-on: [push]
+on:
+  push:
+    branches:
+      - next
+  pull_request:
+    types: [opened, reopened, labeled, synchronize]
 
 jobs:
   build:
-    name: Core Unit Tests
-    runs-on: ubuntu-latest
+    name: Core Unit Tests node-${{ matrix.node_version }}, ${{ matrix.os }}
+    if: ${{ github.event.label.name == 'ci:matrix' || github.event.type == 'push' }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest]
+        node_version: [12, 14, 16]
+        include:
+          - os: macos-latest
+            node_version: 16
+          - os: windows-latest
+            node_version: 16
+    runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - name: Set node version to ${{ matrix.node_version }}
+        uses: actions/setup-node@v2
         with:
-          node-version: "12.x"
+          node-version: ${{ matrix.node_version }}
           cache: yarn
       - name: install, bootstrap
         run: |

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,60 @@
+## 6.5.0-alpha.7 (January 4, 2022)
+
+### Bug Fixes
+
+- Addon-measure: Update z-index to fit with libraries with also high z-index ([#15860](https://github.com/storybookjs/storybook/pull/15860))
+
+### Maintenance
+
+- Vue: Fix VueLoaderPlugin import to support [email protected] ([#14624](https://github.com/storybookjs/storybook/pull/14624))
+
+### Dependency Upgrades
+
+- Upgrade react-syntax-highlighter to pick up security patch upstream in highlight.js ([#17100](https://github.com/storybookjs/storybook/pull/17100))
+
+## 6.5.0-alpha.6 (January 3, 2022)
+
+### Features
+
+- Vue3: Add default render function CSF3 ([#17068](https://github.com/storybookjs/storybook/pull/17068))
+- Addon-docs/Vue: Include methods in ArgsTable ([#16975](https://github.com/storybookjs/storybook/pull/16975))
+
+### Bug Fixes
+
+- CLI: Install `lit-html` in new web components project ([#17106](https://github.com/storybookjs/storybook/pull/17106))
+- Angular: Fix runCompodoc for Windows, local Compodoc, and user specified tsconfig ([#16728](https://github.com/storybookjs/storybook/pull/16728))
+
+### Dependency Upgrades
+
+- React: Remove react-dev-utils ([#17022](https://github.com/storybookjs/storybook/pull/17022))
+
+## 6.5.0-alpha.5 (December 23, 2021)
+
+### Dependency Upgrades
+
+- Update [email protected] & [email protected] same as cra5 ([#17056](https://github.com/storybookjs/storybook/pull/17056))
+
+## 6.5.0-alpha.4 (December 18, 2021)
+
+### Bug Fixes
+
+- Angular: Fix for renamed method in angular 13.1 ([#17032](https://github.com/storybookjs/storybook/pull/17032))
+- Source-loader: Fix node.declaration edge case ([#17027](https://github.com/storybookjs/storybook/pull/17027))
+- Core: Fix debug output on webpack failures ([#16988](https://github.com/storybookjs/storybook/pull/16988))
+
+### Maintenance
+
+- Build: Run unit tests on more node versions, mac, and windows ([#16744](https://github.com/storybookjs/storybook/pull/16744))
+
+### Dependency Upgrades
+
+- Avoid referencing internal Emotion packages in built types ([#16905](https://github.com/storybookjs/storybook/pull/16905))
+
 ## 6.5.0-alpha.3 (December 9, 2021)
 
 ### Bug Fixes
 
-* Core: Support custom PREVIEW URL for block story iframe ([#16773](https://github.com/storybookjs/storybook/pull/16773))
+- Core: Support custom PREVIEW URL for block story iframe ([#16773](https://github.com/storybookjs/storybook/pull/16773))
 
 ## 6.5.0-alpha.2 (December 9, 2021)
 

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -17,7 +17,10 @@
   - [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility)
   - [Babel mode v7](#babel-mode-v7)
   - [Loader behavior with args changes](#loader-behavior-with-args-changes)
-  - [Angular component parameter removed](#angular-component-parameter-removed)
+  - [6.4 Angular changes](#64-angular-changes)
+    - [SB Angular builder](#sb-angular-builder)
+    - [Angular13](#angular13)
+    - [Angular component parameter removed](#angular-component-parameter-removed)
   - [6.4 deprecations](#64-deprecations)
     - [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag)
 - [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
@@ -267,7 +270,7 @@ export default {
   title: 'Components/Atoms/Button',
 };
 
-// ✅ undefined 6.3 KO / 7.0 OK
+// ✅ undefined 6.3 OK / 7.0 OK
 export default {
   component: Button,
 };
@@ -470,7 +473,53 @@ This will create a `.babelrc.json` file. This file includes a bunch of babel plu
 
 In 6.4 the behavior of loaders when arg changes occurred was tweaked so loaders do not re-run. Instead the previous value of the loader is passed to the story, irrespective of the new args.
 
-### Angular component parameter removed
+### 6.4 Angular changes
+
+#### SB Angular builder
+
+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
+
+#### Angular13
+
+Angular 13 introduces breaking changes that require updating your Storybook configuration if you are migrating from a previous version of Angular.
+
+Most notably, the documented way of including global styles is no longer supported by Angular13. Previously you could write the following in your `.storybook/preview.js` config:
+
+```
+import '!style-loader!css-loader!sass-loader!./styles.scss';
+```
+
+If you use Angular 13 and above, you should use the builder configuration instead:
+
+```json
+   "my-default-project": {
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "styles": ["src/styles.css", "src/styles.scss"],
+          }
+        }
+      },
+   },
+```
+
+If you need storybook-specific styles separate from your app, you can configure the styles in the [SB Angular builder](#sb-angular-builder), which completely overrides your project's styles:
+
+```json
+      "storybook": {
+        "builder": "@storybook/angular:start-storybook",
+        "options": {
+          "browserTarget": "my-default-project:build",
+          "styles": [".storybook/custom-styles.scss"],
+        },
+      }
+```
+
+#### 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.
 

diff --git a/addons/a11y/README.md b/addons/a11y/README.md
@@ -22,6 +22,8 @@ module.exports = {
 };
 ```
 
+And here's a sample story file to test the addon:
+
 ```js
 import React from 'react';
 

diff --git a/addons/a11y/package.json b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "6.5.0-alpha.3",
+  "version": "6.5.0-alpha.7",
   "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.3",
-    "@storybook/api": "6.5.0-alpha.3",
-    "@storybook/channels": "6.5.0-alpha.3",
-    "@storybook/client-logger": "6.5.0-alpha.3",
-    "@storybook/components": "6.5.0-alpha.3",
-    "@storybook/core-events": "6.5.0-alpha.3",
+    "@storybook/addons": "6.5.0-alpha.7",
+    "@storybook/api": "6.5.0-alpha.7",
+    "@storybook/channels": "6.5.0-alpha.7",
+    "@storybook/client-logger": "6.5.0-alpha.7",
+    "@storybook/components": "6.5.0-alpha.7",
+    "@storybook/core-events": "6.5.0-alpha.7",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.3",
+    "@storybook/theming": "6.5.0-alpha.7",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -81,7 +81,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d971f7d493ecb388017a150a9943e87c7770d98",
+  "gitHead": "eb1ec353f7fbdf90d67576d93b9a23809d6cc0e6",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Accessibility",

diff --git a/addons/a11y/src/components/A11YPanel.test.tsx b/addons/a11y/src/components/A11YPanel.test.tsx
@@ -129,11 +129,14 @@ describe('A11YPanel', () => {
     const { getByText } = render(<ThemedA11YPanel />);
     const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
     act(() => useChannelArgs[EVENTS.RESULT](axeResult));
-    await waitFor(() => {
-      expect(getByText(/Tests completed/)).toBeTruthy();
-      expect(getByText(/Violations/)).toBeTruthy();
-      expect(getByText(/Passes/)).toBeTruthy();
-      expect(getByText(/Incomplete/)).toBeTruthy();
-    });
+    await waitFor(
+      () => {
+        expect(getByText(/Tests completed/)).toBeTruthy();
+        expect(getByText(/Violations/)).toBeTruthy();
+        expect(getByText(/Passes/)).toBeTruthy();
+        expect(getByText(/Incomplete/)).toBeTruthy();
+      },
+      { timeout: 2000 }
+    );
   });
 });
diff --git a/addons/actions/package.json b/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "6.5.0-alpha.3",
+  "version": "6.5.0-alpha.7",
   "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.3",
-    "@storybook/api": "6.5.0-alpha.3",
-    "@storybook/components": "6.5.0-alpha.3",
-    "@storybook/core-events": "6.5.0-alpha.3",
+    "@storybook/addons": "6.5.0-alpha.7",
+    "@storybook/api": "6.5.0-alpha.7",
+    "@storybook/components": "6.5.0-alpha.7",
+    "@storybook/core-events": "6.5.0-alpha.7",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.3",
+    "@storybook/theming": "6.5.0-alpha.7",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
@@ -79,7 +79,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d971f7d493ecb388017a150a9943e87c7770d98",
+  "gitHead": "eb1ec353f7fbdf90d67576d93b9a23809d6cc0e6",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Actions",

diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "6.5.0-alpha.3",
+  "version": "6.5.0-alpha.7",
   "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.3",
-    "@storybook/api": "6.5.0-alpha.3",
-    "@storybook/client-logger": "6.5.0-alpha.3",
-    "@storybook/components": "6.5.0-alpha.3",
-    "@storybook/core-events": "6.5.0-alpha.3",
+    "@storybook/addons": "6.5.0-alpha.7",
+    "@storybook/api": "6.5.0-alpha.7",
+    "@storybook/client-logger": "6.5.0-alpha.7",
+    "@storybook/components": "6.5.0-alpha.7",
+    "@storybook/core-events": "6.5.0-alpha.7",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.3",
+    "@storybook/theming": "6.5.0-alpha.7",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
@@ -77,7 +77,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d971f7d493ecb388017a150a9943e87c7770d98",
+  "gitHead": "eb1ec353f7fbdf90d67576d93b9a23809d6cc0e6",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Backgrounds",

diff --git a/addons/controls/package.json b/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "6.5.0-alpha.3",
+  "version": "6.5.0-alpha.7",
   "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.3",
-    "@storybook/api": "6.5.0-alpha.3",
-    "@storybook/client-logger": "6.5.0-alpha.3",
-    "@storybook/components": "6.5.0-alpha.3",
-    "@storybook/core-common": "6.5.0-alpha.3",
+    "@storybook/addons": "6.5.0-alpha.7",
+    "@storybook/api": "6.5.0-alpha.7",
+    "@storybook/client-logger": "6.5.0-alpha.7",
+    "@storybook/components": "6.5.0-alpha.7",
+    "@storybook/core-common": "6.5.0-alpha.7",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.5.0-alpha.3",
-    "@storybook/store": "6.5.0-alpha.3",
-    "@storybook/theming": "6.5.0-alpha.3",
+    "@storybook/node-logger": "6.5.0-alpha.7",
+    "@storybook/store": "6.5.0-alpha.7",
+    "@storybook/theming": "6.5.0-alpha.7",
     "core-js": "^3.8.2",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
@@ -73,7 +73,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d971f7d493ecb388017a150a9943e87c7770d98",
+  "gitHead": "eb1ec353f7fbdf90d67576d93b9a23809d6cc0e6",
   "sbmodern": "dist/modern/register.js",
   "storybook": {
     "displayName": "Controls",
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,6 +22,8 @@ module.exports = { @@
     };
     ```
+    And here's a sample story file to test the addon:
     ```js
     import React from 'react';
@@ Expand Down @@