Merge branch 'next' into 9838-vue-properties-tests

.ci/danger/dangerfile.ts

@@ -3,7 +3,9 @@ import { execSync } from 'child_process';
 
 execSync('npm install lodash');
 
-const { flatten, intersection, isEmpty } = require('lodash');
+const flatten = require('lodash/flatten');
+const intersection = require('lodash/intersection');
+const isEmpty = require('lodash/isEmpty');
 
 const pkg = require('../../package.json'); // eslint-disable-line import/newline-after-import
 const prLogConfig = pkg['pr-log'];

.eslintrc.js

@@ -1,42 +1,6 @@
 module.exports = {
   root: true,
   extends: ['@storybook/eslint-config-storybook'],
-  rules: {
-    'import/extensions': [
-      'error',
-      'never',
-      { ignorePackages: true, md: 'always', svg: 'always', json: 'always', tag: 'always' },
-    ],
-    'import/no-unresolved': ['error', { ignore: ['@storybook'] }],
-    'react/state-in-constructor': 'off',
-    'react/static-property-placement': 'off',
-    'react/jsx-props-no-spreading': 'off',
-    'react/jsx-fragments': 'off',
-    '@typescript-eslint/ban-ts-ignore': 'off',
-    '@typescript-eslint/no-object-literal-type-assertion': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-    'react/sort-comp': [
-      'error',
-      {
-        order: [
-          'staticLifecycle',
-          'static-methods',
-          'instance-variables',
-          'lifecycle',
-          '/^on.+$/',
-          '/^(get|set)(?!(DerivedStateFromProps|SnapshotBeforeUpdate$)).+$/',
-          'instance-methods',
-          'instance-variables',
-          'everything-else',
-          'render',
-        ],
-        groups: {
-          staticLifecycle: ['displayName', 'propTypes', 'defaultProps', 'getDerivedStateFromProps'],
-        },
-      },
-    ],
-    'max-classes-per-file': 'off',
-  },
   overrides: [
     {
       files: [

.github/workflows/tests-cli.yml

@@ -1,6 +1,6 @@
 name: CLI tests
 
-on: 
+on:
   push
   # push:
 # disabled for now:
@@ -33,6 +33,30 @@ jobs:
     - name: cli
       run: |
         yarn test --cli
+  cli-yarn-2:
+    name: CLI Fixtures with Yarn 2
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '10.x'
+    - uses: actions/checkout@v1
+    - name: Cache node modules
+      uses: actions/cache@v1
+      with:
+        path: node_modules
+        key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.OS }}-build-${{ env.cache-name }}-
+          ${{ runner.OS }}-build-
+          ${{ runner.OS }}-
+    - name: install, bootstrap
+      run: |
+        yarn bootstrap --core
+    - name: cli with Yarn 2
+      run: |
+        cd lib/cli
+        yarn test-yarn-2
   latest-cra:
     name: Latest CRA
     runs-on: ubuntu-latest
@@ -46,4 +70,4 @@ jobs:
         yarn bootstrap --core
     - name: latest-cra
       run: |
-        yarn test-latest-cra
+        yarn test-latest-cra

.gitignore

@@ -7,6 +7,7 @@ node_modules
 *.sw*
 npm-shrinkwrap.json
 dist
+ts3.5
 .tern-port
 *.DS_Store
 .cache

MIGRATION.md

@@ -3,7 +3,10 @@
 - [Migration](#migration)
   - [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
     - [New addon presets](#new-addon-presets)
-    - [Removed legacy story APIs](#removed-legacy-story-apis)
+    - [Client API changes](#client-api-changes)
+      - [Removed legacy story APIs](#removed-legacy-story-apis)
+      - [Can no longer add decorators/parameters after stories](#can-no-longer-add-decorators-parameters-after-stories)
+      - [Changed Parameter Handling](#changed-parameter-handling)
   - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
     - [To main.js configuration](#to-mainjs-configuration)
     - [Create React App preset](#create-react-app-preset)
@@ -126,14 +129,58 @@ MyNonCheckedStory.story = {
 };
 ```
 
-### Removed Legacy Story APIs
+### Client API changes
+
+#### Removed Legacy Story APIs
 
 In 6.0 we removed a set of APIs from the underlying `StoryStore` (which wasn't publicly accessible):
 
 - `getStories`, `getStoryFileName`, `getStoryAndParameters`, `getStory`, `getStoryWithContext`, `hasStoryKind`, `hasStory`, `dumpStoryBook`, `size`, `clean`
 
 Although these were private APIs, if you were using them, you could probably use the newer APIs (which are still private): `getStoriesForKind`, `getRawStory`, `removeStoryKind`, `remove`.
 
+#### Can no longer add decorators/parameters after stories
+
+You can no longer add decorators and parameters globally after you added your first story, and you can no longer add decorators and parameters to a kind after you've added your first story to it.
+
+It unclear and confusing what happened if you did. If you want to disable a decorator for certain stories, use a parameter to do so:
+
+```js
+export StoryOne = ...;
+StoryOne.story = { parameters: { addon: { disable: true } } };
+```
+
+If you want to use a parameter for a subset of stories in a kind, simply use a variable to do so:
+
+```js
+const commonParameters = { x: { y: 'z' } };
+export StoryOne = ...;
+StoryOne.story = { parameters: { ...commonParameters, other: 'things' } };
+```
+
+#### Changed Parameter Handling
+
+There have been a few rationalizations of parameter handling in 6.0 to make things more predictable and fit better with the intention of parameters:
+
+_All parameters are now merged recursively to arbitrary depth._
+
+In 5.3 we sometimes merged parameters all the way down and sometimes did not depending on where you added them. It was confusing. If you were relying on this behaviour, let us know.
+
+_Array parameters are no longer "merged"._
+
+If you override an array parameter, the override will be the end product. If you want the old behaviour (appending a new value to an array parameter), export the original and use array spread. This will give you maximum flexibility:
+
+```js
+import { allBackgrounds } from './util/allBackgrounds';
+
+export StoryOne = ...;
+StoryOne.story = { parameters: { backgrounds: [...allBackgrounds, '#zyx' ] } };
+```
+
+_You cannot set parameters from decorators_
+
+Parameters are intended to be statically set at story load time. So setting them via a decorator doesn't quite make sense. If you were using this to control the rendering of a story, chances are using the new `args` feature is a more idiomatic way to do this.
+
 ## From version 5.2.x to 5.3.x
 
 ### To main.js configuration
@@ -236,14 +283,14 @@ To avoid that now you have to manually pass asyncStorage to React Native Storybo
 
 Solution:
 
-- Use `require('@react-native-community/async-storage').AsyncStorage` for React Native v0.59 and above.
+- Use `require('@react-native-community/async-storage').default` for React Native v0.59 and above.
 - Use `require('react-native').AsyncStorage` for React Native v0.58 or below.
 - Use `null` to disable Async Storage completely.
 
 ```javascript
 getStorybookUI({
   ...
-  asyncStorage: require('@react-native-community/async-storage').AsyncStorage || require('react-native').AsyncStorage || null
+  asyncStorage: require('@react-native-community/async-storage').default || require('react-native').AsyncStorage || null
 });
 ```
 

README.md

@@ -123,7 +123,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
 | [Riot](app/riot)                 | [v5.1.0](https://storybooks-riot.netlify.com/)    | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot)                         |
 | [Ember](app/ember)               | [v5.1.0](https://storybooks-ember.netlify.com/)   | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember)                      |
 | [Preact](app/preact)             | [v5.1.0](https://storybooks-preact.netlify.com/)  | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact)                   |
-| [Rax](app/rax)             | [v5.1.0](https://storybooks-rax.netlify.com/)  | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax)                   |
+| [Rax](app/rax)             | [v5.1.0](https://storybookjs.netlify.com/)  | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax)                   |
 
 ### Sub Projects
 

__mocks__/fs.js

@@ -14,10 +14,14 @@ function __setMockFiles(newMockFiles) {
 // file list set via __setMockFiles
 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.readFileSync = readFileSync;
 fs.existsSync = existsSync;
+fs.lstatSync = lstatSync;
 
 module.exports = fs;

addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "6.0.0-alpha.11",
+  "version": "6.0.0-alpha.17",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -26,19 +26,20 @@
     "dist/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "ts3.5/**/*"
   ],
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.0.0-alpha.11",
-    "@storybook/api": "6.0.0-alpha.11",
-    "@storybook/client-api": "6.0.0-alpha.11",
-    "@storybook/client-logger": "6.0.0-alpha.11",
-    "@storybook/components": "6.0.0-alpha.11",
-    "@storybook/core-events": "6.0.0-alpha.11",
-    "@storybook/theming": "6.0.0-alpha.11",
+    "@storybook/addons": "6.0.0-alpha.17",
+    "@storybook/api": "6.0.0-alpha.17",
+    "@storybook/client-api": "6.0.0-alpha.17",
+    "@storybook/client-logger": "6.0.0-alpha.17",
+    "@storybook/components": "6.0.0-alpha.17",
+    "@storybook/core-events": "6.0.0-alpha.17",
+    "@storybook/theming": "6.0.0-alpha.17",
     "axe-core": "^3.3.2",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
@@ -47,19 +48,27 @@
     "react-redux": "^7.0.2",
     "react-sizeme": "^2.5.2",
     "redux": "^4.0.1",
+    "regenerator-runtime": "^0.13.3",
     "ts-dedent": "^1.1.1",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
     "@types/react-redux": "^7.0.6",
-    "@types/webpack-env": "^1.15.1"
+    "@types/webpack-env": "^1.15.1",
+    "enzyme": "^3.11.0"
   },
   "peerDependencies": {
-    "react-dom": "*",
-    "regenerator-runtime": "*"
+    "react-dom": "*"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
+  "gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff",
+  "typesVersions": {
+    "<=3.5": {
+      "*": [
+        "ts3.5/*"
+      ]
+    }
+  }
 }

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

@@ -84,7 +84,7 @@ export const Item = (props: ItemProps) => {
           <HighlightToggle
             toggleId={highlightToggleId}
             type={type}
-            elementsToHighlight={item ? item.nodes : null}
+            elementsToHighlight={item.nodes}
           />
         </HighlightToggleElement>
       </Wrapper>

addons/a11y/src/preset/addDecorator.ts

@@ -1,4 +1,3 @@
-import { addDecorator } from '@storybook/client-api';
 import { withA11Y } from '../index';
 
-addDecorator(withA11Y);
+export const decorators = [withA11Y];