From 38cd75b439b3a6fbd8c7a1eda4e0391ff3faa821 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Wed, 29 Apr 2020 13:10:24 +0100 Subject: [PATCH] feat(storybook): add storybook-addon-performance addon --- ui/.storybook/config.js | 3 + ui/.storybook/main.js | 4 + ui/.storybook/presets.js | 1 - ui/package-lock.json | 286 +++++++++++++++++++++++++++++++++++++++ ui/package.json | 3 +- 5 files changed, 295 insertions(+), 2 deletions(-) create mode 100644 ui/.storybook/main.js delete mode 100644 ui/.storybook/presets.js diff --git a/ui/.storybook/config.js b/ui/.storybook/config.js index 41c402b9d..ef1f87eb9 100644 --- a/ui/.storybook/config.js +++ b/ui/.storybook/config.js @@ -8,6 +8,8 @@ import { import createPercyAddon from "@percy-io/percy-storybook"; +import { withPerformance } from "storybook-addon-performance"; + import "mobx-react-lite/batchingForReactDom"; import { advanceTo } from "jest-date-mock"; @@ -69,6 +71,7 @@ addDecorator((story) => { ); }); +addDecorator(withPerformance); const req = require.context("../src/Components", true, /\.stories\.(js|tsx)$/); diff --git a/ui/.storybook/main.js b/ui/.storybook/main.js new file mode 100644 index 000000000..629d25662 --- /dev/null +++ b/ui/.storybook/main.js @@ -0,0 +1,4 @@ +module.exports = { + addons: ["storybook-addon-performance/register"], + presets: ["@storybook/preset-create-react-app"], +}; diff --git a/ui/.storybook/presets.js b/ui/.storybook/presets.js deleted file mode 100644 index 2c07847b5..000000000 --- a/ui/.storybook/presets.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = ["@storybook/preset-create-react-app"]; diff --git a/ui/package-lock.json b/ui/package-lock.json index 138a87b2e..e00b4b728 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -5645,6 +5645,119 @@ "loader-utils": "^1.2.3" } }, + "@testing-library/dom": { + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.2.2.tgz", + "integrity": "sha512-g+gT//COYh2FgRrlgcgdkifkjqSk7wQIS7F8jbrf6yoEsh85PJUJ/QtO0bJ9QU7pQPYQgKcgqNJsOs0dlyFYag==", + "dev": true, + "requires": { + "@babel/runtime": "^7.9.2", + "@types/testing-library__dom": "^7.0.0", + "aria-query": "^4.0.2", + "dom-accessibility-api": "^0.4.2", + "pretty-format": "^25.1.0" + }, + "dependencies": { + "aria-query": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.0.2.tgz", + "integrity": "sha512-S1G1V790fTaigUSM/Gd0NngzEfiMy9uTUfMyHhKhVyy4cH5O/eTuR01ydhGL0z4Za1PXFTRGH3qL8VhUQuEO5w==", + "dev": true, + "requires": { + "@babel/runtime": "^7.7.4", + "@babel/runtime-corejs3": "^7.7.4" + } + } + } + }, + "@testing-library/jest-dom": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.5.0.tgz", + "integrity": "sha512-7sWHrpxG4Yd8TmryI7Rtbx8Ff4mbs3ASye3oshQIuHvsCR+QHgr7rTR/PfeXvOmwUwR36wSTTAvrLKsPmr6VEQ==", + "dev": true, + "requires": { + "@babel/runtime": "^7.9.2", + "@types/testing-library__jest-dom": "^5.0.2", + "chalk": "^3.0.0", + "css": "^2.2.4", + "css.escape": "^1.5.1", + "jest-diff": "^25.1.0", + "jest-matcher-utils": "^25.1.0", + "lodash": "^4.17.15", + "redent": "^3.0.0" + }, + "dependencies": { + "@jest/types": { + "version": "25.5.0", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz", + "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==", + "dev": true, + "requires": { + "@types/istanbul-lib-coverage": "^2.0.0", + "@types/istanbul-reports": "^1.1.1", + "@types/yargs": "^15.0.0", + "chalk": "^3.0.0" + } + }, + "jest-matcher-utils": { + "version": "25.5.0", + "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-25.5.0.tgz", + "integrity": "sha512-VWI269+9JS5cpndnpCwm7dy7JtGQT30UHfrnM3mXl22gHGt/b7NkjBqXfbhZ8V4B7ANUsjK18PlSBmG0YH7gjw==", + "dev": true, + "requires": { + "chalk": "^3.0.0", + "jest-diff": "^25.5.0", + "jest-get-type": "^25.2.6", + "pretty-format": "^25.5.0" + }, + "dependencies": { + "jest-diff": { + "version": "25.5.0", + "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-25.5.0.tgz", + "integrity": "sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==", + "dev": true, + "requires": { + "chalk": "^3.0.0", + "diff-sequences": "^25.2.6", + "jest-get-type": "^25.2.6", + "pretty-format": "^25.5.0" + } + } + } + }, + "pretty-format": { + "version": "25.5.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz", + "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==", + "dev": true, + "requires": { + "@jest/types": "^25.5.0", + "ansi-regex": "^5.0.0", + "ansi-styles": "^4.0.0", + "react-is": "^16.12.0" + } + }, + "redent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", + "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", + "dev": true, + "requires": { + "indent-string": "^4.0.0", + "strip-indent": "^3.0.0" + } + }, + "strip-indent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", + "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", + "dev": true, + "requires": { + "min-indent": "^1.0.0" + } + } + } + }, "@types/anymatch": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", @@ -5854,6 +5967,24 @@ "integrity": "sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==", "dev": true }, + "@types/testing-library__dom": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-7.0.2.tgz", + "integrity": "sha512-8yu1gSwUEAwzg2OlPNbGq+ixhmSviGurBu1+ivxRKq1eRcwdjkmlwtPvr9VhuxTq2fNHBWN2po6Iem3Xt5A6rg==", + "dev": true, + "requires": { + "pretty-format": "^25.1.0" + } + }, + "@types/testing-library__jest-dom": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.0.3.tgz", + "integrity": "sha512-NdbKc6yseg6uq4UJFwimPws0iwsGugVbPoOTP2EH+PJMJKiZsoSg5F2H3XYweOyytftCOuIMuXifBUrF9CSvaQ==", + "dev": true, + "requires": { + "@types/jest": "*" + } + }, "@types/uglify-js": { "version": "3.9.0", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.9.0.tgz", @@ -6151,6 +6282,15 @@ "@xtuc/long": "4.2.2" } }, + "@xstate/react": { + "version": "1.0.0-rc.3", + "resolved": "https://registry.npmjs.org/@xstate/react/-/react-1.0.0-rc.3.tgz", + "integrity": "sha512-TAZdWo1vg46I6XwMzqowOHlXMByGLNppN+AuJOoruTnCYXLw9YIiXRFw0d/PEepMEE8mkIcPlbOjLXodP7FtEw==", + "dev": true, + "requires": { + "use-subscription": "^1.3.0" + } + }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -7285,6 +7425,18 @@ "recast": "^0.14.7" } }, + "babel-plugin-styled-components": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz", + "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==", + "dev": true, + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -8099,6 +8251,12 @@ } } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=", + "dev": true + }, "can-use-dom": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz", @@ -8935,6 +9093,12 @@ "parse-json": "^4.0.0" } }, + "crc32": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/crc32/-/crc32-0.2.2.tgz", + "integrity": "sha1-etIg1v/c0Rn5/BJ6d3LKzqOQpLo=", + "dev": true + }, "create-ecdh": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz", @@ -9069,6 +9233,12 @@ "postcss": "^7.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=", + "dev": true + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -9159,6 +9329,17 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "dev": true, + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -9180,6 +9361,12 @@ "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz", "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==" }, + "css.escape": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", + "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=", + "dev": true + }, "cssdb": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz", @@ -9516,6 +9703,12 @@ } } }, + "deflate-js": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/deflate-js/-/deflate-js-0.2.3.tgz", + "integrity": "sha1-+Fq7WOvFFRowYUdHPVfD5PfkQms=", + "dev": true + }, "del": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz", @@ -9686,6 +9879,12 @@ "esutils": "^2.0.2" } }, + "dom-accessibility-api": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.4.3.tgz", + "integrity": "sha512-JZ8iPuEHDQzq6q0k7PKMGbrIdsgBB7TRrtVOUm4nSMCExlg5qQG4KXWTH2k90yggjM4tTumRGwTKJSldMzKyLA==", + "dev": true + }, "dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -11986,6 +12185,16 @@ "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" }, + "gzip-js": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/gzip-js/-/gzip-js-0.3.2.tgz", + "integrity": "sha1-IxF+/usozzhSSN7/Df+tiUg22Ws=", + "dev": true, + "requires": { + "crc32": ">= 0.2.2", + "deflate-js": ">= 0.2.2" + } + }, "gzip-size": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz", @@ -21950,6 +22159,27 @@ "integrity": "sha512-llZqXAXjG2E4FvWsZxFmBDfh6kqQuGFZm64TX23qW02Hf4dyElhDEbYx1IIVTEMKWrrDnDA9oqOjY8WHo2NgcA==", "dev": true }, + "storybook-addon-performance": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/storybook-addon-performance/-/storybook-addon-performance-0.10.0.tgz", + "integrity": "sha512-XQh6RdJAOVGk31jtq+ZVWRF1Y8sIVZlHBZKA6L5VWhP8nh0Zu/pCwPK4DFHS5h5MAU02Iw3H2xzIywnOyzNvrA==", + "dev": true, + "requires": { + "@storybook/addons": "^5.3.18", + "@storybook/api": "^5.3.18", + "@storybook/channels": "^5.3.18", + "@storybook/components": "^5.3.18", + "@storybook/core-events": "^5.3.18", + "@storybook/theming": "^5.3.18", + "@testing-library/dom": "^7.2.1", + "@testing-library/jest-dom": "^5.3.0", + "@xstate/react": "1.0.0-rc.3", + "gzip-js": "^0.3.2", + "styled-components": "^5.1.0", + "tiny-invariant": "^1.1.0", + "xstate": "^4.8.0" + } + }, "stream-browserify": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", @@ -22267,6 +22497,41 @@ } } }, + "styled-components": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.0.tgz", + "integrity": "sha512-0Qs2wEkFBXHFlysz6CV831VG6HedcrFUwChjnWylNivsx14MtmqQsohi21rMHZxzuTba063dEyoe/SR6VGJI7Q==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.8", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "dependencies": { + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -22695,6 +22960,12 @@ "dev": true, "optional": true }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==", + "dev": true + }, "tlds": { "version": "1.207.0", "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz", @@ -23095,6 +23366,15 @@ "tslib": "^1.9.3" } }, + "use-subscription": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.4.1.tgz", + "integrity": "sha512-7+IIwDG/4JICrWHL/Q/ZPK5yozEnvRm6vHImu0LKwQlmWGKeiF7mbAenLlK/cTNXrTtXHU/SFASQHzB6+oSJMQ==", + "dev": true, + "requires": { + "object-assign": "^4.1.1" + } + }, "util": { "version": "0.10.3", "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz", @@ -25268,6 +25548,12 @@ "@babel/runtime-corejs3": "^7.8.3" } }, + "xstate": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.9.1.tgz", + "integrity": "sha512-cfNnRaBebnr1tvs0nHBUTyomfJx36+8MWwXceyNTZfjyELMM8nIoiBDcUzfKmpNlnAvs2ZPREos19cw6Zl4nng==", + "dev": true + }, "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", diff --git a/ui/package.json b/ui/package.json index 46d30b9a1..6bb01554b 100644 --- a/ui/package.json +++ b/ui/package.json @@ -91,7 +91,8 @@ "markdownlint-cli": "0.22.0", "node-sass": "4.14.0", "prettier": "2.0.5", - "source-map-explorer": "2.4.2" + "source-map-explorer": "2.4.2", + "storybook-addon-performance": "0.10.0" }, "browserslist": [ ">= 1%",