Release 5.0

.babelrc.js

@@ -5,11 +5,13 @@ module.exports = {
     '@babel/preset-flow',
   ],
   plugins: [
-    'babel-plugin-emotion',
-    'babel-plugin-macros',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-object-rest-spread',
+    ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
     '@babel/plugin-proposal-export-default-from',
+    '@babel/plugin-syntax-dynamic-import',
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    'babel-plugin-add-react-displayname',
+    'babel-plugin-macros',
+    ['emotion', { sourceMap: true, autoLabel: true }],
   ],
   env: {
     test: {

.eslintrc.js

@@ -1,7 +1,6 @@
 const error = 2;
 const warn = 1;
 const ignore = 0;
-
 module.exports = {
   root: true,
   extends: [
@@ -11,37 +10,18 @@ module.exports = {
     'prettier',
     'prettier/react',
   ],
-  plugins: ['prettier', 'jest', 'import', 'react', 'jsx-a11y', 'json'],
+  plugins: ['prettier', 'jest', 'import', 'react', 'jsx-a11y', 'json', 'html'],
   parser: 'babel-eslint',
-  parserOptions: {
-    ecmaVersion: 8,
-    sourceType: 'module',
-  },
-  env: {
-    es6: true,
-    node: true,
-    'jest/globals': true,
-  },
+  parserOptions: { ecmaVersion: 8, sourceType: 'module' },
+  env: { es6: true, node: true, 'jest/globals': true },
   settings: {
     'import/core-modules': ['enzyme'],
     'import/ignore': ['node_modules\\/(?!@storybook)'],
-    'import/resolver': {
-      node: {
-        extensions: ['.js', '.ts'],
-      },
-    },
+    'import/resolver': { node: { extensions: ['.js', '.ts'] } },
+    'html/html-extensions': ['.html'],
   },
   rules: {
-    'prettier/prettier': [
-      warn,
-      {
-        printWidth: 100,
-        tabWidth: 2,
-        bracketSpacing: true,
-        trailingComma: 'es5',
-        singleQuote: true,
-      },
-    ],
+    'prettier/prettier': [warn],
     'no-debugger': process.env.NODE_ENV === 'production' ? error : ignore,
     'class-methods-use-this': ignore,
     'import/extensions': [
@@ -91,6 +71,7 @@ module.exports = {
         allowBind: true,
       },
     ],
+    'jsx-a11y/accessible-emoji': ignore,
     'jsx-a11y/label-has-associated-control': [
       warn,
       {
@@ -101,46 +82,31 @@ module.exports = {
       },
     ],
     'react/no-unescaped-entities': ignore,
-    'jsx-a11y/label-has-for': [
-      error,
-      {
-        required: {
-          some: ['nesting', 'id'],
-        },
-      },
-    ],
+    'jsx-a11y/label-has-for': [error, { required: { some: ['nesting', 'id'] } }],
     'jsx-a11y/anchor-is-valid': [
       error,
       {
-        components: ['RoutedLink', 'MenuLink', 'LinkTo', 'Link'],
+        components: ['A', 'LinkTo', 'Link'],
         specialLink: ['overrideParams', 'kind', 'story', 'to'],
       },
     ],
     'no-underscore-dangle': [
       error,
-      {
-        allow: ['__STORYBOOK_CLIENT_API__', '__STORYBOOK_ADDONS_CHANNEL__'],
-      },
+      { allow: ['__STORYBOOK_CLIENT_API__', '__STORYBOOK_ADDONS_CHANNEL__'] },
     ],
   },
   overrides: [
     {
-      files: ['**/__tests__/**', '**/*.test.js/**'],
+      files: [
+        '**/__tests__/**',
+        '**/*.test.js/**',
+        '**/*.stories.js',
+        '**/storyshots/**/stories/**',
+      ],
       rules: {
         'import/no-extraneous-dependencies': ignore,
       },
     },
-    {
-      files: ['**/react-native*/**', '**/REACT_NATIVE*/**', '**/crna*/**'],
-      rules: {
-        'jsx-a11y/accessible-emoji': ignore,
-      },
-    },
-    {
-      files: '**/.storybook/config.js',
-      rules: {
-        'global-require': ignore,
-      },
-    },
+    { files: '**/.storybook/config.js', rules: { 'global-require': ignore } },
   ],
 };

.spelling

@@ -64,12 +64,10 @@ HMR
 Redux
 storybook-ui
 react-komposer
-redux
 serializable
 params
- - addons/actions/node_modules/@storybook/addons/README.md
+README.md
 storybooks.js.org
- - addons/actions/node_modules/asap/README.md
 YuzuJS
 setImmediate
 Malte
@@ -78,15 +76,11 @@ Katić
 Domenic
 Kowal
 Zakas
- - addons/actions/node_modules/balanced-match/README.md
 Gruber
 julian
 juliangruber.com
- - addons/actions/node_modules/brace-expansion/README.md
 Schlueter
- - addons/links/README.md
 linkTo
- - lib/ui/README.md
 setOptions
 setStories
 onStory

CONTRIBUTING.md

@@ -282,9 +282,9 @@ First we are going to install storybook, then we are going to link `@storybook/r
 
 #### Verify your local version is working
 
-You should now have a working storybook dev environment up and running. To verify this you can make changes to the following file:
+You should now have a working storybook dev environment up and running. 
 
-`open app/react/src/client/manager/preview.js`
+> TODO: update this section (is already incorrect)
 
 Save and go to `http://localhost:9009` (or wherever storybook is running)
 

LICENSE

@@ -14,7 +14,7 @@ all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

MIGRATION.md

@@ -243,8 +243,8 @@ Also read on if you're using `addon-knobs`: we advise an update to your code for
 
 This affects you if you don't use babel in your project. You may need to add `babel-core` as dev dependency:
 
-```
-npm install --save-dev babel-core
+```sh
+yarn add babel-core --dev
 ```
 
 This was done to support different major versions of babel.
@@ -276,7 +276,7 @@ In the case of Angular: `import { ... } from '@storybook/addon-knobs/angular';`
 TypeScript users: we've moved the rest of our addons type definitions into [DefinitelyTyped](http://definitelytyped.org/). Starting in 3.2.0 make sure to use the right addons types:
 
 ```sh
-npm install @types/storybook__addon-notes @types/storybook__addon-options @types/storybook__addon-knobs @types/storybook__addon-links --save-dev
+yarn add @types/storybook__addon-notes @types/storybook__addon-options @types/storybook__addon-knobs @types/storybook__addon-links --dev
 ```
 
 See also [TypeScript definitions in 3.1.x](#moved-typescript-definitions).
@@ -309,7 +309,7 @@ It's not beautiful, but we'll be adding a more convenient/idiomatic way of using
 TypeScript users: we are in the process of moving our typescript definitions into [DefinitelyTyped](http://definitelytyped.org/). If you're using TypeScript, starting in 3.1.0 you need to make sure your type definitions are installed:
 
 ```sh
-npm install @types/node @types/react @types/storybook__react --save-dev
+yarn add @types/node @types/react @types/storybook__react --dev
 ```
 
 ### Deprecated head.html

README.md

@@ -149,12 +149,16 @@ If you're looking for material to use in your presentation about storybook, like
 
 ## Contributing
 
-[![Good First Issue](https://img.shields.io/github/issues/storybooks/storybook/good%20first%20issue.svg)](https://github.com/storybooks/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)
-
 We welcome contributions to Storybook!
 
-- ⇄ Pull requests and ★ Stars are always welcome.
+- 📥 Pull requests and 🌟 Stars are always welcome.
 - Read our [contributing guide](CONTRIBUTING.md) to get started.
+  or find us on [Discord](https://discord.gg/sMFvFsG), we're will take the time to guide you 
+
+Looking for a first issue to tackle? 
+
+- We tag issues with [![Good First Issue](https://img.shields.io/github/issues/storybooks/storybook/good%20first%20issue.svg)](https://github.com/storybooks/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) when we think they are well suited for people who are new to the codebase or OSS in general.
+- [Talk to us](https://discord.gg/sMFvFsG), we'll find something to suits your skills and learning interest.
 
 ### Development scripts
 

addons/a11y/README.md

@@ -11,7 +11,7 @@ This storybook addon can be helpful to make your UI components more accessible.
 First, install the addon.
 
 ```sh
-$ npm install -D @storybook/addon-a11y
+$ yarn add @storybook/addon-a11y --dev
 ```
 
 Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).
@@ -20,16 +20,18 @@ Add this line to your `addons.js` file (create this file inside your storybook c
 import '@storybook/addon-a11y/register';
 ```
 
-import the `'checkA11y'` decorator to check your stories for violations within your components.
+import the `withA11Y` decorator to check your stories for violations within your components.
 
 ```js
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { withA11Y } from '@storybook/addon-a11y';
 
-import { checkA11y } from '@storybook/addon-a11y';
+// should only be added once
+// best place is in config.js
+addDecorator(withA11Y)
 
 storiesOf('button', module)
-  .addDecorator(checkA11y)
   .add('Accessible', () => (
     <button>
       Accessible button
@@ -42,60 +44,41 @@ storiesOf('button', module)
   ));
 ```
 
-For more customizability. Use the `'configureA11y'` function to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
+For more customizability. Use the `addParameters` function to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
+You can override these options at story level too.
 
 ```js
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import { checkA11y, configureA11y } from '@storybook/addon-a11y';
+import { storiesOf, addDecorator, addParameters } from '@storybook/react';
 
-// axe options
-const whateverOptionsYouWant = {};
+import { withA11Y } from '@storybook/addon-a11y';
 
-// optional element id for axe context 
-const contextElementId = '';
+addDecorator(withA11Y)
+addParameters({
+  a11y: {
+    // ... axe options
+    element: '#root', // optional selector which element to inspect
+  },
+});
 
-configureA11y(whateverOptionsYouWant, contextElementId);
 
 storiesOf('button', module)
-  .addDecorator(checkA11y)
   .add('Accessible', () => (
-    <button>
+    <button style={{ backgroundColor: 'black', color: 'white', }}>
       Accessible button
     </button>
   ))
   .add('Inaccessible', () => (
-    <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
+    <button style={{ backgroundColor: 'black', color: 'black', }}>
       Inaccessible button
     </button>
   ));
 ```
 
-If you want to add a11y globally to your stories, you can use the global Storybook decorator in your *.storybook/config.js* file:
-
-```js
-import { configure, addDecorator } from '@storybook/react';
-import { checkA11y } from '@storybook/addon-a11y';
-
-// pick all stories.js files within the src/ folder
-const req = require.context('../src', true, /stories\.js$/);
-
-addDecorator(checkA11y);
-
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
-```
-
 ## Roadmap
 
 * Make UI accessibile
-* Add color blindness filters ([Example](http://lowvision.support/))
 * Show in story where violations are.
-* Make it configurable
 * Add more example tests
 * Add tests
 * Make CI integration possible

addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "4.2.0-alpha.11",
+  "version": "5.0.0-debug.3",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -25,19 +25,19 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/styled": "^0.10.6",
-    "@storybook/addons": "4.2.0-alpha.11",
-    "@storybook/client-logger": "4.2.0-alpha.11",
-    "@storybook/components": "4.2.0-alpha.11",
-    "@storybook/core-events": "4.2.0-alpha.11",
+    "@emotion/styled": "^10.0.5",
+    "@storybook/addons": "5.0.0-debug.3",
+    "@storybook/client-logger": "5.0.0-debug.3",
+    "@storybook/components": "5.0.0-debug.3",
+    "@storybook/core-events": "5.0.0-debug.3",
     "axe-core": "^3.1.2",
-    "core-js": "^2.5.7",
+    "core-js": "^2.6.1",
     "global": "^4.3.2",
-    "prop-types": "^15.6.2"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "memoizerific": "^1.11.3",
+    "prop-types": "^15.6.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "util-deprecate": "^1.0.2"
   },
   "publishConfig": {
     "access": "public"

addons/a11y/register.js

@@ -1 +1 @@
-require('./manager');
+require('./dist/register');