From 173a68482ed60a58535f623c5f42dfa0cf03081c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sun, 5 Aug 2018 15:17:13 +0200 Subject: [PATCH 01/14] UPGRADE a batch of dependencies (included eslint) --- app/polymer/package.json | 2 +- examples/polymer-cli/package.json | 4 +- package.json | 4 +- yarn.lock | 161 +++++++++++++++++++++--------- 4 files changed, 119 insertions(+), 52 deletions(-) diff --git a/app/polymer/package.json b/app/polymer/package.json index 248474a917e1..4a34094af808 100644 --- a/app/polymer/package.json +++ b/app/polymer/package.json @@ -22,7 +22,7 @@ }, "dependencies": { "@storybook/core": "4.0.0-alpha.15", - "@webcomponents/webcomponentsjs": "^1.2.0", + "@webcomponents/webcomponentsjs": "^2.0.4", "babel-polyfill": "^6.26.0", "common-tags": "^1.8.0", "global": "^4.3.2", diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json index a357acd834e2..cc729e9e84d8 100644 --- a/examples/polymer-cli/package.json +++ b/examples/polymer-cli/package.json @@ -8,7 +8,7 @@ "storybook": "start-storybook -p 9001 -c .storybook" }, "dependencies": { - "@polymer/polymer": "^2.6.0", + "@polymer/polymer": "^3.0.5", "@storybook/addon-actions": "4.0.0-alpha.15", "@storybook/addon-backgrounds": "4.0.0-alpha.15", "@storybook/addon-knobs": "4.0.0-alpha.15", @@ -18,7 +18,7 @@ "@storybook/addon-storysource": "4.0.0-alpha.15", "@storybook/addon-viewport": "4.0.0-alpha.15", "@storybook/polymer": "4.0.0-alpha.15", - "@webcomponents/webcomponentsjs": "^1.2.0", + "@webcomponents/webcomponentsjs": "^2.0.4", "global": "^4.3.2", "lit-html": "^0.10.2", "polymer-webpack-loader": "^2.0.3", diff --git a/package.json b/package.json index b07f38896c72..87d3654600a7 100644 --- a/package.json +++ b/package.json @@ -69,8 +69,8 @@ "emotion-theming": "^9.2.6", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", - "eslint": "^4.19.1", - "eslint-config-airbnb": "^16.1.0", + "eslint": "^5.3.0", + "eslint-config-airbnb": "^17.0.0", "eslint-config-prettier": "^2.9.0", "eslint-plugin-import": "^2.13.0", "eslint-plugin-jest": "^21.18.0", diff --git a/yarn.lock b/yarn.lock index 91a1907a4db5..81449e930b56 100644 --- a/yarn.lock +++ b/yarn.lock @@ -844,9 +844,11 @@ node-fetch "^2.1.1" url-template "^2.0.8" -"@polymer/polymer@^2.6.0": - version "2.6.0" - resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-2.6.0.tgz#98601124122a045e74f4b41f55975006ef327dbc" +"@polymer/polymer@^3.0.5": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-3.0.5.tgz#eaa42e70df7de818b5e1839452c82a5f83e39929" + dependencies: + "@webcomponents/shadycss" "^1.2.0" "@samverschueren/stream-to-observable@^0.3.0": version "0.3.0" @@ -1253,9 +1255,13 @@ "@webassemblyjs/wast-parser" "1.5.13" long "^3.2.0" -"@webcomponents/webcomponentsjs@^1.2.0": - version "1.2.0" - resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-1.2.0.tgz#c9e129340c3e4637f5fa6505e968e85face7bd5b" +"@webcomponents/shadycss@^1.2.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@webcomponents/shadycss/-/shadycss-1.4.0.tgz#2b2b66443252f81d02ebb2dd139e4a717655bfa9" + +"@webcomponents/webcomponentsjs@^2.0.4": + version "2.0.4" + resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.0.4.tgz#fe18c288f99b7103e9ae7a766020f9702cedcc08" Base64@~0.2.0: version "0.2.1" @@ -1353,6 +1359,12 @@ acorn-jsx@^3.0.0: dependencies: acorn "^3.0.4" +acorn-jsx@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-4.1.1.tgz#e8e41e48ea2fe0c896740610ab6a4ffd8add225e" + dependencies: + acorn "^5.0.3" + acorn-node@^1.2.0: version "1.3.0" resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.3.0.tgz#5f86d73346743810ef1269b901dbcbded020861b" @@ -1368,7 +1380,7 @@ acorn@^4.0.3, acorn@^4.0.4: version "4.0.13" resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787" -acorn@^5.0.0, acorn@^5.2.1, acorn@^5.5.3, acorn@^5.6.2: +acorn@^5.0.0, acorn@^5.0.3, acorn@^5.2.1, acorn@^5.5.3, acorn@^5.6.0, acorn@^5.6.2: version "5.7.1" resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8" @@ -1428,7 +1440,7 @@ ajv-keywords@^2.0.0, ajv-keywords@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762" -ajv-keywords@^3.1.0: +ajv-keywords@^3.0.0, ajv-keywords@^3.1.0: version "3.2.0" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a" @@ -1439,7 +1451,7 @@ ajv@^4.9.1: co "^4.6.0" json-stable-stringify "^1.0.1" -ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3, ajv@^5.3.0: +ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3: version "5.5.2" resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965" dependencies: @@ -1448,7 +1460,7 @@ ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3, ajv@^5.3.0: fast-json-stable-stringify "^2.0.0" json-schema-traverse "^0.3.0" -ajv@^6.1.0: +ajv@^6.0.1, ajv@^6.1.0, ajv@^6.5.0: version "6.5.2" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.2.tgz#678495f9b82f7cca6be248dd92f59bff5e1f4360" dependencies: @@ -6630,17 +6642,21 @@ escope@^3.6.0: esrecurse "^4.1.0" estraverse "^4.1.1" -eslint-config-airbnb-base@^12.1.0: - version "12.1.0" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-12.1.0.tgz#386441e54a12ccd957b0a92564a4bafebd747944" +eslint-config-airbnb-base@^13.0.0: + version "13.0.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-13.0.0.tgz#2ee6279c4891128e49d6445b24aa13c2d1a21450" dependencies: eslint-restricted-globals "^0.1.1" + object.assign "^4.1.0" + object.entries "^1.0.4" -eslint-config-airbnb@^16.1.0: - version "16.1.0" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-16.1.0.tgz#2546bfb02cc9fe92284bf1723ccf2e87bc45ca46" +eslint-config-airbnb@^17.0.0: + version "17.0.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-17.0.0.tgz#1bb8c4255483320bb68c3b614f71ae6058b0b2db" dependencies: - eslint-config-airbnb-base "^12.1.0" + eslint-config-airbnb-base "^13.0.0" + object.assign "^4.1.0" + object.entries "^1.0.4" eslint-config-prettier@^2.9.0: version "2.9.0" @@ -6810,6 +6826,10 @@ eslint-teamcity@^2.0.1: dependencies: fs-extra "^5.0.0" +eslint-utils@^1.3.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.3.1.tgz#9a851ba89ee7c460346f97cf8939c7298827e512" + eslint-visitor-keys@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d" @@ -6856,50 +6876,51 @@ eslint@4.10.0: table "^4.0.1" text-table "~0.2.0" -eslint@^4.19.1: - version "4.19.1" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.1.tgz#32d1d653e1d90408854bfb296f076ec7e186a300" +eslint@^5.3.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.3.0.tgz#53695aca5213968aacdf970ccb231e42a2b285f8" dependencies: - ajv "^5.3.0" - babel-code-frame "^6.22.0" + ajv "^6.5.0" + babel-code-frame "^6.26.0" chalk "^2.1.0" - concat-stream "^1.6.0" - cross-spawn "^5.1.0" + cross-spawn "^6.0.5" debug "^3.1.0" doctrine "^2.1.0" - eslint-scope "^3.7.1" + eslint-scope "^4.0.0" + eslint-utils "^1.3.1" eslint-visitor-keys "^1.0.0" - espree "^3.5.4" - esquery "^1.0.0" + espree "^4.0.0" + esquery "^1.0.1" esutils "^2.0.2" file-entry-cache "^2.0.0" functional-red-black-tree "^1.0.1" glob "^7.1.2" - globals "^11.0.1" - ignore "^3.3.3" + globals "^11.7.0" + ignore "^4.0.2" imurmurhash "^0.1.4" - inquirer "^3.0.6" - is-resolvable "^1.0.0" - js-yaml "^3.9.1" + inquirer "^5.2.0" + is-resolvable "^1.1.0" + js-yaml "^3.11.0" json-stable-stringify-without-jsonify "^1.0.1" levn "^0.3.0" - lodash "^4.17.4" - minimatch "^3.0.2" + lodash "^4.17.5" + minimatch "^3.0.4" mkdirp "^0.5.1" natural-compare "^1.4.0" optionator "^0.8.2" path-is-inside "^1.0.2" pluralize "^7.0.0" progress "^2.0.0" - regexpp "^1.0.1" + regexpp "^2.0.0" require-uncached "^1.0.3" - semver "^5.3.0" + semver "^5.5.0" + string.prototype.matchall "^2.0.0" strip-ansi "^4.0.0" - strip-json-comments "~2.0.1" - table "4.0.2" - text-table "~0.2.0" + strip-json-comments "^2.0.1" + table "^4.0.3" + text-table "^0.2.0" -espree@^3.4.3, espree@^3.5.4: +espree@^3.4.3: version "3.5.4" resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7" dependencies: @@ -6913,6 +6934,13 @@ espree@^3.5.1: acorn "^5.2.1" acorn-jsx "^3.0.0" +espree@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/espree/-/espree-4.0.0.tgz#253998f20a0f82db5d866385799d912a83a36634" + dependencies: + acorn "^5.6.0" + acorn-jsx "^4.1.1" + esprima@2.7.x, esprima@^2.6.0, esprima@^2.7.1: version "2.7.3" resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581" @@ -6935,6 +6963,12 @@ esquery@^1.0.0: dependencies: estraverse "^4.0.0" +esquery@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708" + dependencies: + estraverse "^4.0.0" + esrecurse@^4.1.0: version "4.2.1" resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf" @@ -8109,10 +8143,14 @@ global@^4.3.0, global@^4.3.2: min-document "^2.19.0" process "~0.5.1" -globals@^11.0.1, globals@^11.1.0: +globals@^11.1.0: version "11.1.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.1.0.tgz#632644457f5f0e3ae711807183700ebf2e4633e4" +globals@^11.7.0: + version "11.7.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-11.7.0.tgz#a583faa43055b1aca771914bf68258e2fc125673" + globals@^9.17.0, globals@^9.18.0: version "9.18.0" resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a" @@ -8936,6 +8974,10 @@ ignore@^3.2.0, ignore@^3.3.3, ignore@^3.3.5: version "3.3.7" resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021" +ignore@^4.0.2: + version "4.0.3" + resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.3.tgz#e2d58c9654d75b542529fa28d80ac95b29e4f467" + ignoring-watcher@^1.0.5: version "1.1.0" resolved "https://registry.yarnpkg.com/ignoring-watcher/-/ignoring-watcher-1.1.0.tgz#44baf129b8ebe319b5519d6582e109283a9dd2c0" @@ -9138,7 +9180,7 @@ inquirer@^0.11.0: strip-ansi "^3.0.0" through "^2.3.6" -inquirer@^5.1.0: +inquirer@^5.1.0, inquirer@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726" dependencies: @@ -9544,6 +9586,10 @@ is-resolvable@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.1.tgz#acca1cd36dbe44b974b924321555a70ba03b1cf4" +is-resolvable@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88" + is-retry-allowed@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34" @@ -10559,7 +10605,7 @@ js-yaml@^3.10.0, js-yaml@^3.4.3, js-yaml@^3.6.1, js-yaml@^3.9.1: argparse "^1.0.7" esprima "^4.0.0" -js-yaml@^3.7.0, js-yaml@^3.9.0: +js-yaml@^3.11.0, js-yaml@^3.7.0, js-yaml@^3.9.0: version "3.12.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1" dependencies: @@ -15596,9 +15642,9 @@ regexp.prototype.flags@^1.2.0: dependencies: define-properties "^1.1.2" -regexpp@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.0.1.tgz#d857c3a741dce075c2848dcb019a0a975b190d43" +regexpp@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.0.tgz#b2a7534a85ca1b033bcf5ce9ff8e56d4e0755365" regexpu-core@^1.0.0: version "1.0.0" @@ -17339,6 +17385,16 @@ string-width@^1.0.0, string-width@^1.0.1, string-width@^1.0.2: is-fullwidth-code-point "^2.0.0" strip-ansi "^4.0.0" +string.prototype.matchall@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-2.0.0.tgz#2af8fe3d2d6dc53ca2a59bd376b089c3c152b3c8" + dependencies: + define-properties "^1.1.2" + es-abstract "^1.10.0" + function-bind "^1.1.1" + has-symbols "^1.0.0" + regexp.prototype.flags "^1.2.0" + string.prototype.matchall@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-3.0.0.tgz#66f4d8dd5c6c6cea4dffb55ec5f3184a8dd0dd59" @@ -17635,7 +17691,7 @@ syntax-error@^1.1.1: dependencies: acorn-node "^1.2.0" -table@4.0.2, table@^4.0.1: +table@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36" dependencies: @@ -17646,6 +17702,17 @@ table@4.0.2, table@^4.0.1: slice-ansi "1.0.0" string-width "^2.1.1" +table@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc" + dependencies: + ajv "^6.0.1" + ajv-keywords "^3.0.0" + chalk "^2.1.0" + lodash "^4.17.4" + slice-ansi "1.0.0" + string-width "^2.1.1" + tapable@^0.2.7: version "0.2.8" resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22" From e0dd68c7ea54e678976e8470f2a25527f01810e1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sun, 5 Aug 2018 16:21:59 +0200 Subject: [PATCH 02/14] FIX webcomponentjs after upgrade --- app/polymer/src/client/preview/globals.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/polymer/src/client/preview/globals.js b/app/polymer/src/client/preview/globals.js index e50f387ec931..17400cd1d8d5 100644 --- a/app/polymer/src/client/preview/globals.js +++ b/app/polymer/src/client/preview/globals.js @@ -1,4 +1,4 @@ -import '@webcomponents/webcomponentsjs/webcomponents-lite'; +import '@webcomponents/webcomponentsjs/webcomponents-loader'; import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter'; import 'babel-polyfill'; From 935cefd27a720548fb3fabcff9824dd8703d7b1b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sun, 5 Aug 2018 17:57:17 +0200 Subject: [PATCH 03/14] FIX linting issues after eslint upgrade (partial fix) --- .eslintrc.js | 1 + addons/a11y/src/components/Panel.js | 26 ++- addons/a11y/src/components/Report/Elements.js | 4 +- addons/a11y/src/components/Report/Rules.js | 6 +- addons/a11y/src/components/Report/Tags.js | 8 +- .../src/containers/ActionLogger/index.js | 21 ++- addons/actions/src/lib/decycle.js | 2 +- addons/actions/src/lib/retrocycle.js | 2 +- .../src/lib/types/date/__tests__/index.js | 2 +- .../src/lib/types/function/__tests__/index.js | 2 +- .../src/lib/types/infinity/__tests__/index.js | 2 +- .../src/lib/types/nan/__tests__/index.js | 2 +- .../src/lib/types/object/__tests__/index.js | 2 +- .../src/lib/types/regexp/__tests__/index.js | 2 +- .../src/lib/types/symbol/__tests__/index.js | 2 +- .../lib/types/undefined/__tests__/index.js | 2 +- addons/actions/src/manager.js | 2 +- .../src/preview/__tests__/action.test.js | 2 +- .../__tests__/configureActions.test.js | 2 +- .../src/preview/__tests__/preview.test.js | 2 +- addons/actions/src/preview/action.js | 2 +- addons/backgrounds/src/BackgroundPanel.js | 6 +- addons/events/src/components/Event.js | 41 ++--- addons/events/src/components/Panel.js | 16 +- .../src/components/FullScreen/index.js | 4 +- addons/info/src/components/Node.js | 16 +- addons/info/src/components/Props.js | 18 +- addons/info/src/components/Story.js | 159 ++++++++++-------- .../info/src/components/makeTableComponent.js | 4 + addons/info/src/components/markdown/code.js | 9 +- addons/info/src/components/markdown/htags.js | 36 ++-- .../src/components/markdown/pre/copyButton.js | 16 +- .../info/src/components/markdown/pre/pre.js | 10 +- addons/info/src/components/markdown/text.js | 18 +- addons/info/src/components/types/Shape.js | 14 +- addons/info/src/index.test.js | 6 +- addons/jest/src/components/Panel.js | 5 +- addons/jest/src/components/Result.js | 10 +- addons/jest/src/hoc/provideJestResult.js | 5 +- addons/knobs/src/components/Panel.js | 26 ++- addons/knobs/src/components/PropForm.js | 8 +- addons/knobs/src/components/types/Array.js | 9 +- addons/knobs/src/components/types/Color.js | 20 ++- .../knobs/src/components/types/Date/index.js | 8 +- addons/knobs/src/components/types/Number.js | 7 +- addons/knobs/src/components/types/Object.js | 6 +- addons/knobs/src/components/types/Radio.js | 10 +- addons/knobs/src/components/types/Text.js | 8 +- addons/links/src/manager.js | 2 +- addons/links/src/preview.js | 2 +- addons/links/src/preview.test.js | 2 +- addons/links/src/react/components/link.js | 7 +- .../storyshots-puppeteer/src/index.js | 11 +- addons/storysource/src/StoryPanel.js | 14 +- addons/storysource/src/events.js | 3 + addons/storysource/src/index.js | 7 +- addons/storysource/src/manager.js | 2 +- addons/storysource/src/preview.js | 2 +- .../viewport/src/manager/components/Panel.js | 17 +- .../manager/components/tests/Panel.test.js | 2 + .../viewport/src/manager/tests/index.test.js | 2 +- .../viewport/src/preview/tests/index.test.js | 2 +- .../preview/components/OnDeviceUI/index.js | 12 +- .../preview/components/StoryListView/index.js | 37 ++-- .../src/preview/components/StoryView/index.js | 38 +++-- .../src/client/preview/element_check.test.js | 2 +- app/react/src/demo/Welcome.js | 18 +- docs/src/components/Docs/Nav/dropdown.js | 6 +- docs/src/components/Footer/index.js | 3 +- docs/src/components/Grid/Grid/index.js | 4 +- .../src/components/Homepage/Featured/index.js | 6 +- .../components/Homepage/MainLinks/index.js | 11 +- docs/src/components/Homepage/UsedBy/index.js | 6 +- docs/src/html.js | 8 +- docs/src/templates/_docstemplate.jsx | 2 +- .../src/components/LifecycleLogger.js | 18 +- .../src/stories/force-rerender.stories.js | 4 +- .../src/stories/index.stories.js | 2 + .../storybook/stories/Button/index.android.js | 6 +- .../storybook/stories/Button/index.ios.js | 4 +- .../storybook/stories/CenterView/index.js | 4 +- .../storybook/stories/Knobs/index.js | 6 +- .../storybook/stories/Welcome/index.js | 10 +- .../stories/index.stories.js | 2 + examples/mithril-kitchen-sink/src/Button.js | 2 +- examples/mithril-kitchen-sink/src/Welcome.js | 15 +- .../src/stories/addon-knobs.stories.js | 6 +- .../components/BaseButton.js | 2 +- .../components/DelayedRender.js | 5 +- .../components/DocgenButton.js | 2 +- .../components/FlowTypeButton.js | 2 +- .../components/ImportedPropsButton.js | 2 +- .../components/addon-a11y/Button.js | 1 + examples/official-storybook/stories/Logger.js | 8 +- .../stories/addon-knobs.stories.js | 23 ++- .../stories/addon-links.stories.js | 8 +- .../storybook/stories/Button/index.android.js | 6 +- .../storybook/stories/Button/index.ios.js | 4 +- .../storybook/stories/CenterView/index.js | 4 +- .../storybook/stories/Knobs/index.js | 6 +- .../storybook/stories/Welcome/index.js | 10 +- lib/addons/src/make-decorator.js | 2 + lib/addons/src/make-decorator.test.js | 2 +- lib/channels/src/index.test.js | 2 +- .../HTML/template/stories/index.stories.js | 6 +- .../MITHRIL/template/stories/Button.js | 2 +- .../MITHRIL/template/stories/Welcome.js | 15 +- .../storybook/stories/Button/index.android.js | 6 +- .../storybook/stories/Button/index.ios.js | 4 +- .../storybook/stories/CenterView/index.js | 4 +- .../storybook/stories/Welcome/index.js | 10 +- .../storybook/stories/Button/index.android.js | 4 +- .../storybook/stories/Button/index.ios.js | 4 +- .../storybook/stories/CenterView/index.js | 2 +- .../storybook/stories/Welcome/index.js | 8 +- .../template/src/stories/index.stories.js | 2 +- .../VUE/template/stories/index.stories.js | 2 +- .../sfc_vue/src/stories/index.stories.js | 2 +- lib/client-logger/src/index.test.js | 2 +- lib/components/src/addon_panel/index.js | 2 +- lib/components/src/highlight_button.js | 21 +-- lib/components/src/layout/desktop.js | 4 +- lib/components/src/layout/dimensions.js | 13 +- lib/components/src/layout/index.js | 2 +- lib/components/src/layout/mobile.js | 5 +- lib/components/src/navigation/RoutedLink.js | 12 +- .../src/navigation/RoutedLink.test.js | 2 + lib/components/src/tabs/tabs.js | 7 +- lib/core/src/client/manager/preview.js | 6 +- .../src/client/preview/client_api.test.js | 2 + lib/node-logger/src/index.test.js | 2 +- lib/ui/example/client/preview.js | 8 +- lib/ui/src/__tests__/index.js | 2 +- lib/ui/src/libs/withLifecycleDecorator.js | 8 +- lib/ui/src/modules/ui/components/menu_item.js | 22 +-- .../src/modules/ui/components/search_box.js | 4 +- .../stories_panel/stories_tree/index.js | 11 +- .../components/stories_panel/text_filter.js | 7 +- .../modules/ui/libs/gen_podda_loader.test.js | 2 + scripts/jest-ts-babel.js | 2 +- 140 files changed, 728 insertions(+), 476 deletions(-) create mode 100644 addons/storysource/src/events.js diff --git a/.eslintrc.js b/.eslintrc.js index 3a70661031b9..ad34e8fc73a4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -14,6 +14,7 @@ module.exports = { plugins: ['prettier', 'jest', 'import', 'react', 'jsx-a11y', 'json'], parser: 'babel-eslint', parserOptions: { + ecmaVersion: 8, sourceType: 'module', }, env: { diff --git a/addons/a11y/src/components/Panel.js b/addons/a11y/src/components/Panel.js index d371ebc10359..3796cc5e75d8 100644 --- a/addons/a11y/src/components/Panel.js +++ b/addons/a11y/src/components/Panel.js @@ -35,21 +35,27 @@ class Panel extends Component { }; componentDidMount() { - this.props.channel.on(CHECK_EVENT_ID, this.onUpdate); - this.props.channel.on(STORY_RENDERED, this.requestCheck); - this.props.channel.on(RERUN_EVENT_ID, this.requestCheck); + const { channel } = this.props; + + channel.on(CHECK_EVENT_ID, this.onUpdate); + channel.on(STORY_RENDERED, this.requestCheck); + channel.on(RERUN_EVENT_ID, this.requestCheck); } componentDidUpdate(prevProps) { - if (!prevProps.active && this.props.active) { + const { active } = this.props; + + if (!prevProps.active && active) { this.requestCheck(); } } componentWillUnmount() { - this.props.channel.removeListener(CHECK_EVENT_ID, this.onUpdate); - this.props.channel.removeListener(STORY_RENDERED, this.requestCheck); - this.props.channel.removeListener(RERUN_EVENT_ID, this.requestCheck); + const { channel } = this.props; + + channel.removeListener(CHECK_EVENT_ID, this.onUpdate); + channel.removeListener(STORY_RENDERED, this.requestCheck); + channel.removeListener(RERUN_EVENT_ID, this.requestCheck); } onUpdate = ({ passes, violations }) => { @@ -60,8 +66,10 @@ class Panel extends Component { }; requestCheck = () => { - if (this.props.active) { - this.props.channel.emit(REQUEST_CHECK_EVENT_ID); + const { channel, active } = this.props; + + if (active) { + channel.emit(REQUEST_CHECK_EVENT_ID); } }; diff --git a/addons/a11y/src/components/Report/Elements.js b/addons/a11y/src/components/Report/Elements.js index 4b34e24870d3..3a957b513356 100644 --- a/addons/a11y/src/components/Report/Elements.js +++ b/addons/a11y/src/components/Report/Elements.js @@ -40,7 +40,9 @@ Element.propTypes = { /* eslint-disable react/no-array-index-key */ const Elements = ({ elements, passes }) => (
    - {elements.map((element, index) => )} + {elements.map((element, index) => ( + + ))}
); diff --git a/addons/a11y/src/components/Report/Rules.js b/addons/a11y/src/components/Report/Rules.js index 5702ea3b619e..33510dd4d0a5 100644 --- a/addons/a11y/src/components/Report/Rules.js +++ b/addons/a11y/src/components/Report/Rules.js @@ -61,7 +61,11 @@ Rule.propTypes = { /* eslint-disable react/no-array-index-key */ function Rules({ rules, passes }) { return ( - {rules.map((rule, index) => )} + + {rules.map((rule, index) => ( + + ))} + ); } Rules.propTypes = { diff --git a/addons/a11y/src/components/Report/Tags.js b/addons/a11y/src/components/Report/Tags.js index 0800dbb6c299..a79d7dae7c1d 100644 --- a/addons/a11y/src/components/Report/Tags.js +++ b/addons/a11y/src/components/Report/Tags.js @@ -17,7 +17,13 @@ const Item = styled('div')(({ theme }) => ({ })); function Tags({ tags }) { - return {tags.map(tag => {tag})}; + return ( + + {tags.map(tag => ( + {tag} + ))} + + ); } Tags.propTypes = { tags: PropTypes.arrayOf(PropTypes.node).isRequired, diff --git a/addons/actions/src/containers/ActionLogger/index.js b/addons/actions/src/containers/ActionLogger/index.js index 6d78106dfb9d..0873523a4da9 100644 --- a/addons/actions/src/containers/ActionLogger/index.js +++ b/addons/actions/src/containers/ActionLogger/index.js @@ -6,8 +6,8 @@ import deepEqual from 'deep-equal'; import { CYCLIC_KEY, retrocycle } from '../../lib'; import { isObject } from '../../lib/util'; -import ActionLoggerComponent from '../../components/ActionLogger/'; -import { EVENT_ID } from '../../'; +import ActionLoggerComponent from '../../components/ActionLogger'; +import { EVENT_ID } from '../..'; export default class ActionLogger extends React.Component { constructor(props, ...args) { @@ -18,12 +18,16 @@ export default class ActionLogger extends React.Component { } componentDidMount() { - this.props.channel.on(EVENT_ID, this._actionListener); - this.stopListeningOnStory = this.props.api.onStory(this._storyChangeListener); + const { channel, api } = this.props; + + channel.on(EVENT_ID, this._actionListener); + this.stopListeningOnStory = api.onStory(this._storyChangeListener); } componentWillUnmount() { - this.props.channel.removeListener(EVENT_ID, this._actionListener); + const { channel } = this.props; + + channel.removeListener(EVENT_ID, this._actionListener); if (this.stopListeningOnStory) { this.stopListeningOnStory(); } @@ -37,9 +41,11 @@ export default class ActionLogger extends React.Component { } addAction(action) { + let { actions = [] } = this.state; + actions = [...actions]; + action.data.args = action.data.args.map(arg => retrocycle(arg)); // eslint-disable-line const isCyclic = !!action.data.args.find(arg => isObject(arg) && arg[CYCLIC_KEY]); - const actions = [...this.state.actions]; const previous = actions.length && actions[0]; if (previous && !isCyclic && deepEqual(previous.data, action.data, { strict: true })) { @@ -56,9 +62,10 @@ export default class ActionLogger extends React.Component { } render() { + const { actions = [] } = this.state; const { active } = this.props; const props = { - actions: this.state.actions, + actions, onClear: () => this.clearActions(), }; return active ? : null; diff --git a/addons/actions/src/lib/decycle.js b/addons/actions/src/lib/decycle.js index c233e463be4c..b64e5f13fb83 100644 --- a/addons/actions/src/lib/decycle.js +++ b/addons/actions/src/lib/decycle.js @@ -2,7 +2,7 @@ import { DecycleError } from './errors'; import { getPropertiesList, typeReplacer, omitProperty } from './util'; -import { CYCLIC_KEY } from './'; +import { CYCLIC_KEY } from '.'; import { objectType } from './types'; diff --git a/addons/actions/src/lib/retrocycle.js b/addons/actions/src/lib/retrocycle.js index 0951445b3625..9173aae6447c 100644 --- a/addons/actions/src/lib/retrocycle.js +++ b/addons/actions/src/lib/retrocycle.js @@ -1,6 +1,6 @@ import reviver from './reviver'; import { muteProperty } from './util'; -import { CYCLIC_KEY } from './'; +import { CYCLIC_KEY } from '.'; // eslint-disable-next-line no-control-regex const pathReg = /^\$(?:\[(?:\d+|"(?:[^\\"\u0000-\u001f]|\\([\\"/bfnrt]|u[0-9a-zA-Z]{4}))*")])*$/; diff --git a/addons/actions/src/lib/types/date/__tests__/index.js b/addons/actions/src/lib/types/date/__tests__/index.js index 92df8dc0e9e9..e588e2e326a7 100644 --- a/addons/actions/src/lib/types/date/__tests__/index.js +++ b/addons/actions/src/lib/types/date/__tests__/index.js @@ -1,4 +1,4 @@ -import dateType from '../'; +import dateType from '..'; const date = new Date(1512137134873); const isoString = date.toISOString(); diff --git a/addons/actions/src/lib/types/function/__tests__/index.js b/addons/actions/src/lib/types/function/__tests__/index.js index 9e4f0e8b7836..0b31acc756aa 100644 --- a/addons/actions/src/lib/types/function/__tests__/index.js +++ b/addons/actions/src/lib/types/function/__tests__/index.js @@ -1,4 +1,4 @@ -import functionType from '../'; +import functionType from '..'; import reservedKeywords from '../reservedKeywords'; import createFunction from '../createFunction'; import createBoundFunction from '../createBoundFunction'; diff --git a/addons/actions/src/lib/types/infinity/__tests__/index.js b/addons/actions/src/lib/types/infinity/__tests__/index.js index 926d8b78466f..5db2882a1d09 100644 --- a/addons/actions/src/lib/types/infinity/__tests__/index.js +++ b/addons/actions/src/lib/types/infinity/__tests__/index.js @@ -1,4 +1,4 @@ -import infinityType from '../'; +import infinityType from '..'; describe('Infinity', () => { it('Recognizes Infinity', () => { diff --git a/addons/actions/src/lib/types/nan/__tests__/index.js b/addons/actions/src/lib/types/nan/__tests__/index.js index 7a2e4a5b77f8..0bf1bb16582c 100644 --- a/addons/actions/src/lib/types/nan/__tests__/index.js +++ b/addons/actions/src/lib/types/nan/__tests__/index.js @@ -1,4 +1,4 @@ -import nanType from '../'; +import nanType from '..'; describe('NaN', () => { it('Recognizes NaN', () => { diff --git a/addons/actions/src/lib/types/object/__tests__/index.js b/addons/actions/src/lib/types/object/__tests__/index.js index 04caf09e5d04..e2324d934008 100644 --- a/addons/actions/src/lib/types/object/__tests__/index.js +++ b/addons/actions/src/lib/types/object/__tests__/index.js @@ -1,4 +1,4 @@ -import objectType from '../'; +import objectType from '..'; import { DEPTH_KEY } from '../configureDepth'; describe('Object', () => { diff --git a/addons/actions/src/lib/types/regexp/__tests__/index.js b/addons/actions/src/lib/types/regexp/__tests__/index.js index f00cb58e82a6..f924894a865b 100644 --- a/addons/actions/src/lib/types/regexp/__tests__/index.js +++ b/addons/actions/src/lib/types/regexp/__tests__/index.js @@ -1,4 +1,4 @@ -import regExpType from '../'; +import regExpType from '..'; const regExp = /aRegExp/g; diff --git a/addons/actions/src/lib/types/symbol/__tests__/index.js b/addons/actions/src/lib/types/symbol/__tests__/index.js index 6b23044ba591..792ce0e15aac 100644 --- a/addons/actions/src/lib/types/symbol/__tests__/index.js +++ b/addons/actions/src/lib/types/symbol/__tests__/index.js @@ -1,4 +1,4 @@ -import symbolType from '../'; +import symbolType from '..'; const symbol = Symbol('S'); diff --git a/addons/actions/src/lib/types/undefined/__tests__/index.js b/addons/actions/src/lib/types/undefined/__tests__/index.js index b144f47f1035..da8edd78eceb 100644 --- a/addons/actions/src/lib/types/undefined/__tests__/index.js +++ b/addons/actions/src/lib/types/undefined/__tests__/index.js @@ -1,4 +1,4 @@ -import undefinedType from '../'; +import undefinedType from '..'; describe('undefined', () => { it('Recognizes undefined', () => { diff --git a/addons/actions/src/manager.js b/addons/actions/src/manager.js index 43eea1709d91..feee5973d056 100644 --- a/addons/actions/src/manager.js +++ b/addons/actions/src/manager.js @@ -1,7 +1,7 @@ import React from 'react'; import addons from '@storybook/addons'; import ActionLogger from './containers/ActionLogger'; -import { ADDON_ID, PANEL_ID } from './'; +import { ADDON_ID, PANEL_ID } from '.'; export function register() { addons.register(ADDON_ID, api => { diff --git a/addons/actions/src/preview/__tests__/action.test.js b/addons/actions/src/preview/__tests__/action.test.js index fd5c301bb59f..8f221c61e771 100644 --- a/addons/actions/src/preview/__tests__/action.test.js +++ b/addons/actions/src/preview/__tests__/action.test.js @@ -1,5 +1,5 @@ import addons from '@storybook/addons'; -import { action, configureActions } from '../../'; +import { action, configureActions } from '../..'; jest.mock('@storybook/addons'); diff --git a/addons/actions/src/preview/__tests__/configureActions.test.js b/addons/actions/src/preview/__tests__/configureActions.test.js index bcdf7fad592d..7bebbe8a2524 100644 --- a/addons/actions/src/preview/__tests__/configureActions.test.js +++ b/addons/actions/src/preview/__tests__/configureActions.test.js @@ -1,5 +1,5 @@ import { config } from '../configureActions'; -import { configureActions } from '../../'; +import { configureActions } from '../..'; describe('Configure Actions', () => { it('can configure actions', () => { diff --git a/addons/actions/src/preview/__tests__/preview.test.js b/addons/actions/src/preview/__tests__/preview.test.js index b6e562d5a58b..3e15c894ce81 100644 --- a/addons/actions/src/preview/__tests__/preview.test.js +++ b/addons/actions/src/preview/__tests__/preview.test.js @@ -1,6 +1,6 @@ import addons from '@storybook/addons'; import uuid from 'uuid/v1'; -import { action } from '../'; +import { action } from '..'; import { undefinedType, symbolType } from '../../lib/types'; jest.mock('uuid/v1'); diff --git a/addons/actions/src/preview/action.js b/addons/actions/src/preview/action.js index 8aa911149448..2d1bea9989aa 100644 --- a/addons/actions/src/preview/action.js +++ b/addons/actions/src/preview/action.js @@ -1,6 +1,6 @@ import uuid from 'uuid/v1'; import addons from '@storybook/addons'; -import { EVENT_ID } from '../'; +import { EVENT_ID } from '..'; import { canConfigureName, prepareArguments } from '../lib/util'; import { config } from './configureActions'; diff --git a/addons/backgrounds/src/BackgroundPanel.js b/addons/backgrounds/src/BackgroundPanel.js index 5d571fd1f088..2b4aed57f385 100644 --- a/addons/backgrounds/src/BackgroundPanel.js +++ b/addons/backgrounds/src/BackgroundPanel.js @@ -120,8 +120,9 @@ export default class BackgroundPanel extends Component { } setBackgroundFromSwatch = background => { + const { api } = this.props; this.updateIframe(background); - this.props.api.setQueryParams({ background }); + api.setQueryParams({ background }); }; updateIframe(background) { @@ -130,7 +131,8 @@ export default class BackgroundPanel extends Component { render() { const { active } = this.props; - const backgrounds = [...this.state.backgrounds]; + const { backgrounds = [] } = this.state; + if (!active) { return null; } diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.js index b81d178ee6a0..a24521fd7297 100644 --- a/addons/events/src/components/Event.js +++ b/addons/events/src/components/Event.js @@ -101,20 +101,6 @@ class Item extends Component { isTextAreaShowed: false, }; - static getDerivedStateFromProps = ({ payload }, { prevPayload }) => { - if (payload !== prevPayload) { - const payloadString = json.plain(payload); - - return { - failed: false, - payload: getJSONFromString(payloadString), - payloadString, - prevPayload, - }; - } - return null; - }; - onChange = ({ target: { value } }) => { const newState = { payloadString: value, @@ -131,9 +117,12 @@ class Item extends Component { }; onEmitClick = () => { - this.props.onEmit({ - name: this.props.name, - payload: this.state.payload, + const { onEmit, name } = this.props; + const { payload } = this.state; + + onEmit({ + name, + payload, }); }; @@ -143,9 +132,23 @@ class Item extends Component { })); }; + static getDerivedStateFromProps = ({ payload }, { prevPayload }) => { + if (payload !== prevPayload) { + const payloadString = json.plain(payload); + + return { + failed: false, + payload: getJSONFromString(payloadString), + payloadString, + prevPayload, + }; + } + return null; + }; + render() { const { title, name } = this.props; - const { failed, isTextAreaShowed } = this.state; + const { failed, isTextAreaShowed, payloadString } = this.state; return ( @@ -158,7 +161,7 @@ class Item extends Component { {isTextAreaShowed ? ( diff --git a/addons/events/src/components/Panel.js b/addons/events/src/components/Panel.js index 7061171ac8d8..413c7a6a2b60 100644 --- a/addons/events/src/components/Panel.js +++ b/addons/events/src/components/Panel.js @@ -28,11 +28,15 @@ export default class Events extends Component { }; componentDidMount() { - this.props.channel.on(EVENTS.ADD, this.onAdd); + const { channel } = this.props; + + channel.on(EVENTS.ADD, this.onAdd); } componentWillUnmount() { - this.props.channel.removeListener(EVENTS.ADD, this.onAdd); + const { channel } = this.props; + + channel.removeListener(EVENTS.ADD, this.onAdd); } onAdd = events => { @@ -40,7 +44,9 @@ export default class Events extends Component { }; onEmit = event => { - this.props.channel.emit(EVENTS.EMIT, event); + const { channel } = this.props; + + channel.emit(EVENTS.EMIT, event); }; render() { @@ -48,7 +54,9 @@ export default class Events extends Component { const { active } = this.props; return active ? ( - {events.map(event => )} + {events.map(event => ( + + ))} ) : null; } diff --git a/addons/graphql/src/components/FullScreen/index.js b/addons/graphql/src/components/FullScreen/index.js index 4126671d5c32..adcea598dbcb 100644 --- a/addons/graphql/src/components/FullScreen/index.js +++ b/addons/graphql/src/components/FullScreen/index.js @@ -2,8 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import style from './style'; -export default function FullScreen(props) { - return
{props.children}
; +export default function FullScreen({ children }) { + return
{children}
; } FullScreen.defaultProps = { children: null }; diff --git a/addons/info/src/components/Node.js b/addons/info/src/components/Node.js index 6369ec017947..c4f850a68ae6 100644 --- a/addons/info/src/components/Node.js +++ b/addons/info/src/components/Node.js @@ -76,7 +76,10 @@ export default function Node(props) { if (!children) { return (
- <{name} + + < + {name} +
- <{name} + + < + {name} + ))}
- </{name}> + + </ + {name} + > +
); diff --git a/addons/info/src/components/Props.js b/addons/info/src/components/Props.js index 5c40235fbd85..851b160ee1ea 100644 --- a/addons/info/src/components/Props.js +++ b/addons/info/src/components/Props.js @@ -9,9 +9,16 @@ const stylesheet = { }; export default function Props(props) { - const { maxPropsIntoLine, maxPropArrayLength, maxPropObjectKeys, maxPropStringLength } = props; - const nodeProps = props.node.props; - const { defaultProps } = props.node.type; + const { + maxPropsIntoLine, + maxPropArrayLength, + maxPropObjectKeys, + maxPropStringLength, + node, + singleLine, + } = props; + const nodeProps = node.props; + const { defaultProps } = node.type; if (!nodeProps || typeof nodeProps !== 'object') { return ; } @@ -26,7 +33,7 @@ export default function Props(props) { ); const breakIntoNewLines = names.length > maxPropsIntoLine; - const endingSpace = props.singleLine ? ' ' : ''; + const endingSpace = singleLine ? ' ' : ''; const items = []; names.forEach((name, i) => { @@ -34,7 +41,8 @@ export default function Props(props) { {breakIntoNewLines ? ( -
   +
+    ) : ( ' ' diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index b851fa113e26..5201f7e3eb7a 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -1,6 +1,6 @@ /* eslint no-underscore-dangle: 0 */ -import React, { createElement } from 'react'; +import React, { Component, createElement } from 'react'; import { polyfill } from 'react-lifecycles-compat'; import PropTypes from 'prop-types'; import global from 'global'; @@ -16,7 +16,7 @@ const { STORYBOOK_REACT_CLASSES } = global; const getName = type => type.displayName || type.name; -const stylesheet = { +const stylesheetBase = { button: { base: { fontFamily: 'sans-serif', @@ -101,29 +101,34 @@ const stylesheet = { }, }; -class Story extends React.Component { - constructor(...args) { - super(...args); +class Story extends Component { + constructor(props, ...args) { + super(props, ...args); this.state = { open: false, }; this.marksy = marksy({ createElement, - elements: this.props.components, + elements: props.components, }); } _renderStory() { - return
{this.props.children}
; + const { stylesheet } = this.state; + const { children } = this.props; + + return
{children}
; } _renderInline() { + const { stylesheet } = this.state; + return (
{this._renderInlineHeader()} {this._renderStory()} -
-
+
+
{this._getInfoContent()} {this._getComponentDescription()} {this._getSourceCode()} @@ -135,25 +140,30 @@ class Story extends React.Component { } _renderInlineHeader() { + const { stylesheet } = this.state; + const infoHeader = this._getInfoHeader(); return ( infoHeader && ( -
-
{infoHeader}
+
+
{infoHeader}
) ); } _renderOverlay() { + const { stylesheet, open } = this.state; + const { children } = this.props; + const buttonStyle = { - ...this.state.stylesheet.button.base, - ...this.state.stylesheet.button.topRight, + ...stylesheet.button.base, + ...stylesheet.button.topRight, }; - const infoStyle = Object.assign({}, this.state.stylesheet.info); - if (!this.state.open) { + const infoStyle = Object.assign({}, stylesheet.info); + if (!open) { infoStyle.display = 'none'; } @@ -169,7 +179,7 @@ class Story extends React.Component { return (
-
{this.props.children}
+
{children}
@@ -177,8 +187,8 @@ class Story extends React.Component { -
-
+
+
{this._getInfoHeader()} {this._getInfoContent()} {this._getComponentDescription()} @@ -192,38 +202,36 @@ class Story extends React.Component { } _getInfoHeader() { - if (!this.props.context || !this.props.showHeader) { + const { stylesheet } = this.state; + const { context, showHeader } = this.props; + + if (!context || !showHeader) { return null; } return ( -
-

{this.props.context.kind}

-

{this.props.context.story}

+
+

{context.kind}

+

{context.story}

); } _getInfoContent() { - if (!this.props.info) { + const { info, showInline } = this.props; + const { stylesheet } = this.state; + + if (!info) { return ''; } - if (React.isValidElement(this.props.info)) { + if (React.isValidElement(info)) { return ( -
- {this.props.info} -
+
{info}
); } - const lines = this.props.info.split('\n'); + const lines = info.split('\n'); while (lines[0].trim() === '') { lines.shift(); } @@ -233,15 +241,16 @@ class Story extends React.Component { padding = matches[0].length; } const source = lines.map(s => s.slice(padding)).join('\n'); - return
{this.marksy(source).tree}
; + return
{this.marksy(source).tree}
; } _getComponentDescription() { + const { context } = this.props; let retDiv = null; if (Object.keys(STORYBOOK_REACT_CLASSES).length) { Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => { - if (STORYBOOK_REACT_CLASSES[key].name === this.props.context.story) { + if (STORYBOOK_REACT_CLASSES[key].name === context.story) { retDiv =
{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
; } }); @@ -251,22 +260,25 @@ class Story extends React.Component { } _getSourceCode() { - if (!this.props.showSource) { - return null; - } - const { + showSource, maxPropsIntoLine, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength, + children, } = this.props; + const { stylesheet } = this.state; + + if (!showSource) { + return null; + } return (
-

Story Source

+

Story Source

-          {React.Children.map(this.props.children, (root, idx) => (
+          {React.Children.map(children, (root, idx) => (
              {
+    if (propTables) {
+      propTables.forEach(type => {
         types.set(type, true);
       });
     }
 
     // depth-first traverse and collect types
-    const extract = children => {
-      if (!children) {
+    const extract = innerChildren => {
+      if (!innerChildren) {
         return;
       }
-      if (Array.isArray(children)) {
-        children.forEach(extract);
+      if (Array.isArray(innerChildren)) {
+        innerChildren.forEach(extract);
         return;
       }
-      if (children.props && children.props.children) {
-        extract(children.props.children);
+      if (innerChildren.props && innerChildren.props.innerChildren) {
+        extract(innerChildren.props.innerChildren);
       }
       if (
-        typeof children === 'string' ||
-        typeof children.type === 'string' ||
-        (Array.isArray(this.props.propTablesExclude) && // also ignore excluded types
-          ~this.props.propTablesExclude.indexOf(children.type)) // eslint-disable-line no-bitwise
+        typeof innerChildren === 'string' ||
+        typeof innerChildren.type === 'string' ||
+        (Array.isArray(propTablesExclude) && // also ignore excluded types
+          ~propTablesExclude.indexOf(innerChildren.type)) // eslint-disable-line no-bitwise
       ) {
         return;
       }
-      if (children.type && !types.has(children.type)) {
-        types.set(children.type, true);
+      if (innerChildren.type && !types.has(innerChildren.type)) {
+        types.set(innerChildren.type, true);
       }
     };
 
     // extract components from children
-    extract(this.props.children);
+    extract(children);
 
     const array = Array.from(types.keys());
     array.sort((a, b) => getName(a) > getName(b));
 
-    const {
-      maxPropObjectKeys,
-      maxPropArrayLength,
-      maxPropStringLength,
-      excludedPropTypes,
-    } = this.props;
-    const propTables = array.map((type, i) => (
+    propTables = array.map((type, i) => (
       // eslint-disable-next-line react/no-array-index-key
       

-        
"{getName(type)}" Component

+        
"{getName(type)}" Component

         
-        
Prop Types

+        
Prop Types

         {propTables}
       

     );
   }
 
   render() {
-    // 
-    return this.props.showInline ? this._renderInline() : this._renderOverlay();
+    const { showInline } = this.props;
+    // 
+    return showInline ? this._renderInline() : this._renderOverlay();
   }
 }
 
-Story.getDerivedStateFromProps = ({ styles }) => ({ stylesheet: styles(stylesheet) });
+Story.getDerivedStateFromProps = ({ styles }) => ({ stylesheet: styles(stylesheetBase) });
 
 Story.displayName = 'Story';
 
diff --git a/addons/info/src/components/makeTableComponent.js b/addons/info/src/components/makeTableComponent.js
index 173083a846df..2f2cdd979ccb 100644
--- a/addons/info/src/components/makeTableComponent.js
+++ b/addons/info/src/components/makeTableComponent.js
@@ -67,10 +67,12 @@ 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;
     });
   }
@@ -84,10 +86,12 @@ export default function makeTableComponent(Component) {
       return null;
     }
 
+    /* eslint-disable react/destructuring-assignment */
     const propDefinitionsMap = hasDocgen(props.type)
       ? propsFromDocgen(props.type)
       : propsFromPropTypes(props.type);
     const propDefinitions = Object.values(propDefinitionsMap);
+    /* eslint-enable react/destructuring-assignment */
 
     return ;
   };
diff --git a/addons/info/src/components/markdown/code.js b/addons/info/src/components/markdown/code.js
index db17696ca944..3663bbd0f1d1 100644
--- a/addons/info/src/components/markdown/code.js
+++ b/addons/info/src/components/markdown/code.js
@@ -18,6 +18,7 @@ export class Code extends React.Component {
   }
 
   render() {
+    const { language, code } = this.props;
     const codeStyle = {
       fontFamily: 'Menlo, Monaco, "Courier New", monospace',
       backgroundColor: '#fafafa',
@@ -31,12 +32,12 @@ export class Code extends React.Component {
       overflowX: 'scroll',
     };
 
-    const className = this.props.language ? `language-${this.props.language}` : '';
+    const className = language ? `language-${language}` : '';
 
     return (
       
         
-          {this.props.code}
+          {code}
         
       

     );
@@ -52,14 +53,14 @@ Code.defaultProps = {
   code: null,
 };
 
-export function Blockquote(props) {
+export function Blockquote({ children }) {
   const style = {
     fontSize: '1.88em',
     fontFamily: 'Menlo, Monaco, "Courier New", monospace',
     borderLeft: '8px solid #fafafa',
     padding: '1rem',
   };
-  return 
{props.children}
;
+  return 
{children}
;
 }
 
 Blockquote.propTypes = { children: PropTypes.node };
diff --git a/addons/info/src/components/markdown/htags.js b/addons/info/src/components/markdown/htags.js
index b0f0df8d652a..50b542e601c4 100644
--- a/addons/info/src/components/markdown/htags.js
+++ b/addons/info/src/components/markdown/htags.js
@@ -11,7 +11,7 @@ const propTypes = {
   id: PropTypes.string,
 };
 
-export function H1(props) {
+export function H1({ id, children }) {
   const styles = {
     ...baseFonts,
     borderBottom: '1px solid #eee',
@@ -21,8 +21,8 @@ export function H1(props) {
     fontSize: '40px',
   };
   return (
-    

-      {props.children}
+    

+      {children}
     

   );
 }
@@ -30,7 +30,7 @@ export function H1(props) {
 H1.defaultProps = defaultProps;
 H1.propTypes = propTypes;
 
-export function H2(props) {
+export function H2({ id, children }) {
   const styles = {
     ...baseFonts,
     fontWeight: 600,
@@ -39,8 +39,8 @@ export function H2(props) {
     fontSize: '30px',
   };
   return (
-    

-      {props.children}
+    

+      {children}
     

   );
 }
@@ -48,7 +48,7 @@ export function H2(props) {
 H2.defaultProps = defaultProps;
 H2.propTypes = propTypes;
 
-export function H3(props) {
+export function H3({ id, children }) {
   const styles = {
     ...baseFonts,
     fontWeight: 600,
@@ -58,8 +58,8 @@ export function H3(props) {
     textTransform: 'uppercase',
   };
   return (
-    

-      {props.children}
+    

+      {children}
     

   );
 }
@@ -67,7 +67,7 @@ export function H3(props) {
 H3.defaultProps = defaultProps;
 H3.propTypes = propTypes;
 
-export function H4(props) {
+export function H4({ id, children }) {
   const styles = {
     ...baseFonts,
     fontWeight: 600,
@@ -76,8 +76,8 @@ export function H4(props) {
     fontSize: '20px',
   };
   return (
-    

-      {props.children}
+    

+      {children}
     

   );
 }
@@ -85,7 +85,7 @@ export function H4(props) {
 H4.defaultProps = defaultProps;
 H4.propTypes = propTypes;
 
-export function H5(props) {
+export function H5({ id, children }) {
   const styles = {
     ...baseFonts,
     fontWeight: 600,
@@ -94,8 +94,8 @@ export function H5(props) {
     fontSize: '18px',
   };
   return (
-    

-      {props.children}
+    

+      {children}
     

   );
 }
@@ -103,7 +103,7 @@ export function H5(props) {
 H5.defaultProps = defaultProps;
 H5.propTypes = propTypes;
 
-export function H6(props) {
+export function H6({ id, children }) {
   const styles = {
     ...baseFonts,
     fontWeight: 400,
@@ -112,8 +112,8 @@ export function H6(props) {
     fontSize: '18px',
   };
   return (
-    

-      {props.children}
+    

+      {children}
     

   );
 }
diff --git a/addons/info/src/components/markdown/pre/copyButton.js b/addons/info/src/components/markdown/pre/copyButton.js
index ff11d7a60d0f..e29632663d73 100644
--- a/addons/info/src/components/markdown/pre/copyButton.js
+++ b/addons/info/src/components/markdown/pre/copyButton.js
@@ -24,7 +24,7 @@ const Button = styled('button')(
       borderColor: '#ccc',
     },
   },
-  props => props.styles
+  ({ styles }) => styles
 );
 
 const ContentWrapper = styled('div')(
@@ -32,19 +32,19 @@ const ContentWrapper = styled('div')(
     transition: 'transform .2s ease',
     height: 16,
   },
-  props => ({
-    ...props.styles,
-    transform: props.toggled ? 'translateY(0px)' : 'translateY(-100%) translateY(-6px)',
+  ({ styles, toggled }) => ({
+    ...styles,
+    transform: toggled ? 'translateY(0px)' : 'translateY(-100%) translateY(-6px)',
   })
 );
 
-function CopyButton(props) {
-  const { copyButton = {}, copyButtonContent } = props.theme;
+function CopyButton({ theme, onClick, toggled }) {
+  const { copyButton = {}, copyButtonContent } = theme;
   const { toggleText = 'Copied!', text = 'Copy', ...copyButtonStyles } = copyButton;
 
   return (
-    ;
+    const element = ;
 
     expect(isValidFiberElement(element)).toBe(true);
   });
diff --git a/app/react/src/demo/Welcome.js b/app/react/src/demo/Welcome.js
index 2d4754cec0ee..3afe7773c192 100644
--- a/app/react/src/demo/Welcome.js
+++ b/app/react/src/demo/Welcome.js
@@ -42,22 +42,20 @@ const NavButton = styled(Link.withComponent('button'))({
   font: 'inherit',
 });
 
-const Welcome = props => (
+const Welcome = ({ showApp }) => (
   

     Welcome to storybook
     
This is a UI component dev environment for your app.

     

       We've added some basic stories inside the src/stories directory.
-      

-      A story is a single state of one or more UI components. You can have as many stories as you
-      want.
+      
A story is a single state of one or more UI components. You can have as many stories as
+      you want.
       

       (Basically a story is like a visual test case.)
     

     

-      See these sample stories for a component called{' '}
-      Button
-      .
+      See these sample stories for a component called{' '}
+      Button.
     

     

       Just like that, you can add your own components as stories.
@@ -65,10 +63,12 @@ const Welcome = props => (
       You can also edit those components and see changes right away.
       

       (Try editing the Button stories located at{' '}
-      src/stories/index.js.)
+      src/stories/index.js
+      .)
     

     

-      Usually we create stories with smaller UI components in the app.

+      Usually we create stories with smaller UI components in the app.
+      

       Have a look at the{' '}
       
     );
   }
+
   render() {
+    const { redirect } = this.state;
     const { sections, selectedSection, selectedItem } = this.props;
     const selectedSectionId = selectedSection || sections[0].id;
     const selectedItemId = selectedItem || sections[0].items[0].id;
@@ -51,8 +53,8 @@ class Nav extends React.Component {
     const selectedSectionData = sections.find(section => section.id === selectedSectionId);
     const navs = selectedSectionData.items;
 
-    return this.state.redirect ? (
-      
+    return redirect ? (
+      
     ) : (
       

         

diff --git a/docs/src/components/Footer/index.js b/docs/src/components/Footer/index.js
index f06e2cbdbcd2..4c872fad6872 100644
--- a/docs/src/components/Footer/index.js
+++ b/docs/src/components/Footer/index.js
@@ -10,8 +10,7 @@ const Footer = () => (
       

         

           

-            Maintained by the Storybook Community
-            .
+            Maintained by the Storybook Community.
           

           

              (
   
-    {items.map((item, idx) => )}
+    {items.map((item, idx) => (
+      
+    ))}
   
 );
 Grid.propTypes = {
diff --git a/docs/src/components/Homepage/Featured/index.js b/docs/src/components/Homepage/Featured/index.js
index 0eb082bdcf2e..94f6054f7cc0 100644
--- a/docs/src/components/Homepage/Featured/index.js
+++ b/docs/src/components/Homepage/Featured/index.js
@@ -33,7 +33,11 @@ const Featured = ({ featuredStorybooks }) => (
   
diff --git a/docs/src/components/Homepage/MainLinks/index.js b/docs/src/components/Homepage/MainLinks/index.js
index d3d028575f81..8042343dc165 100644
--- a/docs/src/components/Homepage/MainLinks/index.js
+++ b/docs/src/components/Homepage/MainLinks/index.js
@@ -3,7 +3,7 @@ import Link from 'gatsby-link';
 import { window } from 'global';
 
 import '../../Docs/Nav/style.css';
-import { UsedByBg } from '../UsedBy/';
+import { UsedByBg } from '../UsedBy';
 import './style.css';
 
 class MainLinks extends React.Component {
@@ -24,9 +24,12 @@ class MainLinks extends React.Component {
             
Try Now

             
               
-                npm i -g @storybook/cli

-                cd my-react-app

-                getstorybook

+                npm i -g @storybook/cli
+                

+                cd my-react-app
+                

+                getstorybook
+                

               
             

           

diff --git a/docs/src/components/Homepage/UsedBy/index.js b/docs/src/components/Homepage/UsedBy/index.js
index 8a2e96faa940..d8ae690f116c 100644
--- a/docs/src/components/Homepage/UsedBy/index.js
+++ b/docs/src/components/Homepage/UsedBy/index.js
@@ -64,7 +64,11 @@ const UsedBy = ({ users }) => (
       
       

         
Used by these fine folks:

-        
{users.map(user => )}

+        

+          {users.map(user => (
+            
+          ))}
+        

       

     

     

diff --git a/docs/src/html.js b/docs/src/html.js
index b8ef25069839..aba6bf1964cf 100644
--- a/docs/src/html.js
+++ b/docs/src/html.js
@@ -5,7 +5,7 @@ import DocumentTitle from 'react-document-title';
 
 import favicon from './design/homepage/storybook-icon.png';
 
-const HTML = props => {
+const HTML = ({ headComponents, body, postBodyComponents }) => {
   const title = DocumentTitle.rewind();
 
   let css;
@@ -36,11 +36,11 @@ const HTML = props => {
         {title}
         
         {css}
-        {props.headComponents}
+        {headComponents}
       
       
-        

-        {props.postBodyComponents}
+        

+        {postBodyComponents}
         {searchScript}
       
     
diff --git a/docs/src/templates/_docstemplate.jsx b/docs/src/templates/_docstemplate.jsx
index 6dbd8dfeb94b..5c495013ed5f 100644
--- a/docs/src/templates/_docstemplate.jsx
+++ b/docs/src/templates/_docstemplate.jsx
@@ -75,7 +75,7 @@ DocsContainer.propTypes = {
   }).isRequired,
 };
 DocsContainer.contextTypes = {
-  router: PropTypes.object.isRequired,
+  router: PropTypes.shape({}).isRequired,
 };
 
 export default DocsContainer;
diff --git a/examples/cra-kitchen-sink/src/components/LifecycleLogger.js b/examples/cra-kitchen-sink/src/components/LifecycleLogger.js
index f3343012cace..227dab822c3c 100644
--- a/examples/cra-kitchen-sink/src/components/LifecycleLogger.js
+++ b/examples/cra-kitchen-sink/src/components/LifecycleLogger.js
@@ -14,21 +14,27 @@ class LifecycleLogger extends Component {
     log('constructor');
     this.state = {};
   }
+
   componentDidMount() {
     log('componentDidMount');
   }
-  getSnapshotBeforeUpdate() {
-    log('getSnapshotBeforeUpdate');
-  }
+
   componentDidUpdate() {
     log('componentDidUpdate');
   }
-  componentDidCatch() {
-    log('componentDidCatch');
-  }
+
   componentWillUnmount() {
     log('componentWillUnmount');
   }
+
+  getSnapshotBeforeUpdate() {
+    log('getSnapshotBeforeUpdate');
+  }
+
+  componentDidCatch() {
+    log('componentDidCatch');
+  }
+
   render() {
     log('render');
     return 
Lifecycle methods are logged to the console
;
diff --git a/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js b/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
index 92b83adfdcc3..07e1a2d19568 100644
--- a/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
@@ -8,5 +8,7 @@ const increment = () => {
 };
 
 storiesOf('Force ReRender', module).add('button', () => (
-  
+  
 ));
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
index 719c97b5810e..bb57baa5f5dd 100644
--- a/examples/cra-kitchen-sink/src/stories/index.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -1,3 +1,5 @@
+/* eslint-disable react/destructuring-assignment */
+
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
diff --git a/examples/crna-kitchen-sink/storybook/stories/Button/index.android.js b/examples/crna-kitchen-sink/storybook/stories/Button/index.android.js
index 767da77a264c..3c4c405180da 100644
--- a/examples/crna-kitchen-sink/storybook/stories/Button/index.android.js
+++ b/examples/crna-kitchen-sink/storybook/stories/Button/index.android.js
@@ -2,10 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TouchableNativeFeedback } from 'react-native';
 
-export default function Button(props) {
-  return (
-    {props.children}
-  );
+export default function Button({ onPress, children }) {
+  return {children};
 }
 
 Button.defaultProps = {
diff --git a/examples/crna-kitchen-sink/storybook/stories/Button/index.ios.js b/examples/crna-kitchen-sink/storybook/stories/Button/index.ios.js
index ad76aec50e30..37c8437e72e4 100644
--- a/examples/crna-kitchen-sink/storybook/stories/Button/index.ios.js
+++ b/examples/crna-kitchen-sink/storybook/stories/Button/index.ios.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TouchableHighlight } from 'react-native';
 
-export default function Button(props) {
-  return {props.children};
+export default function Button({ onPress, children }) {
+  return {children};
 }
 
 Button.defaultProps = {
diff --git a/examples/crna-kitchen-sink/storybook/stories/CenterView/index.js b/examples/crna-kitchen-sink/storybook/stories/CenterView/index.js
index 8fa23359ed88..29732b27ab24 100644
--- a/examples/crna-kitchen-sink/storybook/stories/CenterView/index.js
+++ b/examples/crna-kitchen-sink/storybook/stories/CenterView/index.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import style from './style';
 
-export default function CenterView(props) {
-  return {props.children};
+export default function CenterView({ children }) {
+  return {children};
 }
 
 CenterView.defaultProps = {
diff --git a/examples/crna-kitchen-sink/storybook/stories/Knobs/index.js b/examples/crna-kitchen-sink/storybook/stories/Knobs/index.js
index a06fbcfe38f5..6c65a02cc46d 100644
--- a/examples/crna-kitchen-sink/storybook/stories/Knobs/index.js
+++ b/examples/crna-kitchen-sink/storybook/stories/Knobs/index.js
@@ -55,7 +55,11 @@ export default () => {
       My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}
       My wallet contains: ${dollars.toFixed(2)}
       In my backpack, I have:
-      {items.map(item => {item})}
+      
+        {items.map(item => (
+          {item}
+        ))}
+      
       {salutation}
     
   );
diff --git a/examples/crna-kitchen-sink/storybook/stories/Welcome/index.js b/examples/crna-kitchen-sink/storybook/stories/Welcome/index.js
index 2f33bc492b49..8e0fe99bcc7f 100644
--- a/examples/crna-kitchen-sink/storybook/stories/Welcome/index.js
+++ b/examples/crna-kitchen-sink/storybook/stories/Welcome/index.js
@@ -20,10 +20,14 @@ export default class Welcome extends React.Component {
     },
   };
 
-  showApp(event) {
+  showApp = event => {
+    const { showApp } = this.props;
+
     event.preventDefault();
-    if (this.props.showApp) this.props.showApp();
-  }
+    if (showApp) {
+      showApp();
+    }
+  };
 
   render() {
     return (
diff --git a/examples/html-kitchen-sink/stories/index.stories.js b/examples/html-kitchen-sink/stories/index.stories.js
index 1dcedbdb3522..e0cae017c023 100644
--- a/examples/html-kitchen-sink/stories/index.stories.js
+++ b/examples/html-kitchen-sink/stories/index.stories.js
@@ -1,3 +1,5 @@
+/* eslint-disable react/button-has-type */
+
 import { document } from 'global';
 import { storiesOf } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
diff --git a/examples/mithril-kitchen-sink/src/Button.js b/examples/mithril-kitchen-sink/src/Button.js
index 8fcb462dd537..edec915a04b1 100644
--- a/examples/mithril-kitchen-sink/src/Button.js
+++ b/examples/mithril-kitchen-sink/src/Button.js
@@ -14,7 +14,7 @@ const style = {
 
 const Button = {
   view: vnode => (
-    
   ),
diff --git a/examples/mithril-kitchen-sink/src/Welcome.js b/examples/mithril-kitchen-sink/src/Welcome.js
index c24a34d9c152..e85d5493797f 100644
--- a/examples/mithril-kitchen-sink/src/Welcome.js
+++ b/examples/mithril-kitchen-sink/src/Welcome.js
@@ -70,6 +70,7 @@ const Link = {
 const NavButton = {
   view: vnode => (
     

       ),
diff --git a/examples/official-storybook/components/BaseButton.js b/examples/official-storybook/components/BaseButton.js
index e53dda8d7836..17b2ce719fda 100644
--- a/examples/official-storybook/components/BaseButton.js
+++ b/examples/official-storybook/components/BaseButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 /** BaseButton component description imported from comments inside the component file */
 const BaseButton = ({ disabled, label, onClick, style }) => (
-  
 );
diff --git a/examples/official-storybook/components/DelayedRender.js b/examples/official-storybook/components/DelayedRender.js
index 1a5710beeb76..85ec79e1a6af 100644
--- a/examples/official-storybook/components/DelayedRender.js
+++ b/examples/official-storybook/components/DelayedRender.js
@@ -5,6 +5,7 @@ export default class DelayedRender extends Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
   };
+
   state = {
     show: false,
   };
@@ -22,6 +23,8 @@ export default class DelayedRender extends Component {
   }
 
   render() {
-    return this.state.show ? this.props.children : 
;
+    const { show } = this.state;
+    const { children } = this.props;
+    return show ? children : 
;
   }
 }
diff --git a/examples/official-storybook/components/DocgenButton.js b/examples/official-storybook/components/DocgenButton.js
index a7e948a82a03..c6e0cb6357b5 100644
--- a/examples/official-storybook/components/DocgenButton.js
+++ b/examples/official-storybook/components/DocgenButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 /** DocgenButton component description imported from comments inside the component file */
 const DocgenButton = ({ disabled, label, onClick }) => (
-  
 );
diff --git a/examples/official-storybook/components/FlowTypeButton.js b/examples/official-storybook/components/FlowTypeButton.js
index be85c3a40d4a..05b5c0a3eaf7 100644
--- a/examples/official-storybook/components/FlowTypeButton.js
+++ b/examples/official-storybook/components/FlowTypeButton.js
@@ -39,7 +39,7 @@ type PropsType = {
 
 /** FlowTypeButton component description imported from comments inside the component file */
 const FlowTypeButton = ({ label, onClick, disabled }: PropsType) => (
-  
 );
diff --git a/examples/official-storybook/components/ImportedPropsButton.js b/examples/official-storybook/components/ImportedPropsButton.js
index e38013d735f3..a394f33a777d 100644
--- a/examples/official-storybook/components/ImportedPropsButton.js
+++ b/examples/official-storybook/components/ImportedPropsButton.js
@@ -3,7 +3,7 @@ import DocgenButton from './DocgenButton';
 
 /** Button component description */
 const ImportedPropsButton = ({ disabled, label, onClick }) => (
-  
 );
diff --git a/examples/official-storybook/components/addon-a11y/Button.js b/examples/official-storybook/components/addon-a11y/Button.js
index d9c58bd13acd..293f6ca97303 100644
--- a/examples/official-storybook/components/addon-a11y/Button.js
+++ b/examples/official-storybook/components/addon-a11y/Button.js
@@ -21,6 +21,7 @@ const styles = {
 function Button({ content, disabled, contrast }) {
   return (
     

     );
   })
diff --git a/examples/official-storybook/stories/addon-links.stories.js b/examples/official-storybook/stories/addon-links.stories.js
index 15ffd413d791..e3b07aece2bb 100644
--- a/examples/official-storybook/stories/addon-links.stories.js
+++ b/examples/official-storybook/stories/addon-links.stories.js
@@ -10,10 +10,14 @@ storiesOf('Addons|Links.Link', module)
 
 storiesOf('Addons|Links.Button', module)
   .add('First', () => (
-    
+    
   ))
   .add('Second', () => (
-    
+    
   ));
 
 storiesOf('Addons|Links.Select', module)
diff --git a/examples/react-native-vanilla/storybook/stories/Button/index.android.js b/examples/react-native-vanilla/storybook/stories/Button/index.android.js
index 767da77a264c..3c4c405180da 100644
--- a/examples/react-native-vanilla/storybook/stories/Button/index.android.js
+++ b/examples/react-native-vanilla/storybook/stories/Button/index.android.js
@@ -2,10 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TouchableNativeFeedback } from 'react-native';
 
-export default function Button(props) {
-  return (
-    {props.children}
-  );
+export default function Button({ onPress, children }) {
+  return {children};
 }
 
 Button.defaultProps = {
diff --git a/examples/react-native-vanilla/storybook/stories/Button/index.ios.js b/examples/react-native-vanilla/storybook/stories/Button/index.ios.js
index ad76aec50e30..37c8437e72e4 100644
--- a/examples/react-native-vanilla/storybook/stories/Button/index.ios.js
+++ b/examples/react-native-vanilla/storybook/stories/Button/index.ios.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TouchableHighlight } from 'react-native';
 
-export default function Button(props) {
-  return {props.children};
+export default function Button({ onPress, children }) {
+  return {children};
 }
 
 Button.defaultProps = {
diff --git a/examples/react-native-vanilla/storybook/stories/CenterView/index.js b/examples/react-native-vanilla/storybook/stories/CenterView/index.js
index 8fa23359ed88..29732b27ab24 100644
--- a/examples/react-native-vanilla/storybook/stories/CenterView/index.js
+++ b/examples/react-native-vanilla/storybook/stories/CenterView/index.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import style from './style';
 
-export default function CenterView(props) {
-  return {props.children};
+export default function CenterView({ children }) {
+  return {children};
 }
 
 CenterView.defaultProps = {
diff --git a/examples/react-native-vanilla/storybook/stories/Knobs/index.js b/examples/react-native-vanilla/storybook/stories/Knobs/index.js
index 7a90361e1d4a..d3c552f91165 100644
--- a/examples/react-native-vanilla/storybook/stories/Knobs/index.js
+++ b/examples/react-native-vanilla/storybook/stories/Knobs/index.js
@@ -56,7 +56,11 @@ export default () => {
       My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}
       My wallet contains: ${dollars.toFixed(2)}
       In my backpack, I have:
-      {items.map(item => {item})}
+      
+        {items.map(item => (
+          {item}
+        ))}
+      
       {salutation}
     
   );
diff --git a/examples/react-native-vanilla/storybook/stories/Welcome/index.js b/examples/react-native-vanilla/storybook/stories/Welcome/index.js
index 2f33bc492b49..119401fc78e6 100644
--- a/examples/react-native-vanilla/storybook/stories/Welcome/index.js
+++ b/examples/react-native-vanilla/storybook/stories/Welcome/index.js
@@ -20,10 +20,14 @@ export default class Welcome extends React.Component {
     },
   };
 
-  showApp(event) {
+  showApp = event => {
+    const { showApp } = this.props;
     event.preventDefault();
-    if (this.props.showApp) this.props.showApp();
-  }
+
+    if (showApp) {
+      showApp();
+    }
+  };
 
   render() {
     return (
diff --git a/lib/addons/src/make-decorator.js b/lib/addons/src/make-decorator.js
index e7df28f726f1..7e7153c908a1 100644
--- a/lib/addons/src/make-decorator.js
+++ b/lib/addons/src/make-decorator.js
@@ -1,3 +1,5 @@
+/* eslint-disable react/destructuring-assignment */
+
 import deprecate from 'util-deprecate';
 
 // Create a decorator that can be used both in the (deprecated) old "hoc" style:
diff --git a/lib/addons/src/make-decorator.test.js b/lib/addons/src/make-decorator.test.js
index 9beb3a706511..53f3dd8cfeb5 100644
--- a/lib/addons/src/make-decorator.test.js
+++ b/lib/addons/src/make-decorator.test.js
@@ -1,6 +1,6 @@
 import deprecate from 'util-deprecate';
 import { makeDecorator } from './make-decorator';
-import { defaultDecorateStory } from '../../../lib/core/src/client/preview/client_api';
+import { defaultDecorateStory } from '../../core/src/client/preview/client_api';
 
 jest.mock('util-deprecate');
 let deprecatedFns = [];
diff --git a/lib/channels/src/index.test.js b/lib/channels/src/index.test.js
index 7497f7e9cba7..b53bf0457429 100644
--- a/lib/channels/src/index.test.js
+++ b/lib/channels/src/index.test.js
@@ -1,6 +1,6 @@
 /* eslint no-underscore-dangle: 0 */
 
-import Channel from './';
+import Channel from '.';
 
 describe('Channel', () => {
   let transport = null;
diff --git a/lib/cli/generators/HTML/template/stories/index.stories.js b/lib/cli/generators/HTML/template/stories/index.stories.js
index 3a61ccde0144..a61a5a55117b 100644
--- a/lib/cli/generators/HTML/template/stories/index.stories.js
+++ b/lib/cli/generators/HTML/template/stories/index.stories.js
@@ -1,12 +1,14 @@
-/* global document */
+/* eslint-disable no-console, react/button-has-type */
+
+import { document } from 'global';
 import { storiesOf } from '@storybook/html';
 
 storiesOf('Demo', module)
   .add('heading', () => '
Hello World
')
   .add('button', () => {
     const button = document.createElement('button');
+    button.type = 'button';
     button.innerText = 'Hello Button';
-    // eslint-disable-next-line no-console
     button.addEventListener('click', e => console.log(e));
     return button;
   });
diff --git a/lib/cli/generators/MITHRIL/template/stories/Button.js b/lib/cli/generators/MITHRIL/template/stories/Button.js
index 8fcb462dd537..edec915a04b1 100644
--- a/lib/cli/generators/MITHRIL/template/stories/Button.js
+++ b/lib/cli/generators/MITHRIL/template/stories/Button.js
@@ -14,7 +14,7 @@ const style = {
 
 const Button = {
   view: vnode => (
-    
   ),
diff --git a/lib/cli/generators/MITHRIL/template/stories/Welcome.js b/lib/cli/generators/MITHRIL/template/stories/Welcome.js
index b5ac4cb8ce91..cef0d3127fd3 100644
--- a/lib/cli/generators/MITHRIL/template/stories/Welcome.js
+++ b/lib/cli/generators/MITHRIL/template/stories/Welcome.js
@@ -71,6 +71,7 @@ const Link = {
 const NavButton = {
   view: vnode => (