From 8ede100b647a0c7949f2fca08cfe014c8a755b72 Mon Sep 17 00:00:00 2001 From: Vio Date: Sun, 3 Jan 2021 15:03:23 +0100 Subject: [PATCH 01/10] refactor(ui): Use reakit Tooltip --- packages/ui/build/webpack/config.js | 4 + packages/ui/package-lock.json | 253 +-- packages/ui/package.json | 1 + .../bundle-assets/bundle-assets.jsx | 1 - .../horizontal-bar-chart.stories.storyshot | 1880 +++++++++++++++-- .../__snapshots__/tooltip.stories.storyshot | 191 +- packages/ui/src/ui/tooltip/tooltip.jsx | 37 +- packages/ui/src/ui/tooltip/tooltip.module.css | 62 +- 8 files changed, 2003 insertions(+), 426 deletions(-) diff --git a/packages/ui/build/webpack/config.js b/packages/ui/build/webpack/config.js index 7455ea9061..1eaca328fd 100644 --- a/packages/ui/build/webpack/config.js +++ b/packages/ui/build/webpack/config.js @@ -1,5 +1,6 @@ const path = require('path'); const StatsPlugin = require('stats-webpack-plugin'); +const webpack = require('webpack'); const ROOT = path.join(__dirname, '../../'); const CONTEXT = path.join(ROOT, 'src'); @@ -70,6 +71,9 @@ module.exports = { }, devtool: 'source-map', plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) + }), new StatsPlugin('../artifacts/webpack-stats.json', { all: false, assets: true, diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json index 024263ff5b..1c6761ddd1 100644 --- a/packages/ui/package-lock.json +++ b/packages/ui/package-lock.json @@ -1391,17 +1391,6 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, - "@bundle-stats/utils": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@bundle-stats/utils/-/utils-2.3.0.tgz", - "integrity": "sha512-v+tYFCHE4dmdsodwRuhbVcKgfrDz3mBOc3RLJpyKUPy/CHnhKBjMtOw68OTM8hUQG/FtcvEqyvyEM1SLAfGGiw==", - "dev": true, - "requires": { - "convert-units": "^2.3.4", - "core-js": "^3.1.4", - "superstruct": "^0.8.3" - } - }, "@cnakazawa/watch": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", @@ -4983,6 +4972,12 @@ } } }, + "body-scroll-lock": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz", + "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==", + "dev": true + }, "boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -6004,16 +5999,6 @@ "safe-buffer": "~5.1.1" } }, - "convert-units": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/convert-units/-/convert-units-2.3.4.tgz", - "integrity": "sha512-ERHfdA0UhHJp1IpwE6PnFJx8LqG7B1ZjJ20UvVCmopEnVCfER68Tbe3kvN63dLbYXDA2xFWRE6zd4Wsf0w7POg==", - "dev": true, - "requires": { - "lodash.foreach": "2.3.x", - "lodash.keys": "2.3.x" - } - }, "cookie": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz", @@ -11538,111 +11523,6 @@ "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==", "dev": true }, - "lodash._basebind": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash._basebind/-/lodash._basebind-2.3.0.tgz", - "integrity": "sha1-K1vEUqDhBhQ7IYafIzvbWHQX0kg=", - "dev": true, - "requires": { - "lodash._basecreate": "~2.3.0", - "lodash._setbinddata": "~2.3.0", - "lodash.isobject": "~2.3.0" - } - }, - "lodash._basecreate": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash._basecreate/-/lodash._basecreate-2.3.0.tgz", - "integrity": "sha1-m4ioak3P97fzxh2Dovz8BnHsneA=", - "dev": true, - "requires": { - "lodash._renative": "~2.3.0", - "lodash.isobject": "~2.3.0", - "lodash.noop": "~2.3.0" - } - }, - "lodash._basecreatecallback": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash._basecreatecallback/-/lodash._basecreatecallback-2.3.0.tgz", - "integrity": "sha1-N7KrF1kaM56YjbMln81GAZ16w2I=", - "dev": true, - "requires": { - "lodash._setbinddata": "~2.3.0", - "lodash.bind": "~2.3.0", - "lodash.identity": "~2.3.0", - "lodash.support": "~2.3.0" - } - }, - "lodash._basecreatewrapper": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash._basecreatewrapper/-/lodash._basecreatewrapper-2.3.0.tgz", - "integrity": "sha1-qgxhrZYETDkzN2ExSDqXWcNlEkc=", - "dev": true, - "requires": { - "lodash._basecreate": "~2.3.0", - "lodash._setbinddata": "~2.3.0", - "lodash._slice": "~2.3.0", - "lodash.isobject": "~2.3.0" - } - }, - "lodash._createwrapper": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash._createwrapper/-/lodash._createwrapper-2.3.0.tgz", - "integrity": "sha1-0arhEC2t9EDo4G/BM6bt1/4UYHU=", - "dev": true, - "requires": { - "lodash._basebind": "~2.3.0", - "lodash._basecreatewrapper": "~2.3.0", - "lodash.isfunction": "~2.3.0" - } - }, - "lodash._objecttypes": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.3.0.tgz", - "integrity": "sha1-aj6jmH3W7rgCGy1cnDA1Scwrrh4=", - "dev": true - }, - "lodash._renative": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash._renative/-/lodash._renative-2.3.0.tgz", - "integrity": "sha1-d9jt1M7SbdWXH54Vpfdy5OMX+9M=", - "dev": true - }, - "lodash._setbinddata": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash._setbinddata/-/lodash._setbinddata-2.3.0.tgz", - "integrity": "sha1-5WEEkKzRMnfVmFjZW18nJ/FQjwQ=", - "dev": true, - "requires": { - "lodash._renative": "~2.3.0", - "lodash.noop": "~2.3.0" - } - }, - "lodash._shimkeys": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash._shimkeys/-/lodash._shimkeys-2.3.0.tgz", - "integrity": "sha1-YR+TFJ4+bHIQlrSHae8pU3rai6k=", - "dev": true, - "requires": { - "lodash._objecttypes": "~2.3.0" - } - }, - "lodash._slice": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash._slice/-/lodash._slice-2.3.0.tgz", - "integrity": "sha1-FHGYEyhZly5GgMoppZkshVZpqlw=", - "dev": true - }, - "lodash.bind": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash.bind/-/lodash.bind-2.3.0.tgz", - "integrity": "sha1-wqjhi2jl7MFS4rFoJmEW/qWwFsw=", - "dev": true, - "requires": { - "lodash._createwrapper": "~2.3.0", - "lodash._renative": "~2.3.0", - "lodash._slice": "~2.3.0" - } - }, "lodash.escape": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz", @@ -11655,92 +11535,24 @@ "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=", "dev": true }, - "lodash.foreach": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-2.3.0.tgz", - "integrity": "sha1-CDQEyR6EbudyRf3512UZxosq8Wg=", - "dev": true, - "requires": { - "lodash._basecreatecallback": "~2.3.0", - "lodash.forown": "~2.3.0" - } - }, - "lodash.forown": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash.forown/-/lodash.forown-2.3.0.tgz", - "integrity": "sha1-JPtKr4ANRfwtxgv+w84EyDajrX8=", - "dev": true, - "requires": { - "lodash._basecreatecallback": "~2.3.0", - "lodash._objecttypes": "~2.3.0", - "lodash.keys": "~2.3.0" - } - }, - "lodash.identity": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash.identity/-/lodash.identity-2.3.0.tgz", - "integrity": "sha1-awGiEMlIU1XCqRO0i2cRIZoXPe0=", - "dev": true - }, "lodash.isequal": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=", "dev": true }, - "lodash.isfunction": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-2.3.0.tgz", - "integrity": "sha1-aylz5HpkfPEucNZ2rqE2Q3BuUmc=", - "dev": true - }, - "lodash.isobject": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-2.3.0.tgz", - "integrity": "sha1-LhbT/Fg9qYMZaJU/LY5tc0NPZ5k=", - "dev": true, - "requires": { - "lodash._objecttypes": "~2.3.0" - } - }, "lodash.isplainobject": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=", "dev": true }, - "lodash.keys": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-2.3.0.tgz", - "integrity": "sha1-s1D0+Syqn0WkouzwGEVM8vKK4lM=", - "dev": true, - "requires": { - "lodash._renative": "~2.3.0", - "lodash._shimkeys": "~2.3.0", - "lodash.isobject": "~2.3.0" - } - }, - "lodash.noop": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash.noop/-/lodash.noop-2.3.0.tgz", - "integrity": "sha1-MFnWKNUbv5N80qC2/Dp/ISpmnCw=", - "dev": true - }, "lodash.sortby": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=", "dev": true }, - "lodash.support": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/lodash.support/-/lodash.support-2.3.0.tgz", - "integrity": "sha1-fq8DivTw1qq3drRKptz8gDNMm/0=", - "dev": true, - "requires": { - "lodash._renative": "~2.3.0" - } - }, "loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -14459,6 +14271,43 @@ "readable-stream": "^2.0.2" } }, + "reakit": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/reakit/-/reakit-1.3.3.tgz", + "integrity": "sha512-qw+WdM2mU6hLLbwd0qrZMhuJ3LLJKNjnw/wJuLaocsc1PXC1RaO5kZiiXOJl0Ee5B9fAZ6E+C7Q5SN7SE63OTw==", + "dev": true, + "requires": { + "@popperjs/core": "^2.5.4", + "body-scroll-lock": "^3.1.5", + "reakit-system": "^0.15.1", + "reakit-utils": "^0.15.1", + "reakit-warning": "^0.6.1" + } + }, + "reakit-system": { + "version": "0.15.1", + "resolved": "https://registry.npmjs.org/reakit-system/-/reakit-system-0.15.1.tgz", + "integrity": "sha512-PkqfAyEohtcEu/gUvKriCv42NywDtUgvocEN3147BI45dOFAB89nrT7wRIbIcKJiUT598F+JlPXAZZVLWhc1Kg==", + "dev": true, + "requires": { + "reakit-utils": "^0.15.1" + } + }, + "reakit-utils": { + "version": "0.15.1", + "resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.15.1.tgz", + "integrity": "sha512-6cZgKGvOkAMQgkwU9jdYbHfkuIN1Pr+vwcB19plLvcTfVN0Or10JhIuj9X+JaPZyI7ydqTDFaKNdUcDP69o/+Q==", + "dev": true + }, + "reakit-warning": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.6.1.tgz", + "integrity": "sha512-poFUV0EyxB+CcV9uTNBAFmcgsnR2DzAbOTkld4Ul+QOKSeEHZB3b3+MoZQgcYHmbvG19Na1uWaM7ES+/Eyr8tQ==", + "dev": true, + "requires": { + "reakit-utils": "^0.15.1" + } + }, "rechoir": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", @@ -15796,16 +15645,6 @@ } } }, - "superstruct": { - "version": "0.8.4", - "resolved": "https://registry.npmjs.org/superstruct/-/superstruct-0.8.4.tgz", - "integrity": "sha512-48Ors8IVWZm/tMr8r0Si6+mJiB7mkD7jqvIzktjJ4+EnP5tBp0qOpiM1J8sCUorKx+TXWrfb3i1UcjdD1YK/wA==", - "dev": true, - "requires": { - "kind-of": "^6.0.2", - "tiny-invariant": "^1.0.6" - } - }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -16114,12 +15953,6 @@ "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 - }, "tinycolor2": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", diff --git a/packages/ui/package.json b/packages/ui/package.json index 4a6588f1eb..f93ffd3286 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -67,6 +67,7 @@ "react": "16.14.0", "react-dom": "16.14.0", "react-test-renderer": "16.14.0", + "reakit": "^1.3.3", "recompose": "0.30.0", "stats-webpack-plugin": "0.7.0", "style-loader": "2.0.0", diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.jsx b/packages/ui/src/components/bundle-assets/bundle-assets.jsx index 74863558c3..6bda081865 100644 --- a/packages/ui/src/components/bundle-assets/bundle-assets.jsx +++ b/packages/ui/src/components/bundle-assets/bundle-assets.jsx @@ -101,7 +101,6 @@ const getRenderRowHeader = (labels) => (item) => ( } - align="topLeft" > warning diff --git a/packages/ui/src/ui/horizontal-bar-chart/__snapshots__/horizontal-bar-chart.stories.storyshot b/packages/ui/src/ui/horizontal-bar-chart/__snapshots__/horizontal-bar-chart.stories.storyshot index 3cfdb1d085..3f62e444cf 100644 --- a/packages/ui/src/ui/horizontal-bar-chart/__snapshots__/horizontal-bar-chart.stories.storyshot +++ b/packages/ui/src/ui/horizontal-bar-chart/__snapshots__/horizontal-bar-chart.stories.storyshot @@ -54,21 +54,85 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = ` } > - + + JS + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - JS + + JS + - + @@ -90,21 +154,85 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = ` } > - + + CSS + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - CSS + + CSS + - + @@ -126,21 +254,85 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = ` } > - + + IMG + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - IMG + + IMG + - + @@ -162,21 +354,85 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = ` } > - + + Others + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - Others + + Others + - + @@ -198,21 +454,85 @@ exports[`Storyshots UI/HorizontalBarChart default 1`] = ` } > - + + HTML + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - HTML + + HTML + - + @@ -275,21 +595,85 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = ` } > - + + JS + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - JS + + JS + - + @@ -311,21 +695,85 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = ` } > - + + CSS + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - CSS + + CSS + - + @@ -347,21 +795,85 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = ` } > - + + IMG + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - IMG + + IMG + - + @@ -383,21 +895,85 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = ` } > - + + Others + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - Others + + Others + - + @@ -419,21 +995,85 @@ exports[`Storyshots UI/HorizontalBarChart empty values 1`] = ` } > - + + HTML + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - HTML + + HTML + - + @@ -511,21 +1151,85 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = ` } > - + + JS + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - JS + + JS + - + @@ -547,21 +1251,85 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = ` } > - + + CSS + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - CSS + + CSS + - + @@ -583,21 +1351,85 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = ` } > - + + IMG + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - IMG + + IMG + - + @@ -619,21 +1451,85 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = ` } > - + + Others + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - Others + + Others + - + @@ -655,21 +1551,85 @@ exports[`Storyshots UI/HorizontalBarChart with custom colors 1`] = ` } > - + + HTML + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - HTML + + HTML + - + @@ -766,23 +1726,89 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = ` } > - + +

+ JS +

+ + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > -

- JS -

+ +

+ JS +

+ - + @@ -808,23 +1834,89 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = ` } > - + +

+ JS +

+ + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > -

- JS -

+ +

+ JS +

+ - + @@ -850,23 +1942,89 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = ` } > - + +

+ JS +

+ + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > -

- JS -

+ +

+ JS +

+ - + @@ -892,23 +2050,89 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = ` } > - + +

+ JS +

+ + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > -

- JS -

+ +

+ JS +

+ - + @@ -934,23 +2158,89 @@ exports[`Storyshots UI/HorizontalBarChart with custom label 1`] = ` } > - + +

+ JS +

+ + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > -

- JS -

+ +

+ JS +

+ - + @@ -1013,21 +2303,85 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = ` } > - + + JS + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - JS + + JS + - + @@ -1049,21 +2403,85 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = ` } > - + + CSS + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - CSS + + CSS + - + @@ -1085,21 +2503,85 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = ` } > - + + IMG + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - IMG + + IMG + - + @@ -1121,21 +2603,85 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = ` } > - + + Others + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - Others + + Others + - + @@ -1157,21 +2703,85 @@ exports[`Storyshots UI/HorizontalBarChart with maxValue 1`] = ` } > - + + HTML + + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} > - HTML + + HTML + - + diff --git a/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot b/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot index 6b3ace7ec4..227890f261 100644 --- a/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot +++ b/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot @@ -11,25 +11,194 @@ exports[`Storyshots UI/Tooltip default 1`] = ` } > - + Job #100 + + + `; diff --git a/packages/ui/src/ui/tooltip/tooltip.jsx b/packages/ui/src/ui/tooltip/tooltip.jsx index 730198be62..bc25482bce 100644 --- a/packages/ui/src/ui/tooltip/tooltip.jsx +++ b/packages/ui/src/ui/tooltip/tooltip.jsx @@ -1,6 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; +import { + Tooltip as UITooltip, + TooltipArrow as UITooltipArrow, + TooltipReference as UITooltipReference, + useTooltipState, +} from 'reakit/Tooltip'; import css from './tooltip.module.css'; @@ -10,23 +16,34 @@ export const Tooltip = (props) => { title, children, as: Component, - align, containerRef: ref, ...restProps } = props; - const rootClassName = cx(css.root, className, align && css[align]); + const rootClassName = cx(css.root, className); + const tooltipProps = useTooltipState({ + baseId: process.env.NODE_ENV === 'test' && 'id-test', + placement: 'top', + }); return ( - - {children} + <> + + {children} + {title && ( -
- {title} - -
+ + +
{title}
+ )} - + ); }; @@ -34,7 +51,6 @@ Tooltip.defaultProps = { className: '', title: '', as: 'span', - align: '', containerRef: null, }; @@ -43,7 +59,6 @@ Tooltip.propTypes = { title: PropTypes.node, children: PropTypes.node.isRequired, as: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]), - align: PropTypes.oneOf(['', 'topLeft']), containerRef: PropTypes.shape({ current: PropTypes.object, // eslint-disable-line react/forbid-prop-types }), diff --git a/packages/ui/src/ui/tooltip/tooltip.module.css b/packages/ui/src/ui/tooltip/tooltip.module.css index 4d888deed7..a6b7e0b7ee 100644 --- a/packages/ui/src/ui/tooltip/tooltip.module.css +++ b/packages/ui/src/ui/tooltip/tooltip.module.css @@ -3,68 +3,14 @@ } .tooltip { - position: absolute; - left: 50%; - bottom: 100%; - transform: translateX(-50%) translateY(calc(0px - var(--space-xsmall))); - - margin-top: 0; - padding: var(--space-small); - min-width: 120px; + padding: var(--space-xxsmall); box-shadow: 0 0 var(--space-xxsmall) var(--color-shadow); background: var(--color-background); - color: var(--color-text); font-size: var(--size-small); - text-align: center; -} - -.tooltipArrow { - position: absolute; - left: 0; - right: 0; - top: 100%; - width: 100%; - height: var(--space-small); - overflow: hidden; -} - -.tooltipArrow::before { - content: ''; - position: absolute; - left: 50%; - top: 0; - width: var(--space-xsmall); - height: var(--space-xsmall); - transform: translateX(-50%) translateY(-50%) rotate(45deg); - - background: var(--color-background); - box-shadow: 0 0 var(--space-xxsmall) var(--color-shadow); -} - -/* Hover */ -.tooltip { - visibility: hidden; - opacity: 0; - width: 0; - overflow: hidden; - transition: visibility 0s 0.15s, opacity 0.15s ease-out; -} - -.root:hover .tooltip { - visibility: visible; - opacity: 1; - width: auto; - overflow: visible; - transition: visibility 0s 0.4s, opacity 0.2s 0.2s ease-in; -} - -/* Align modifier */ -.topLeft .tooltip { - left: 0; - transform: translateX(calc(0px - var(--space-xsmall))) translateY(calc(0px - var(--space-xsmall))); } -.topLeft .tooltipArrow::before { - left: var(--space-medium); +.arrow svg { + display: block; + fill: var(--color-background); } From 65b90b3b8b0f42640ac2d8d212736a14d7f5fa50 Mon Sep 17 00:00:00 2001 From: Vio Date: Sun, 3 Jan 2021 16:45:14 +0100 Subject: [PATCH 02/10] fix(ui): Svg support - workaround jsx transform issue --- packages/ui/.babelrc.js | 2 +- packages/ui/package-lock.json | 352 +++++++++++++++++++++++++++------- packages/ui/package.json | 2 +- 3 files changed, 283 insertions(+), 73 deletions(-) diff --git a/packages/ui/.babelrc.js b/packages/ui/.babelrc.js index 432c38dfd6..dbf541ee7e 100644 --- a/packages/ui/.babelrc.js +++ b/packages/ui/.babelrc.js @@ -14,7 +14,7 @@ module.exports = { '@babel/plugin-proposal-private-methods', '@babel/plugin-proposal-class-properties', 'babel-plugin-lodash', - ['babel-plugin-inline-react-svg', { svgo: false }], + ['@simplyianm/babel-plugin-inline-react-svg', { noReactAutoImport: true, svgo: false }], ], env: { test: { diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json index 1c6761ddd1..8c73bf8274 100644 --- a/packages/ui/package-lock.json +++ b/packages/ui/package-lock.json @@ -1391,6 +1391,17 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "@bundle-stats/utils": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@bundle-stats/utils/-/utils-2.4.0.tgz", + "integrity": "sha512-JPM2q496ECnfbbVslXPm3aR0QaFth/XyqZSY7m/6/7EVkI0rO0Znx5jEZ/0RXtRuiU83eVsWrwoUabeLt5PO2g==", + "dev": true, + "requires": { + "convert-units": "^2.3.4", + "core-js": "^3.1.4", + "superstruct": "^0.8.3" + } + }, "@cnakazawa/watch": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", @@ -2251,6 +2262,19 @@ "react-lifecycles-compat": "^3.0.4" } }, + "@simplyianm/babel-plugin-inline-react-svg": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@simplyianm/babel-plugin-inline-react-svg/-/babel-plugin-inline-react-svg-1.2.0.tgz", + "integrity": "sha512-siXcCMkaHKl4dL6rR2rmmCMFyxwz1JxHUnEnpLBeEaurfNUZFqy0bzZYA5AEYoMXqCLsjtJAdI0tdt7926ueiQ==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.0.0", + "@babel/parser": "^7.0.0", + "lodash.isplainobject": "^4.0.6", + "resolve": "^1.10.0", + "svgo": "^0.7.2" + } + }, "@sinonjs/commons": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.1.tgz", @@ -4444,77 +4468,6 @@ "source-map": "^0.5.7" } }, - "babel-plugin-inline-react-svg": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/babel-plugin-inline-react-svg/-/babel-plugin-inline-react-svg-1.1.2.tgz", - "integrity": "sha512-oDR/eraFbMtvg4bDxv4W8bQWTDxLVkKpIYKx0cey/J2QqFyogyQOvEz9SjSYmNK3jI+yZdVMAshTwkKnj6J/Aw==", - "dev": true, - "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/parser": "^7.0.0", - "lodash.isplainobject": "^4.0.6", - "resolve": "^1.10.0", - "svgo": "^0.7.2" - }, - "dependencies": { - "coa": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz", - "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=", - "dev": true, - "requires": { - "q": "^1.1.2" - } - }, - "colors": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz", - "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=", - "dev": true - }, - "csso": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz", - "integrity": "sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=", - "dev": true, - "requires": { - "clap": "^1.0.9", - "source-map": "^0.5.3" - } - }, - "esprima": { - "version": "2.7.3", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", - "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=", - "dev": true - }, - "js-yaml": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz", - "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=", - "dev": true, - "requires": { - "argparse": "^1.0.7", - "esprima": "^2.6.0" - } - }, - "svgo": { - "version": "0.7.2", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz", - "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=", - "dev": true, - "requires": { - "coa": "~1.0.1", - "colors": "~1.1.2", - "csso": "~2.3.1", - "js-yaml": "~3.7.0", - "mkdirp": "~0.5.1", - "sax": "~1.2.1", - "whet.extend": "~0.9.9" - } - } - } - }, "babel-plugin-istanbul": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz", @@ -5824,6 +5777,15 @@ "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=", "dev": true }, + "coa": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz", + "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=", + "dev": true, + "requires": { + "q": "^1.1.2" + } + }, "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", @@ -5999,6 +5961,16 @@ "safe-buffer": "~5.1.1" } }, + "convert-units": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/convert-units/-/convert-units-2.3.4.tgz", + "integrity": "sha512-ERHfdA0UhHJp1IpwE6PnFJx8LqG7B1ZjJ20UvVCmopEnVCfER68Tbe3kvN63dLbYXDA2xFWRE6zd4Wsf0w7POg==", + "dev": true, + "requires": { + "lodash.foreach": "2.3.x", + "lodash.keys": "2.3.x" + } + }, "cookie": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz", @@ -6413,6 +6385,16 @@ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true }, + "csso": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz", + "integrity": "sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=", + "dev": true, + "requires": { + "clap": "^1.0.9", + "source-map": "^0.5.3" + } + }, "cssom": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz", @@ -11523,6 +11505,111 @@ "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==", "dev": true }, + "lodash._basebind": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash._basebind/-/lodash._basebind-2.3.0.tgz", + "integrity": "sha1-K1vEUqDhBhQ7IYafIzvbWHQX0kg=", + "dev": true, + "requires": { + "lodash._basecreate": "~2.3.0", + "lodash._setbinddata": "~2.3.0", + "lodash.isobject": "~2.3.0" + } + }, + "lodash._basecreate": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash._basecreate/-/lodash._basecreate-2.3.0.tgz", + "integrity": "sha1-m4ioak3P97fzxh2Dovz8BnHsneA=", + "dev": true, + "requires": { + "lodash._renative": "~2.3.0", + "lodash.isobject": "~2.3.0", + "lodash.noop": "~2.3.0" + } + }, + "lodash._basecreatecallback": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash._basecreatecallback/-/lodash._basecreatecallback-2.3.0.tgz", + "integrity": "sha1-N7KrF1kaM56YjbMln81GAZ16w2I=", + "dev": true, + "requires": { + "lodash._setbinddata": "~2.3.0", + "lodash.bind": "~2.3.0", + "lodash.identity": "~2.3.0", + "lodash.support": "~2.3.0" + } + }, + "lodash._basecreatewrapper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash._basecreatewrapper/-/lodash._basecreatewrapper-2.3.0.tgz", + "integrity": "sha1-qgxhrZYETDkzN2ExSDqXWcNlEkc=", + "dev": true, + "requires": { + "lodash._basecreate": "~2.3.0", + "lodash._setbinddata": "~2.3.0", + "lodash._slice": "~2.3.0", + "lodash.isobject": "~2.3.0" + } + }, + "lodash._createwrapper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash._createwrapper/-/lodash._createwrapper-2.3.0.tgz", + "integrity": "sha1-0arhEC2t9EDo4G/BM6bt1/4UYHU=", + "dev": true, + "requires": { + "lodash._basebind": "~2.3.0", + "lodash._basecreatewrapper": "~2.3.0", + "lodash.isfunction": "~2.3.0" + } + }, + "lodash._objecttypes": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash._objecttypes/-/lodash._objecttypes-2.3.0.tgz", + "integrity": "sha1-aj6jmH3W7rgCGy1cnDA1Scwrrh4=", + "dev": true + }, + "lodash._renative": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash._renative/-/lodash._renative-2.3.0.tgz", + "integrity": "sha1-d9jt1M7SbdWXH54Vpfdy5OMX+9M=", + "dev": true + }, + "lodash._setbinddata": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash._setbinddata/-/lodash._setbinddata-2.3.0.tgz", + "integrity": "sha1-5WEEkKzRMnfVmFjZW18nJ/FQjwQ=", + "dev": true, + "requires": { + "lodash._renative": "~2.3.0", + "lodash.noop": "~2.3.0" + } + }, + "lodash._shimkeys": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash._shimkeys/-/lodash._shimkeys-2.3.0.tgz", + "integrity": "sha1-YR+TFJ4+bHIQlrSHae8pU3rai6k=", + "dev": true, + "requires": { + "lodash._objecttypes": "~2.3.0" + } + }, + "lodash._slice": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash._slice/-/lodash._slice-2.3.0.tgz", + "integrity": "sha1-FHGYEyhZly5GgMoppZkshVZpqlw=", + "dev": true + }, + "lodash.bind": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash.bind/-/lodash.bind-2.3.0.tgz", + "integrity": "sha1-wqjhi2jl7MFS4rFoJmEW/qWwFsw=", + "dev": true, + "requires": { + "lodash._createwrapper": "~2.3.0", + "lodash._renative": "~2.3.0", + "lodash._slice": "~2.3.0" + } + }, "lodash.escape": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz", @@ -11535,24 +11622,92 @@ "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=", "dev": true }, + "lodash.foreach": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-2.3.0.tgz", + "integrity": "sha1-CDQEyR6EbudyRf3512UZxosq8Wg=", + "dev": true, + "requires": { + "lodash._basecreatecallback": "~2.3.0", + "lodash.forown": "~2.3.0" + } + }, + "lodash.forown": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash.forown/-/lodash.forown-2.3.0.tgz", + "integrity": "sha1-JPtKr4ANRfwtxgv+w84EyDajrX8=", + "dev": true, + "requires": { + "lodash._basecreatecallback": "~2.3.0", + "lodash._objecttypes": "~2.3.0", + "lodash.keys": "~2.3.0" + } + }, + "lodash.identity": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash.identity/-/lodash.identity-2.3.0.tgz", + "integrity": "sha1-awGiEMlIU1XCqRO0i2cRIZoXPe0=", + "dev": true + }, "lodash.isequal": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=", "dev": true }, + "lodash.isfunction": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-2.3.0.tgz", + "integrity": "sha1-aylz5HpkfPEucNZ2rqE2Q3BuUmc=", + "dev": true + }, + "lodash.isobject": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-2.3.0.tgz", + "integrity": "sha1-LhbT/Fg9qYMZaJU/LY5tc0NPZ5k=", + "dev": true, + "requires": { + "lodash._objecttypes": "~2.3.0" + } + }, "lodash.isplainobject": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=", "dev": true }, + "lodash.keys": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-2.3.0.tgz", + "integrity": "sha1-s1D0+Syqn0WkouzwGEVM8vKK4lM=", + "dev": true, + "requires": { + "lodash._renative": "~2.3.0", + "lodash._shimkeys": "~2.3.0", + "lodash.isobject": "~2.3.0" + } + }, + "lodash.noop": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash.noop/-/lodash.noop-2.3.0.tgz", + "integrity": "sha1-MFnWKNUbv5N80qC2/Dp/ISpmnCw=", + "dev": true + }, "lodash.sortby": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=", "dev": true }, + "lodash.support": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/lodash.support/-/lodash.support-2.3.0.tgz", + "integrity": "sha1-fq8DivTw1qq3drRKptz8gDNMm/0=", + "dev": true, + "requires": { + "lodash._renative": "~2.3.0" + } + }, "loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -15645,6 +15800,16 @@ } } }, + "superstruct": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/superstruct/-/superstruct-0.8.4.tgz", + "integrity": "sha512-48Ors8IVWZm/tMr8r0Si6+mJiB7mkD7jqvIzktjJ4+EnP5tBp0qOpiM1J8sCUorKx+TXWrfb3i1UcjdD1YK/wA==", + "dev": true, + "requires": { + "kind-of": "^6.0.2", + "tiny-invariant": "^1.0.6" + } + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -15681,6 +15846,45 @@ } } }, + "svgo": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz", + "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=", + "dev": true, + "requires": { + "coa": "~1.0.1", + "colors": "~1.1.2", + "csso": "~2.3.1", + "js-yaml": "~3.7.0", + "mkdirp": "~0.5.1", + "sax": "~1.2.1", + "whet.extend": "~0.9.9" + }, + "dependencies": { + "colors": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz", + "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=", + "dev": true + }, + "esprima": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", + "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=", + "dev": true + }, + "js-yaml": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz", + "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=", + "dev": true, + "requires": { + "argparse": "^1.0.7", + "esprima": "^2.6.0" + } + } + } + }, "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", @@ -15953,6 +16157,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 + }, "tinycolor2": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", diff --git a/packages/ui/package.json b/packages/ui/package.json index f93ffd3286..4c67af2dcb 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -39,6 +39,7 @@ "@babel/preset-env": "7.12.11", "@babel/preset-react": "7.12.10", "@bundle-stats/utils": "^2.4.0", + "@simplyianm/babel-plugin-inline-react-svg": "1.2.0", "@storybook/addon-knobs": "6.1.11", "@storybook/addon-storyshots": "6.1.11", "@storybook/addons": "6.1.11", @@ -46,7 +47,6 @@ "babel-core": "7.0.0-bridge.0", "babel-jest": "26.6.3", "babel-loader": "8.2.2", - "babel-plugin-inline-react-svg": "1.1.2", "babel-plugin-lodash": "3.3.4", "babel-plugin-require-context-hook": "1.0.0", "classnames": "2.2.6", From 3f44aaf261a0a071cbdab4906a50f3acc3a1b57f Mon Sep 17 00:00:00 2001 From: Vio Date: Sun, 3 Jan 2021 16:45:36 +0100 Subject: [PATCH 03/10] refactor(ui): Icons - use name constants for glyphs --- .../icon/__snapshots__/icon.stories.storyshot | 78 ++++++++++++++----- packages/ui/src/ui/icon/icon.jsx | 39 ++++++---- packages/ui/src/ui/icon/icon.stories.jsx | 16 +--- 3 files changed, 86 insertions(+), 47 deletions(-) diff --git a/packages/ui/src/ui/icon/__snapshots__/icon.stories.storyshot b/packages/ui/src/ui/icon/__snapshots__/icon.stories.storyshot index bca59dbc15..062020da99 100644 --- a/packages/ui/src/ui/icon/__snapshots__/icon.stories.storyshot +++ b/packages/ui/src/ui/icon/__snapshots__/icon.stories.storyshot @@ -13,56 +13,61 @@ exports[`Storyshots UI/Icon all 1`] = ` - + - + - - + + + + + + + + + + - + - + diff --git a/packages/ui/src/ui/icon/icon.jsx b/packages/ui/src/ui/icon/icon.jsx index 7bcf3275cc..14de4b2a9c 100644 --- a/packages/ui/src/ui/icon/icon.jsx +++ b/packages/ui/src/ui/icon/icon.jsx @@ -15,21 +15,34 @@ import SortIcon from './assets/sort.svg'; import css from './icon.module.css'; -const ICONS = { - arrow: ArrowIcon, - branch: BranchIcon, - cancel: CancelIcon, - clock: ClockIcon, - commit: CommitIcon, - filter: FilterIcon, - help: HelpIcon, - package: PackageIcon, - pr: PullRequestIcon, - sort: SortIcon, +export const ICONS = { + ARROW: 'arrow', + BRANCH: 'branch', + CANCEL: 'cancel', + CLOCK: 'clock', + COMMIT: 'commit', + FILTER: 'filter', + HELP: 'help', + PACKAGE: 'package', + PR: 'pr', + SORT: 'sort', +}; + +const ICON_MAP = { + [ICONS.ARROW]: ArrowIcon, + [ICONS.BRANCH]: BranchIcon, + [ICONS.CANCEL]: CancelIcon, + [ICONS.CLOCK]: ClockIcon, + [ICONS.COMMIT]: CommitIcon, + [ICONS.FILTER]: FilterIcon, + [ICONS.HELP]: HelpIcon, + [ICONS.PACKAGE]: PackageIcon, + [ICONS.PR]: PullRequestIcon, + [ICONS.SORT]: SortIcon, }; export const Icon = ({ className, glyph, as: Component, ...restProps }) => { - const Svg = typeof glyph === 'string' ? ICONS[glyph] : glyph; + const Svg = typeof glyph === 'string' ? ICON_MAP[glyph] : glyph; return ( @@ -45,6 +58,6 @@ Icon.defaultProps = { Icon.propTypes = { className: PropTypes.string, - glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, + glyph: PropTypes.oneOfType([PropTypes.oneOf(Object.values(ICONS)), PropTypes.node]).isRequired, as: PropTypes.node, }; diff --git a/packages/ui/src/ui/icon/icon.stories.jsx b/packages/ui/src/ui/icon/icon.stories.jsx index 749ad4e1b0..db9ac9d6e0 100644 --- a/packages/ui/src/ui/icon/icon.stories.jsx +++ b/packages/ui/src/ui/icon/icon.stories.jsx @@ -2,23 +2,13 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { getWrapperDecorator } from '../../stories'; -import { Icon } from '.'; +import { Icon, ICONS } from '.'; const stories = storiesOf('UI/Icon', module); stories.addDecorator(getWrapperDecorator()); -stories.add('default', () => ); +stories.add('default', () => ); stories.add('all', () => - [ - 'branch', - 'clock', - 'cancel', - 'commit', - 'filter', - 'help', - 'package', - 'pr', - 'sort', - ].map((glyph) => ), + Object.values(ICONS).map((glyph) => ), ); From a71a6c7b5ee469c16491f6d6b57d74e7ddfc6c53 Mon Sep 17 00:00:00 2001 From: Vio Date: Sun, 3 Jan 2021 16:56:53 +0100 Subject: [PATCH 04/10] test(ui): BundlePage - match html-templates layout --- .../bundle-page.stories.storyshot | 32178 ++++++++-------- .../ui/src/prototypes/bundle-page.stories.jsx | 20 +- 2 files changed, 16111 insertions(+), 16087 deletions(-) diff --git a/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot b/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot index ee8d0ab3fc..055004f50b 100644 --- a/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot +++ b/packages/ui/src/prototypes/__snapshots__/bundle-page.stories.storyshot @@ -28351,7 +28351,7 @@ exports[`Storyshots Prototypes/BundlePage modules 1`] = ` `; -exports[`Storyshots Prototypes/BundlePage packages 1`] = ` +exports[`Storyshots Prototypes/BundlePage overview 1`] = `
- - + + + - - - -
-`; - -exports[`Storyshots Prototypes/BundlePage totals 1`] = ` -
- - - + + + + + ] + } + /> + + +
+`; + +exports[`Storyshots Prototypes/BundlePage packages 1`] = ` +
+ - ( <> @@ -46,13 +46,6 @@ const Page = ({ children, activeTab }) => ( - {get(currentJob, 'insights.webpack.duplicatePackages') && ( - - - - )} @@ -76,8 +69,15 @@ Page.propTypes = { children: PropTypes.node.isRequired, }; -stories.add('totals', () => ( - +stories.add('overview', () => ( + + {get(currentJob, 'insights.webpack.duplicatePackages') && ( + + + + )} From 5c3f33e2b0536022c5dac9072f16df96e1fbf45e Mon Sep 17 00:00:00 2001 From: Vio Date: Tue, 5 Jan 2021 08:23:03 +0100 Subject: [PATCH 05/10] fix(ui): Tabs - tweak active state --- packages/ui/src/ui/tabs/tabs.module.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/ui/tabs/tabs.module.css b/packages/ui/src/ui/tabs/tabs.module.css index 4fcdfacbf7..a62f316af2 100644 --- a/packages/ui/src/ui/tabs/tabs.module.css +++ b/packages/ui/src/ui/tabs/tabs.module.css @@ -6,7 +6,7 @@ .item { position: relative; display: inline-block; - padding: var(--space-xsmall) var(--space-small); + padding: var(--space-xsmall) 0; color: var(--color-text-light); font-weight: bold; text-decoration: none; @@ -38,3 +38,7 @@ .itemActive::after { background: currentColor; } + +.item + .item { + margin-left: var(--space-medium); +} From ec215c5b7e02e04773a663a90cb11417e55d1283 Mon Sep 17 00:00:00 2001 From: Vio Date: Tue, 5 Jan 2021 08:23:41 +0100 Subject: [PATCH 06/10] fix(ui): JobsHeader - tweak spacing; use i18n --- .../job-header/job-header.module.css | 5 ++++- .../components/jobs-header/jobs-header.jsx | 20 +++++++++---------- .../jobs-header/jobs-header.module.css | 10 ++++++++-- packages/ui/src/css/variables.css | 4 +++- packages/ui/src/i18n.js | 4 ++++ 5 files changed, 29 insertions(+), 14 deletions(-) create mode 100644 packages/ui/src/i18n.js diff --git a/packages/ui/src/components/job-header/job-header.module.css b/packages/ui/src/components/job-header/job-header.module.css index 384764f73d..d075fc9f93 100644 --- a/packages/ui/src/components/job-header/job-header.module.css +++ b/packages/ui/src/components/job-header/job-header.module.css @@ -16,6 +16,10 @@ vertical-align: top; } +.meta { + color: var(--color-text-light); +} + .metaItem { display: inline-flex; align-items: center; @@ -25,7 +29,6 @@ width: var(--space-small); height: var(--space-small); margin-right: var(--space-xxxsmall); - color: var(--color-text-light); } .metaLabel { diff --git a/packages/ui/src/components/jobs-header/jobs-header.jsx b/packages/ui/src/components/jobs-header/jobs-header.jsx index 8437845ef2..8ea156a049 100644 --- a/packages/ui/src/components/jobs-header/jobs-header.jsx +++ b/packages/ui/src/components/jobs-header/jobs-header.jsx @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; +import I18N from '../../i18n'; import { FlexStack } from '../../layout/flex-stack'; import { JobHeader } from '../job-header'; import css from './jobs-header.module.css'; @@ -11,16 +12,15 @@ export const JobsHeader = (props) => { const rootClassName = cx(css.root, className); return ( - - {jobs && - jobs.map((job, index) => ( - - ))} + + {jobs?.map((job, index) => ( + + ))} ); }; diff --git a/packages/ui/src/components/jobs-header/jobs-header.module.css b/packages/ui/src/components/jobs-header/jobs-header.module.css index d2b4ee4507..9daa40b344 100644 --- a/packages/ui/src/components/jobs-header/jobs-header.module.css +++ b/packages/ui/src/components/jobs-header/jobs-header.module.css @@ -1,10 +1,16 @@ .root { align-items: stretch; flex-wrap: wrap; + padding: var(--space-small) 0; } .item { - flex: 1 1 auto; - padding: var(--space-small); + flex: 0 0 auto; + padding: 0 var(--space-medium); border-left: 1px solid var(--color-outline); } + +.item:first-child { + padding-left: 0; + border-left: 0; +} diff --git a/packages/ui/src/css/variables.css b/packages/ui/src/css/variables.css index 8e2ef445d6..e4252b715b 100644 --- a/packages/ui/src/css/variables.css +++ b/packages/ui/src/css/variables.css @@ -40,7 +40,7 @@ --color-gray-900 : #262729; --color-gray-ultra-light: var(--color-gray-100); - --color-gray-light: var(--color-gray-200); + --color-gray-light: var(--color-gray-300); --color-gray: var(--color-gray-500); --color-gray-dark: var(--color-gray-700); --color-gray-ultra-dark: var(--color-gray-900); @@ -122,9 +122,11 @@ --color-branding: #1a477f; --color-branding-dark: #10356d; + --color-text-ultra-light: var(--color-gray-ultra-light); --color-text-light: var(--color-gray-light); --color-text: var(--color-gray); --color-text-dark: var(--color-gray-dark); + --color-text-ultra-dark: var(--color-gray-ultra-dark); --color-heading: var(--color-gray-ultra-dark); --color-success: var(--color-green); diff --git a/packages/ui/src/i18n.js b/packages/ui/src/i18n.js new file mode 100644 index 0000000000..e2d74bc547 --- /dev/null +++ b/packages/ui/src/i18n.js @@ -0,0 +1,4 @@ +export default { + CURRENT: 'current', + BASELINE: 'baseline', +}; From c6e35beb65b512257360b22e42c5b7f94ca5c8e2 Mon Sep 17 00:00:00 2001 From: Vio Date: Tue, 5 Jan 2021 08:28:55 +0100 Subject: [PATCH 07/10] test(ui, html-templates): Update layout - change header - normalize spacing --- .../html-templates/src/app/header/header.jsx | 22 ++++++------- .../src/app/header/header.module.css | 4 +-- packages/html-templates/src/app/index.jsx | 2 +- .../html-templates/src/app/styles.module.css | 14 ++++---- .../jobs-header/jobs-header.module.css | 5 --- .../ui/src/prototypes/bundle-page.module.css | 31 ++++++++++-------- .../ui/src/prototypes/bundle-page.stories.jsx | 32 +++++++------------ .../ui/src/ui/container/container.module.css | 2 +- 8 files changed, 52 insertions(+), 60 deletions(-) diff --git a/packages/html-templates/src/app/header/header.jsx b/packages/html-templates/src/app/header/header.jsx index a970515fcf..1f7c700059 100644 --- a/packages/html-templates/src/app/header/header.jsx +++ b/packages/html-templates/src/app/header/header.jsx @@ -1,28 +1,26 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; +import { Container } from '@bundle-stats/ui/lib-esm/ui/container'; import { JobsHeader } from '@bundle-stats/ui/lib-esm/components/jobs-header'; import { Logo } from '@bundle-stats/ui/lib-esm/ui/logo'; import css from './header.module.css'; export const Header = ({ className, jobs }) => ( -
- - BundleStats - - -
+ ); Header.propTypes = { diff --git a/packages/html-templates/src/app/header/header.module.css b/packages/html-templates/src/app/header/header.module.css index bfe8cf0fd9..8f15309198 100644 --- a/packages/html-templates/src/app/header/header.module.css +++ b/packages/html-templates/src/app/header/header.module.css @@ -1,6 +1,6 @@ -.root { +.inner { display: flex; - align-items: stretch; + align-items: center; } .branding { diff --git a/packages/html-templates/src/app/index.jsx b/packages/html-templates/src/app/index.jsx index 301350e789..66cdc8c56f 100644 --- a/packages/html-templates/src/app/index.jsx +++ b/packages/html-templates/src/app/index.jsx @@ -59,7 +59,7 @@ const StandaloneApp = ({ jobs }) => { return ( - + ( - <> -
( -
- - -
- )} - /> - - +
+ +
+ - - - - - - +
+ + + + + {TABS.map((tab) => ( @@ -61,7 +53,7 @@ const Page = ({ children, activeTab }) => (
- +
); Page.propTypes = { diff --git a/packages/ui/src/ui/container/container.module.css b/packages/ui/src/ui/container/container.module.css index 5f995600aa..1ddfbbb864 100644 --- a/packages/ui/src/ui/container/container.module.css +++ b/packages/ui/src/ui/container/container.module.css @@ -1,5 +1,5 @@ .inner { - width: 100%; + width: calc(100% - var(--space-small) * 2); max-width: var(--max-width); margin: 0 auto; } From ea80be052d480589efc72b1650902da0fd85d3ad Mon Sep 17 00:00:00 2001 From: Vio Date: Tue, 5 Jan 2021 08:32:32 +0100 Subject: [PATCH 08/10] fix(ui): SummaryItem - simplify tooltip --- .../components/summary-item/summary-item.jsx | 7 +- .../summary-item/summary-item.module.css | 21 +- .../__snapshots__/tooltip.stories.storyshot | 222 +++++++++++++++++- 3 files changed, 223 insertions(+), 27 deletions(-) diff --git a/packages/ui/src/components/summary-item/summary-item.jsx b/packages/ui/src/components/summary-item/summary-item.jsx index 4483048b26..be1c4c6aca 100644 --- a/packages/ui/src/components/summary-item/summary-item.jsx +++ b/packages/ui/src/components/summary-item/summary-item.jsx @@ -40,12 +40,7 @@ export const SummaryItem = ({ as="h3" className={css.title} title={ - showMetricDescriptionTooltip && ( -
-

{metric.label}

-

{metric.description}

-
- ) + showMetricDescriptionTooltip &&

{metric.description}

} > {metric.label} diff --git a/packages/ui/src/components/summary-item/summary-item.module.css b/packages/ui/src/components/summary-item/summary-item.module.css index 48273d485d..e65005f12e 100644 --- a/packages/ui/src/components/summary-item/summary-item.module.css +++ b/packages/ui/src/components/summary-item/summary-item.module.css @@ -1,5 +1,6 @@ .title { margin: 0; + display: inline-block; color: var(--color-text-light); font-weight: bold; font-size: var(--size-xsmall); @@ -27,25 +28,7 @@ } .helpTooltip { - width: 100vw; - max-width: 320px; - white-space: normal; - text-align: left; -} - -.helpTooltipTitle { - margin: 0 0 var(--space-xxsmall); - color: var(--color-text); - font-size: var(--size-medium); - text-transform: none; - font-weight: bold; -} - -.helpTooltipDescription { - color: var(--color-text); - line-height: var(--space-small); - font-weight: normal; - text-transform: none; + max-width: 280px; } /* Hover */ diff --git a/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot b/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot index 227890f261..017ecab9d2 100644 --- a/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot +++ b/packages/ui/src/ui/tooltip/__snapshots__/tooltip.stories.storyshot @@ -33,7 +33,24 @@ exports[`Storyshots UI/Tooltip default 1`] = ` toggle={[Function]} unstable_arrowRef={ Object { - "current": null, + "current":
+ + + + +
, } } unstable_arrowStyles={Object {}} @@ -56,6 +73,24 @@ exports[`Storyshots UI/Tooltip default 1`] = ` role="tooltip" style="display: none; pointer-events: none;" > +
+ + + + +
@@ -108,7 +143,24 @@ exports[`Storyshots UI/Tooltip default 1`] = ` toggle={[Function]} unstable_arrowRef={ Object { - "current": null, + "current":
+ + + + +
, } } unstable_arrowStyles={Object {}} @@ -131,6 +183,24 @@ exports[`Storyshots UI/Tooltip default 1`] = ` role="tooltip" style="display: none; pointer-events: none;" > +
+ + + + +
@@ -168,6 +238,24 @@ exports[`Storyshots UI/Tooltip default 1`] = ` role="tooltip" style="display: none; pointer-events: none;" > +
+ + + + +
@@ -190,6 +278,136 @@ exports[`Storyshots UI/Tooltip default 1`] = ` } } > + + + + + +
, + } + } + unstable_arrowStyles={Object {}} + unstable_disclosureRef={ + Object { + "current": null, + } + } + unstable_idCountRef={ + Object { + "current": 0, + } + } + unstable_originalPlacement="top" + unstable_popoverRef={ + Object { + "current": , + } + } + unstable_popoverStyles={Object {}} + unstable_referenceRef={ + Object { + "current": + Job #100 + , + } + } + unstable_setTimeout={[Function]} + unstable_timeout={0} + unstable_update={[Function]} + visible={false} + > +
+ + + + +
+
From ad477f0b85036b896afbf9c8682203e2a39c2004 Mon Sep 17 00:00:00 2001 From: Vio Date: Tue, 5 Jan 2021 08:33:50 +0100 Subject: [PATCH 09/10] fix(ui): Summary - add bg --- packages/ui/src/components/summary/summary.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/components/summary/summary.module.css b/packages/ui/src/components/summary/summary.module.css index 9c455501bd..f85f900ccf 100644 --- a/packages/ui/src/components/summary/summary.module.css +++ b/packages/ui/src/components/summary/summary.module.css @@ -1,6 +1,7 @@ .root { width: 100%; border: 1px solid var(--color-outline); + background: var(--color-background); } .item { From bf968b9578d0262b8d57674648e79bf0a394b36e Mon Sep 17 00:00:00 2001 From: Vio Date: Tue, 5 Jan 2021 09:16:59 +0100 Subject: [PATCH 10/10] fix(ui): Grayscale - increase contrast --- packages/ui/src/css/variables.css | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/ui/src/css/variables.css b/packages/ui/src/css/variables.css index e4252b715b..ffa9ba72b6 100644 --- a/packages/ui/src/css/variables.css +++ b/packages/ui/src/css/variables.css @@ -24,23 +24,23 @@ /* * Color scheme: - * http://mcg.mbitson.com/#!?mcgpalette0=%23da5a63&mcgpalette1=%236bb967&mcgpalette2=%23f6e27f&mcgpalette3=%234f5154&mcgpalette4=%233784d2&themename=mcgtheme - * https://coolors.co/3784d2-da5a63-6bb967-f6e27f-4f5154 + * http://mcg.mbitson.com/#!?mcgpalette0=%23da5a63&mcgpalette1=%236bb967&mcgpalette2=%23f6e27f&mcgpalette3=%23313435&mcgpalette4=%233784d2&themename=mcgtheme + * https://coolors.co/3784d2-da5a63-6bb967-f6e27f-313435 */ - --color-gray-25: #fafbfb; - --color-gray-50 : #eaeaea; - --color-gray-100 : #cacbcc; - --color-gray-200 : #a7a8aa; - --color-gray-300 : #848587; - --color-gray-400 : #696b6e; - --color-gray-500 : #4f5154; - --color-gray-600 : #484a4d; - --color-gray-700 : #3f4043; - --color-gray-800 : #36373a; - --color-gray-900 : #262729; + --color-gray-25: #fafafa; + --color-gray-50: #e6e7e7; + --color-gray-100: #c1c2c2; + --color-gray-200: #989a9a; + --color-gray-300: #6f7172; + --color-gray-400: #505253; + --color-gray-500: #313435; + --color-gray-600: #2c2f30; + --color-gray-700: #252728; + --color-gray-800: #1f2122; + --color-gray-900: #131516; --color-gray-ultra-light: var(--color-gray-100); - --color-gray-light: var(--color-gray-300); + --color-gray-light: var(--color-gray-200); --color-gray: var(--color-gray-500); --color-gray-dark: var(--color-gray-700); --color-gray-ultra-dark: var(--color-gray-900);