Babel 7

.babelrc

@@ -1,16 +1,33 @@
 {
-  "presets": ["env", "stage-0", "react"],
-  "env": {
-    "test": {
-      "plugins": ["require-context-hook"]
-    },
-    "plugins": [
-      "emotion",
-      "babel-plugin-macros",
-      ["transform-runtime", {
-        "polyfill": false,
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-flow"
+  ],
+  "plugins": [
+    "babel-plugin-emotion",
+    "babel-plugin-macros",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from",
+    [
+      "@babel/plugin-transform-runtime",
+      {
         "regenerator": true
-      }]
+      }
     ]
-  }
+  ],
+  "env": {
+    "test": {
+      "plugins": ["babel-plugin-require-context-hook"]
+    }
+  },
+  "overrides": [
+    {
+      "test": "./examples/vue-kitchen-sink",
+      "presets": [
+        "@babel/preset-env",
+        "babel-preset-vue"
+      ]
+    }
+  ]
 }

.circleci/config.yml

@@ -273,6 +273,7 @@ jobs:
           name: "Test CLI"
           command: |
             yarn test --cli
+          no_output_timeout: 1800
   cli-latest-cra:
     working_directory: /tmp/storybook
     docker:

.eslintignore

@@ -10,6 +10,7 @@ lib/cli/test
 *.js.map
 
 !.remarkrc.js
+!.babelrc.js
 !.eslintrc.js
 !.eslintrc-markdown.js
 !.jest.config.js

.eslintrc.js

@@ -79,6 +79,25 @@ module.exports = {
         extensions: ['.js', '.jsx'],
       },
     ],
+    'react/jsx-no-bind': [
+      error,
+      {
+        ignoreDOMComponents: true,
+        ignoreRefs: true,
+        allowArrowFunctions: true,
+        allowFunctions: true,
+        allowBind: true,
+      },
+    ],
+    'jsx-a11y/label-has-associated-control': [
+      warn,
+      {
+        labelComponents: ['CustomInputLabel'],
+        labelAttributes: ['label'],
+        controlComponents: ['CustomInput'],
+        depth: 3,
+      },
+    ],
     'react/no-unescaped-entities': ignore,
     'jsx-a11y/label-has-for': [
       error,

MIGRATION.md

@@ -7,6 +7,8 @@
   - [Removed addWithInfo](#removed-add-with-info)
   - [Removed RN addons](#removed-rn-addons)
   - [Storyshots changes](#storyshots-changes)
+  - [Webpack 4](#webpack-4)
+  - [Babel 7](#babel-7)
 - [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
 - [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
   - [Refactored Knobs](#refactored-knobs)
@@ -72,6 +74,20 @@ The `@storybook/react-native` had built-in addons (`addon-actions` and `addon-li
     A possible plugin might be [babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).
     [README](https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-core#configure-jest-to-work-with-webpacks-requirecontext)
 
+### Webpack 4
+
+Storybook now uses webpack 4. If you have a [custom webpack config](https://storybook.js.org/configurations/custom-webpack-config/), make sure that all the loaders and plugins you use support webpack 4.
+
+### Babel 7
+
+Storybook now uses Babel 7. There's a couple of cases when it can break with your app:
+
+  * If you aren't using Babel yourself, and don't have .babelrc, install following dependencies:
+    ```
+    npm i -D @babel/core babel-loader@next
+    ```
+  * If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7`.
+
 ## From version 3.3.x to 3.4.x
 
 There are no expected breaking changes in the 3.4.x release, but 3.4 contains a major refactor to make it easier to support new frameworks, and we will document any breaking changes here if they arise.

addons/a11y/package.json

@@ -30,7 +30,6 @@
     "@storybook/components": "4.0.0-alpha.16",
     "@storybook/core-events": "4.0.0-alpha.16",
     "axe-core": "^3.0.3",
-    "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.2",
     "react-emotion": "^9.2.6"

addons/actions/package.json

@@ -23,7 +23,6 @@
     "@storybook/addons": "4.0.0-alpha.16",
     "@storybook/components": "4.0.0-alpha.16",
     "@storybook/core-events": "4.0.0-alpha.16",
-    "babel-runtime": "^6.26.0",
     "deep-equal": "^1.0.1",
     "emotion-theming": "^9.2.6",
     "global": "^4.3.2",

addons/backgrounds/package.json

@@ -26,7 +26,6 @@
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.16",
     "@storybook/core-events": "4.0.0-alpha.16",
-    "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.2",
     "react-emotion": "^9.2.6",

addons/events/package.json

@@ -21,7 +21,6 @@
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.16",
     "@storybook/core-events": "4.0.0-alpha.16",
-    "babel-runtime": "^6.26.0",
     "format-json": "^1.0.3",
     "prop-types": "^15.6.2",
     "react-emotion": "^9.2.6",

addons/graphql/package.json

@@ -20,7 +20,6 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "graphiql": "^0.11.11",
     "graphql": "^0.13.2",

addons/info/package.json

@@ -16,7 +16,6 @@
     "@storybook/addons": "4.0.0-alpha.16",
     "@storybook/client-logger": "4.0.0-alpha.16",
     "@storybook/components": "4.0.0-alpha.16",
-    "babel-runtime": "^6.26.0",
     "core-js": "2.5.7",
     "global": "^4.3.2",
     "marksy": "^6.0.3",

addons/info/src/__snapshots__/index.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`addon Info should render <Info /> and external markdown 1`] = `
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -22,7 +22,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
   overflow-x: scroll;
 }
 
-.emotion-1 {
+.emotion-2 {
   overflow: hidden;
   border: 1px solid #eee;
   border-radius: 3px;
@@ -38,12 +38,12 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
   flex-shrink: 0;
 }
 
-.emotion-1:hover {
+.emotion-2:hover {
   background-color: #f4f7fa;
   border-color: #ddd;
 }
 
-.emotion-1:active {
+.emotion-2:active {
   background-color: #e9ecef;
   border-color: #ccc;
 }
@@ -124,8 +124,8 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
             <div>
               <h1>
                 function func(x) {
-          return x + 1;
-        }
+        return x + 1;
+      }
               </h1>
               <h2>
                 [object Object]
@@ -307,7 +307,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
               >
                 <Styled(pre)>
                   <pre
-                    className="emotion-2"
+                    className="emotion-4 emotion-5"
                   >
                     <div>
                       <Node
@@ -1220,14 +1220,14 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
                         styles={Object {}}
                       >
                         <button
-                          className="emotion-1"
+                          className="emotion-2 emotion-3"
                           onClick={[Function]}
                         >
                           <Styled(div)
                             toggled={false}
                           >
                             <div
-                              className="emotion-0"
+                              className="emotion-0 emotion-1"
                             >
                               <div
                                 style={
@@ -1259,7 +1259,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
 `;
 
 exports[`addon Info should render <Info /> and markdown 1`] = `
-.emotion-2 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1280,7 +1280,7 @@ exports[`addon Info should render <Info /> and markdown 1`] = `
   overflow-x: scroll;
 }
 
-.emotion-1 {
+.emotion-2 {
   overflow: hidden;
   border: 1px solid #eee;
   border-radius: 3px;
@@ -1296,12 +1296,12 @@ exports[`addon Info should render <Info /> and markdown 1`] = `
   flex-shrink: 0;
 }
 
-.emotion-1:hover {
+.emotion-2:hover {
   background-color: #f4f7fa;
   border-color: #ddd;
 }
 
-.emotion-1:active {
+.emotion-2:active {
   background-color: #e9ecef;
   border-color: #ccc;
 }
@@ -1384,8 +1384,8 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
             <div>
               <h1>
                 function func(x) {
-          return x + 1;
-        }
+        return x + 1;
+      }
               </h1>
               <h2>
                 [object Object]
@@ -1658,7 +1658,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
               >
                 <Styled(pre)>
                   <pre
-                    className="emotion-2"
+                    className="emotion-4 emotion-5"
                   >
                     <div>
                       <Node
@@ -2571,14 +2571,14 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                         styles={Object {}}
                       >
                         <button
-                          className="emotion-1"
+                          className="emotion-2 emotion-3"
                           onClick={[Function]}
                         >
                           <Styled(div)
                             toggled={false}
                           >
                             <div
-                              className="emotion-0"
+                              className="emotion-0 emotion-1"
                             >
                               <div
                                 style={

addons/info/src/components/makeTableComponent.js

@@ -67,12 +67,10 @@ const propsFromPropTypes = type => {
         return;
       }
 
-      // eslint-disable-next-line react/destructuring-assignment
       if (!props[property]) {
         props[property] = { property };
       }
 
-      // eslint-disable-next-line react/destructuring-assignment
       props[property].defaultValue = value;
     });
   }
@@ -86,12 +84,10 @@ export default function makeTableComponent(Component) {
       return null;
     }
 
-    /* eslint-disable react/destructuring-assignment */
-    const propDefinitionsMap = hasDocgen(props.type)
-      ? propsFromDocgen(props.type)
-      : propsFromPropTypes(props.type);
+    const { type } = props;
+
+    const propDefinitionsMap = hasDocgen(type) ? propsFromDocgen(type) : propsFromPropTypes(type);
     const propDefinitions = Object.values(propDefinitionsMap);
-    /* eslint-enable react/destructuring-assignment */
 
     return <Component propDefinitions={propDefinitions} {...props} />;
   };

addons/info/src/components/types/ArrayOf.js

@@ -1,6 +1,5 @@
 import React from 'react';
 
-// eslint-disable-next-line import/no-cycle
 import PrettyPropType from './PrettyPropType';
 import { TypeInfo, getPropTypes } from './proptypes';
 

addons/info/src/components/types/ObjectOf.js

@@ -1,6 +1,5 @@
 import React from 'react';
 
-// eslint-disable-next-line import/no-cycle
 import PrettyPropType from './PrettyPropType';
 import { TypeInfo, getPropTypes } from './proptypes';
 

addons/info/src/components/types/OneOfType.js

@@ -1,6 +1,5 @@
 import React from 'react';
 
-// eslint-disable-next-line import/no-cycle
 import PrettyPropType from './PrettyPropType';
 import { TypeInfo, getPropTypes } from './proptypes';
 

addons/info/src/components/types/PrettyPropType.js

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-// TODO: FIX this dependency cycle
-/* eslint-disable import/no-cycle */
 import Shape from './Shape';
 import OneOfType from './OneOfType';
 import ArrayOf from './ArrayOf';
@@ -11,7 +9,6 @@ import OneOf from './OneOf';
 import InstanceOf from './InstanceOf';
 import Signature from './Signature';
 import Literal from './Literal';
-/* eslint-enable import/no-cycle */
 
 import { TypeInfo } from './proptypes';
 

addons/info/src/components/types/Shape.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import { HighlightButton } from '@storybook/components';
-// eslint-disable-next-line import/no-cycle
 import PrettyPropType from './PrettyPropType';
 import PropertyLabel from './PropertyLabel';
 

addons/jest/package.json

@@ -27,7 +27,6 @@
   "dependencies": {
     "@storybook/addons": "4.0.0-alpha.16",
     "@storybook/components": "4.0.0-alpha.16",
-    "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.2",
     "react-emotion": "^9.2.6",

addons/knobs/package.json

@@ -16,7 +16,6 @@
     "@storybook/addons": "4.0.0-alpha.16",
     "@storybook/components": "4.0.0-alpha.16",
     "@storybook/core-events": "4.0.0-alpha.16",
-    "babel-runtime": "^6.26.0",
     "copy-to-clipboard": "^3.0.8",
     "escape-html": "^1.0.3",
     "fast-deep-equal": "^2.0.1",