diff --git a/.babelrc b/.babelrc index 38d54990ce39..675cf6c23223 100644 --- a/.babelrc +++ b/.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" + ] + } + ] } diff --git a/.circleci/config.yml b/.circleci/config.yml index 5b890871da1b..6d422ea034f8 100644 --- a/.circleci/config.yml +++ b/.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: diff --git a/.eslintignore b/.eslintignore index 39ef5e596b55..73f2bb84a21b 100644 --- a/.eslintignore +++ b/.eslintignore @@ -10,6 +10,7 @@ lib/cli/test *.js.map !.remarkrc.js +!.babelrc.js !.eslintrc.js !.eslintrc-markdown.js !.jest.config.js diff --git a/.eslintrc.js b/.eslintrc.js index ad34e8fc73a4..95a7470d4445 100644 --- a/.eslintrc.js +++ b/.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, diff --git a/MIGRATION.md b/MIGRATION.md index d1641901da1a..7bd5af8315c2 100644 --- a/MIGRATION.md +++ b/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. diff --git a/addons/a11y/package.json b/addons/a11y/package.json index bcfde5140f27..41fdb8105402 100644 --- a/addons/a11y/package.json +++ b/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" diff --git a/addons/actions/package.json b/addons/actions/package.json index 910cb8b2daf4..98ca2a212cb2 100644 --- a/addons/actions/package.json +++ b/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", diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index b11ed3373cf2..15ab27b25eb2 100644 --- a/addons/backgrounds/package.json +++ b/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", diff --git a/addons/events/package.json b/addons/events/package.json index aa5e9f27460e..1d779a72ea8c 100644 --- a/addons/events/package.json +++ b/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", diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 7210d6125e96..f8c542ba55e3 100644 --- a/addons/graphql/package.json +++ b/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", diff --git a/addons/info/package.json b/addons/info/package.json index 836fa2b38622..6b836c32a42f 100644 --- a/addons/info/package.json +++ b/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", diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index e88575b55e15..5e3aa9c950e6 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`addon Info should render 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 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 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 and external markdown 1`] = `

function func(x) { - return x + 1; - } + return x + 1; + }

[object Object] @@ -307,7 +307,7 @@ exports[`addon Info should render and external markdown 1`] = ` > 
                     

                        and external markdown 1`] = `
                         styles={Object {}}
                       >
                         

             

               

@@ -181,10 +181,10 @@ exports[`Storyshots Button addons composition 1`] = `