From e8918ab14a1403627c114eaec36bc428def74aa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 19 Oct 2022 19:41:58 +0200 Subject: [PATCH 01/42] Add new mui-v5 packages + styled-components --- package.json | 6 + packages/react-ui/package.json | 6 + packages/react-widgets/package.json | 1 + packages/react-widgets/webpack.config.js | 1 + yarn.lock | 397 ++++++++++++++++++++++- 5 files changed, 406 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 069cd4010..1876f680b 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,12 @@ "@material-ui/core": "^4.11.3", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.57", + "@mui/icons-material": "^5.10.9", + "@mui/lab": "^5.0.0-alpha.104", + "@mui/material": "^5.10.10", + "@mui/styles": "^5.10.10", + "@mui/styled-engine-sc": "^5.10.6", + "styled-components": "^5.2.3", "@nebula.gl/edit-modes": "^1.0.4", "@nebula.gl/layers": "^1.0.4", "@reduxjs/toolkit": "^1.5.0", diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 1135146c8..e1fcad4de 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -77,9 +77,15 @@ }, "peerDependencies": { "@carto/react-core": "^1.5.0-alpha.4", + "@mui/icons-material": "^5.10.9", "@material-ui/core": "^4.11.3", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.57", + "@mui/lab": "^5.0.0-alpha.104", + "@mui/material": "^5.10.10", + "@mui/styles": "^5.10.10", + "@mui/styled-engine-sc": "^5.10.6", + "styled-components": "^5.2.3", "echarts": "^5.2.0", "echarts-for-react": "^3.0.1", "react": "^17.0.1", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 7f6239ab6..52af356bc 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -73,6 +73,7 @@ "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@material-ui/core": "^4.11.3", + "@mui/material": "^5.10.10", "@nebula.gl/edit-modes": "^1.0.4", "@nebula.gl/layers": "^1.0.4", "dequal": "^2.0.2", diff --git a/packages/react-widgets/webpack.config.js b/packages/react-widgets/webpack.config.js index bbb7e2487..42dd34784 100644 --- a/packages/react-widgets/webpack.config.js +++ b/packages/react-widgets/webpack.config.js @@ -10,6 +10,7 @@ const webpackConfig = { /^@carto\/react-.+$/, /^@deck.gl\/.+$/, /^@material-ui\/.+$/, + /^@mui\/.+$/, /^@nebula.gl\/.+$/, 'react', 'react-dom', diff --git a/yarn.lock b/yarn.lock index f8a8d1990..b7fe15db8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -264,6 +264,13 @@ dependencies: "@babel/types" "^7.18.9" +"@babel/helper-module-imports@^7.0.0": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" + integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA== + dependencies: + "@babel/types" "^7.18.6" + "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3" @@ -1232,7 +1239,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.17.8": +"@babel/runtime@^7.17.8", "@babel/runtime@^7.19.0": version "7.19.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78" integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA== @@ -1273,7 +1280,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/traverse@^7.19.1": +"@babel/traverse@^7.19.1", "@babel/traverse@^7.4.5": version "7.19.4" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.4.tgz#f117820e18b1e59448a6c1fa9d0ff08f7ac459a8" integrity sha512-w3K1i+V5u2aJUOXBFFC5pveFLmtq1s3qcdDNC2qRI6WPBQIDaKFqXxDEqDO/h1dQ3HjsZoZMyIy6jGLq0xtw+g== @@ -1454,11 +1461,64 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz#d5e0706cf8c6acd8c6032f8d54070af261bbbb2f" integrity sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA== +"@emotion/cache@^11.10.3": + version "11.10.3" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.3.tgz#c4f67904fad10c945fea5165c3a5a0583c164b87" + integrity sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ== + dependencies: + "@emotion/memoize" "^0.8.0" + "@emotion/sheet" "^1.2.0" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + stylis "4.0.13" + "@emotion/hash@^0.8.0": version "0.8.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== +"@emotion/hash@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" + integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== + +"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" + integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg== + dependencies: + "@emotion/memoize" "^0.8.0" + +"@emotion/memoize@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" + integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== + +"@emotion/sheet@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.0.tgz#771b1987855839e214fc1741bde43089397f7be5" + integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w== + +"@emotion/stylis@^0.8.4": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + +"@emotion/utils@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" + integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw== + +"@emotion/weak-memoize@^0.3.0": + version "0.3.0" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb" + integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== + "@eslint/eslintrc@^0.4.3": version "0.4.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c" @@ -2970,6 +3030,144 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" +"@mui/base@5.0.0-alpha.102": + version "5.0.0-alpha.102" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.102.tgz#53b07d0b73d3afe1d2a3feb3b43c8188bb821796" + integrity sha512-5e/qAIP+DlkrZxIt/cwnDw/A3ii22WkoEoWKHyu4+oeGs3/1Flh7qLaN4h5EAIBB9TvTEZEUzvmsTInmIj6ghg== + dependencies: + "@babel/runtime" "^7.19.0" + "@emotion/is-prop-valid" "^1.2.0" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + "@popperjs/core" "^2.11.6" + clsx "^1.2.1" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/core-downloads-tracker@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.10.tgz#a3e5d2f6e5146e9a85d48824c386a31be1746ba3" + integrity sha512-aDuE2PNEh+hAndxEWlZgq7uiFPZKJtnkPDX7v6kSCrMXA32ZaQ6rZi5olmC7DUHt/BaOSxb7N/im/ss0XBkDhA== + +"@mui/icons-material@^5.10.9": + version "5.10.9" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.10.9.tgz#f9522c49797caf30146acc576e37ecb4f95bbc38" + integrity sha512-sqClXdEM39WKQJOQ0ZCPTptaZgqwibhj2EFV9N0v7BU1PO8y4OcX/a2wIQHn4fNuDjIZktJIBrmU23h7aqlGgg== + dependencies: + "@babel/runtime" "^7.19.0" + +"@mui/lab@^5.0.0-alpha.104": + version "5.0.0-alpha.104" + resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.104.tgz#8d2f0c6f87de1ccb72dd29c8f5eb23ee99dfbe76" + integrity sha512-mABdzB/cw5IXtCj2B4oggsXkfLvHg73ujZfErtKP4Sj7L6Fzy+rQceBGjv84UFBkqMvv9zm1UUchI3HfEj/lUw== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/base" "5.0.0-alpha.102" + "@mui/system" "^5.10.10" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + clsx "^1.2.1" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/material@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.10.10.tgz#df780d933c0aa9d4a5272f32c9cc24bf1ea72cff" + integrity sha512-ioLvqY7VvcePz9dnEIRhpiVvtJmAFmvG6rtLXXzVdMmAVbSaelr5Io07mPz/mCyqE+Uv8/4EuJV276DWO7etzA== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/base" "5.0.0-alpha.102" + "@mui/core-downloads-tracker" "^5.10.10" + "@mui/system" "^5.10.10" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + "@types/react-transition-group" "^4.4.5" + clsx "^1.2.1" + csstype "^3.1.1" + prop-types "^15.8.1" + react-is "^18.2.0" + react-transition-group "^4.4.5" + +"@mui/private-theming@^5.10.9": + version "5.10.9" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.10.9.tgz#c427bfa736455703975cdb108dbde6a174ba7971" + integrity sha512-BN7/CnsVPVyBaQpDTij4uV2xGYHHHhOgpdxeYLlIu+TqnsVM7wUeF+37kXvHovxM6xmL5qoaVUD98gDC0IZnHg== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/utils" "^5.10.9" + prop-types "^15.8.1" + +"@mui/styled-engine-sc@^5.10.6": + version "5.10.6" + resolved "https://registry.yarnpkg.com/@mui/styled-engine-sc/-/styled-engine-sc-5.10.6.tgz#e1c1f1e6a80f2bcd11f83e33c9925753cf61bf23" + integrity sha512-AQIa478w3UI8gmlht7orp96tEJbEN26FiEs9Aee6E+iVTnoyT3b6V/JapgKlITo6rn7tYTSX9iJYwnDTMhbzTg== + dependencies: + "@babel/runtime" "^7.19.0" + prop-types "^15.8.1" + +"@mui/styled-engine@^5.10.8": + version "5.10.8" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.10.8.tgz#2db411e4278f06f70ccb6b5cd56ace67109513f6" + integrity sha512-w+y8WI18EJV6zM/q41ug19cE70JTeO6sWFsQ7tgePQFpy6ToCVPh0YLrtqxUZXSoMStW5FMw0t9fHTFAqPbngw== + dependencies: + "@babel/runtime" "^7.19.0" + "@emotion/cache" "^11.10.3" + csstype "^3.1.1" + prop-types "^15.8.1" + +"@mui/styles@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.10.10.tgz#9b44bfbb89e735b737acd95ba4b8136f116ec30a" + integrity sha512-utr87q/euocRdc2ekFX7DL1gqTVfogSVeu74Nspr8rtK/afC9QwF3ScP/XThVXWPcQKjBWHMKWtAO9BSVE4KDg== + dependencies: + "@babel/runtime" "^7.19.0" + "@emotion/hash" "^0.9.0" + "@mui/private-theming" "^5.10.9" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + clsx "^1.2.1" + csstype "^3.1.1" + hoist-non-react-statics "^3.3.2" + jss "^10.9.2" + jss-plugin-camel-case "^10.9.2" + jss-plugin-default-unit "^10.9.2" + jss-plugin-global "^10.9.2" + jss-plugin-nested "^10.9.2" + jss-plugin-props-sort "^10.9.2" + jss-plugin-rule-value-function "^10.9.2" + jss-plugin-vendor-prefixer "^10.9.2" + prop-types "^15.8.1" + +"@mui/system@^5.10.10": + version "5.10.10" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.10.10.tgz#fbc34f29a3b62268c3d2b2be92819a35fc52de90" + integrity sha512-TXwtKN0adKpBrZmO+eilQWoPf2veh050HLYrN78Kps9OhlvO70v/2Kya0+mORFhu9yhpAwjHXO8JII/R4a5ZLA== + dependencies: + "@babel/runtime" "^7.19.0" + "@mui/private-theming" "^5.10.9" + "@mui/styled-engine" "^5.10.8" + "@mui/types" "^7.2.0" + "@mui/utils" "^5.10.9" + clsx "^1.2.1" + csstype "^3.1.1" + prop-types "^15.8.1" + +"@mui/types@^7.2.0": + version "7.2.0" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.0.tgz#91380c2d42420f51f404120f7a9270eadd6f5c23" + integrity sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA== + +"@mui/utils@^5.10.9": + version "5.10.9" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.10.9.tgz#9dc455f9230f43eeb81d96a9a4bdb3855bb9ea39" + integrity sha512-2tdHWrq3+WCy+G6TIIaFx3cg7PorXZ71P375ExuX61od1NOAJP1mK90VxQ8N4aqnj2vmO3AQDkV4oV2Ktvt4bA== + dependencies: + "@babel/runtime" "^7.19.0" + "@types/prop-types" "^15.7.5" + "@types/react-is" "^16.7.1 || ^17.0.0" + prop-types "^15.8.1" + react-is "^18.2.0" + "@nebula.gl/edit-modes@1.0.4", "@nebula.gl/edit-modes@^1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@nebula.gl/edit-modes/-/edit-modes-1.0.4.tgz#df37751768239fb37dfcb697b0b90e11371a47a3" @@ -3252,6 +3450,11 @@ schema-utils "^3.0.0" source-map "^0.7.3" +"@popperjs/core@^2.11.6": + version "2.11.6" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45" + integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw== + "@probe.gl/env@3.5.0", "@probe.gl/env@^3.5.0": version "3.5.0" resolved "https://registry.yarnpkg.com/@probe.gl/env/-/env-3.5.0.tgz#c6d8fbf414fda3eba7b3813cc274e76245216fe0" @@ -4876,6 +5079,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== +"@types/prop-types@^15.7.5": + version "15.7.5" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" + integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== + "@types/qs@^6.9.5": version "6.9.7" resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" @@ -4888,6 +5096,13 @@ dependencies: "@types/react" "*" +"@types/react-is@^16.7.1 || ^17.0.0": + version "17.0.3" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a" + integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw== + dependencies: + "@types/react" "*" + "@types/react-redux@^7.1.20": version "7.1.21" resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.21.tgz#f32bbaf7cbc4b93f51e10d340aa54035c084b186" @@ -4912,6 +5127,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.5": + version "4.4.5" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416" + integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@>=16.9.0": version "17.0.38" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd" @@ -6092,6 +6314,22 @@ babel-plugin-react-docgen@^4.2.1: lodash "^4.17.15" react-docgen "^5.0.0" +"babel-plugin-styled-components@>= 1.12.0": + version "2.0.7" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086" + integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.16.0" + "@babel/helper-module-imports" "^7.16.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + picomatch "^2.3.0" + +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw== + babel-preset-current-node-syntax@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b" @@ -6668,6 +6906,11 @@ camelcase@^6.0.0, camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.1.tgz#250fd350cfd555d0d2160b1d51510eaf8326e86e" integrity sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA== +camelize@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3" + integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ== + caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286: version "1.0.30001292" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001292.tgz#4a55f61c06abc9595965cfd77897dc7bc1cdc456" @@ -6988,6 +7231,11 @@ clsx@^1.0.4: resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== +clsx@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + cmd-shim@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd" @@ -7599,6 +7847,11 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg== + css-loader@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645" @@ -7629,6 +7882,15 @@ css-select@^4.1.3: domutils "^2.8.0" nth-check "^2.0.1" +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-vendor@^2.0.8: version "2.0.8" resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d" @@ -7688,6 +7950,11 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5" integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA== +csstype@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" + integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== + csv-streamify@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/csv-streamify/-/csv-streamify-3.0.4.tgz#4cb614c57e3f299cca17b63fdcb4ad167777f47a" @@ -10371,7 +10638,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -12030,6 +12297,15 @@ jss-plugin-camel-case@^10.5.1: hyphenate-style-name "^1.0.3" jss "10.9.0" +jss-plugin-camel-case@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.2.tgz#76dddfa32f9e62d17daa4e3504991fd0933b89e1" + integrity sha512-wgBPlL3WS0WDJ1lPJcgjux/SHnDuu7opmgQKSraKs4z8dCCyYMx9IDPFKBXQ8Q5dVYij1FFV0WdxyhuOOAXuTg== + dependencies: + "@babel/runtime" "^7.3.1" + hyphenate-style-name "^1.0.3" + jss "10.9.2" + jss-plugin-default-unit@^10.5.1: version "10.9.0" resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz#bb23a48f075bc0ce852b4b4d3f7582bc002df991" @@ -12038,6 +12314,14 @@ jss-plugin-default-unit@^10.5.1: "@babel/runtime" "^7.3.1" jss "10.9.0" +jss-plugin-default-unit@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.2.tgz#3e7f4a1506b18d8fe231554fd982439feb2a9c53" + integrity sha512-pYg0QX3bBEFtTnmeSI3l7ad1vtHU42YEEpgW7pmIh+9pkWNWb5dwS/4onSfAaI0kq+dOZHzz4dWe+8vWnanoSg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.9.2" + jss-plugin-global@^10.5.1: version "10.9.0" resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz#fc07a0086ac97aca174e37edb480b69277f3931f" @@ -12046,6 +12330,14 @@ jss-plugin-global@^10.5.1: "@babel/runtime" "^7.3.1" jss "10.9.0" +jss-plugin-global@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.2.tgz#e7f2ad4a5e8e674fb703b04b57a570b8c3e5c2c2" + integrity sha512-GcX0aE8Ef6AtlasVrafg1DItlL/tWHoC4cGir4r3gegbWwF5ZOBYhx04gurPvWHC8F873aEGqge7C17xpwmp2g== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.9.2" + jss-plugin-nested@^10.5.1: version "10.9.0" resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz#cc1c7d63ad542c3ccc6e2c66c8328c6b6b00f4b3" @@ -12055,6 +12347,15 @@ jss-plugin-nested@^10.5.1: jss "10.9.0" tiny-warning "^1.0.2" +jss-plugin-nested@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.2.tgz#3aa2502816089ecf3981e1a07c49b276d67dca63" + integrity sha512-VgiOWIC6bvgDaAL97XCxGD0BxOKM0K0zeB/ECyNaVF6FqvdGB9KBBWRdy2STYAss4VVA7i5TbxFZN+WSX1kfQA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.9.2" + tiny-warning "^1.0.2" + jss-plugin-props-sort@^10.5.1: version "10.9.0" resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz#30e9567ef9479043feb6e5e59db09b4de687c47d" @@ -12063,6 +12364,14 @@ jss-plugin-props-sort@^10.5.1: "@babel/runtime" "^7.3.1" jss "10.9.0" +jss-plugin-props-sort@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.2.tgz#645f6c8f179309667b3e6212f66b59a32fb3f01f" + integrity sha512-AP1AyUTbi2szylgr+O0OB7gkIxEGzySLITZ2GpsaoX72YMCGI2jYAc+WUhPfvUnZYiauF4zTnN4V4TGuvFjJlw== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.9.2" + jss-plugin-rule-value-function@^10.5.1: version "10.9.0" resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz#379fd2732c0746fe45168011fe25544c1a295d67" @@ -12072,6 +12381,15 @@ jss-plugin-rule-value-function@^10.5.1: jss "10.9.0" tiny-warning "^1.0.2" +jss-plugin-rule-value-function@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.2.tgz#9afe07596e477123cbf11120776be6a64494541f" + integrity sha512-vf5ms8zvLFMub6swbNxvzsurHfUZ5Shy5aJB2gIpY6WNA3uLinEcxYyraQXItRHi5ivXGqYciFDRM2ZoVoRZ4Q== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.9.2" + tiny-warning "^1.0.2" + jss-plugin-vendor-prefixer@^10.5.1: version "10.9.0" resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz#aa9df98abfb3f75f7ed59a3ec50a5452461a206a" @@ -12081,6 +12399,15 @@ jss-plugin-vendor-prefixer@^10.5.1: css-vendor "^2.0.8" jss "10.9.0" +jss-plugin-vendor-prefixer@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.2.tgz#410a0f3b9f8dbbfba58f4d329134df4849aa1237" + integrity sha512-SxcEoH+Rttf9fEv6KkiPzLdXRmI6waOTcMkbbEFgdZLDYNIP9UKNHFy6thhbRKqv0XMQZdrEsbDyV464zE/dUA== + dependencies: + "@babel/runtime" "^7.3.1" + css-vendor "^2.0.8" + jss "10.9.2" + jss@10.9.0, jss@^10.5.1: version "10.9.0" resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.0.tgz#7583ee2cdc904a83c872ba695d1baab4b59c141b" @@ -12091,6 +12418,16 @@ jss@10.9.0, jss@^10.5.1: is-in-browser "^1.1.3" tiny-warning "^1.0.2" +jss@10.9.2, jss@^10.9.2: + version "10.9.2" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.2.tgz#9379be1f195ef98011dfd31f9448251bd61b95a9" + integrity sha512-b8G6rWpYLR4teTUbGd4I4EsnWjg7MN0Q5bSsjKhVkJVjhQDy2KzkbD2AW3TuT0RYZVmZZHKIrXDn6kjU14qkUg== + dependencies: + "@babel/runtime" "^7.3.1" + csstype "^3.0.2" + is-in-browser "^1.1.3" + tiny-warning "^1.0.2" + "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b" @@ -14720,7 +15057,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2: cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-value-parser@^4.1.0: +postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0: version "4.2.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== @@ -14893,6 +15230,15 @@ prop-types@^15.0.0, prop-types@^15.6.2, prop-types@^15.7.2: object-assign "^4.1.1" react-is "^16.13.1" +prop-types@^15.8.1: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + property-information@^5.0.0, property-information@^5.3.0: version "5.6.0" resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69" @@ -15221,6 +15567,11 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== + react-redux@^7.2.2: version "7.2.6" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa" @@ -15248,6 +15599,16 @@ react-transition-group@^4.4.0: loose-envify "^1.4.0" prop-types "^15.6.2" +react-transition-group@^4.4.5: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^17.0.1: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -16124,6 +16485,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -16771,6 +17137,27 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +styled-components@^5.2.3: + version "5.3.6" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1" + integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^1.1.0" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1.12.0" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + +stylis@4.0.13: + version "4.0.13" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91" + integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag== + superstatic@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/superstatic/-/superstatic-7.1.0.tgz#42cc773a0f500fb691841e0533d0b8c31f25997f" @@ -16808,7 +17195,7 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^5.0.0, supports-color@^5.3.0: +supports-color@^5.0.0, supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== From 1f77eb256d8e581dbfdd9c41d098b9decea94cf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 19 Oct 2022 19:56:18 +0200 Subject: [PATCH 02/42] Add emotion react & styled libs deps --- package.json | 2 + packages/react-ui/package.json | 2 + packages/react-widgets/package.json | 2 + yarn.lock | 96 ++++++++++++++++++++++++++--- 4 files changed, 95 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 1876f680b..a1e648c8a 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,8 @@ "@mui/material": "^5.10.10", "@mui/styles": "^5.10.10", "@mui/styled-engine-sc": "^5.10.6", + "@emotion/react": "^11.10.0", + "@emotion/styled": "^11.10.0", "styled-components": "^5.2.3", "@nebula.gl/edit-modes": "^1.0.4", "@nebula.gl/layers": "^1.0.4", diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index e1fcad4de..909934ade 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -85,6 +85,8 @@ "@mui/material": "^5.10.10", "@mui/styles": "^5.10.10", "@mui/styled-engine-sc": "^5.10.6", + "@emotion/react": "^11.10.0", + "@emotion/styled": "^11.10.0", "styled-components": "^5.2.3", "echarts": "^5.2.0", "echarts-for-react": "^3.0.1", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 52af356bc..95c4a025c 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -74,6 +74,8 @@ "@deck.gl/layers": "^8.9.0-alpha.4", "@material-ui/core": "^4.11.3", "@mui/material": "^5.10.10", + "@emotion/react": "^11.10.0", + "@emotion/styled": "^11.10.0", "@nebula.gl/edit-modes": "^1.0.4", "@nebula.gl/layers": "^1.0.4", "dequal": "^2.0.2", diff --git a/yarn.lock b/yarn.lock index b7fe15db8..28f39573a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -264,7 +264,7 @@ dependencies: "@babel/types" "^7.18.9" -"@babel/helper-module-imports@^7.0.0": +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA== @@ -718,6 +718,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.5" +"@babel/plugin-syntax-jsx@^7.17.12": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0" + integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q== + dependencies: + "@babel/helper-plugin-utils" "^7.18.6" + "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699" @@ -1239,7 +1246,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.17.8", "@babel/runtime@^7.19.0": +"@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0": version "7.19.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78" integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA== @@ -1461,7 +1468,25 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz#d5e0706cf8c6acd8c6032f8d54070af261bbbb2f" integrity sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA== -"@emotion/cache@^11.10.3": +"@emotion/babel-plugin@^11.10.0": + version "11.10.2" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7" + integrity sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/plugin-syntax-jsx" "^7.17.12" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/serialize" "^1.1.0" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.0.13" + +"@emotion/cache@^11.10.0", "@emotion/cache@^11.10.3": version "11.10.3" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.3.tgz#c4f67904fad10c945fea5165c3a5a0583c164b87" integrity sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ== @@ -1494,11 +1519,48 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== +"@emotion/react@^11.10.0": + version "11.10.4" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.4.tgz#9dc6bccbda5d70ff68fdb204746c0e8b13a79199" + integrity sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.10.0" + "@emotion/cache" "^11.10.0" + "@emotion/serialize" "^1.1.0" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.0.tgz#b1f97b1011b09346a40e9796c37a3397b4ea8ea8" + integrity sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA== + dependencies: + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/unitless" "^0.8.0" + "@emotion/utils" "^1.2.0" + csstype "^3.0.2" + "@emotion/sheet@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.0.tgz#771b1987855839e214fc1741bde43089397f7be5" integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w== +"@emotion/styled@^11.10.0": + version "11.10.4" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.4.tgz#e93f84a4d54003c2acbde178c3f97b421fce1cd4" + integrity sha512-pRl4R8Ez3UXvOPfc2bzIoV8u9P97UedgHS4FPX594ntwEuAMA114wlaHvOK24HB48uqfXiGlYIZYCxVJ1R1ttQ== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.10.0" + "@emotion/is-prop-valid" "^1.2.0" + "@emotion/serialize" "^1.1.0" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" + "@emotion/utils" "^1.2.0" + "@emotion/stylis@^0.8.4": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" @@ -1509,6 +1571,16 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== +"@emotion/unitless@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" + integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== + +"@emotion/use-insertion-effect-with-fallbacks@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df" + integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A== + "@emotion/utils@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" @@ -6264,7 +6336,7 @@ babel-plugin-jest-hoist@^26.6.2: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" -babel-plugin-macros@^3.0.1: +babel-plugin-macros@^3.0.1, babel-plugin-macros@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1" integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg== @@ -7645,6 +7717,11 @@ convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: dependencies: safe-buffer "~5.1.1" +convert-source-map@^1.5.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" + integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== + cookie-signature@1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c" @@ -9551,6 +9628,11 @@ find-replace@^3.0.0: dependencies: array-back "^3.0.1" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" @@ -10638,7 +10720,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -16695,10 +16777,10 @@ source-map-url@^0.4.0: resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56" integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw== -source-map@^0.5.0, source-map@^0.5.6: +source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" - integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= + integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ== source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: version "0.6.1" From 541e9cfdb9e9b9e369d546dab28b03b577b5c6de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 19 Oct 2022 19:59:45 +0200 Subject: [PATCH 03/42] Add automatic codemod replacements, mostly all import changes --- .../widgets/FeatureSelectionWidgetUI.test.js | 2 +- .../__tests__/widgets/LegendWidgetUI.test.js | 2 +- .../react-ui/__tests__/widgets/testUtils.js | 16 ++++++++-- packages/react-ui/src/assets/CircleIcon.js | 2 +- packages/react-ui/src/assets/CursorIcon.js | 2 +- packages/react-ui/src/assets/LassoIcon.js | 2 +- packages/react-ui/src/assets/LayerIcon.js | 2 +- packages/react-ui/src/assets/PolygonIcon.js | 2 +- packages/react-ui/src/assets/RectangleIcon.js | 2 +- packages/react-ui/src/assets/UploadIcon.js | 2 +- .../src/custom-components/InputFile.js | 4 ++- packages/react-ui/src/theme/carto-theme.js | 2 +- .../react-ui/src/theme/sections/palette.js | 2 +- packages/react-ui/src/theme/themeUtils.js | 2 +- packages/react-ui/src/widgets/BarWidgetUI.js | 3 +- .../react-ui/src/widgets/CategoryWidgetUI.js | 6 ++-- .../src/widgets/FeatureSelectionWidgetUI.js | 17 ++++------ .../react-ui/src/widgets/FormulaWidgetUI.js | 3 +- .../HistogramWidgetUI/HistogramWidgetUI.js | 3 +- .../useHistogramInteractivity.js | 2 +- packages/react-ui/src/widgets/NoDataAlert.js | 32 +++++++++++-------- .../react-ui/src/widgets/OpacityControl.js | 10 ++---- packages/react-ui/src/widgets/PieWidgetUI.js | 2 +- .../react-ui/src/widgets/RangeWidgetUI.js | 3 +- .../src/widgets/ScatterPlotWidgetUI.js | 2 +- .../widgets/TableWidgetUI/TableWidgetUI.js | 5 +-- .../TimeSeriesWidgetUI/TimeSeriesWidgetUI.js | 4 +-- .../components/TimeSeriesChart.js | 2 +- .../hooks/useTimeSeriesInteractivity.js | 2 +- .../react-ui/src/widgets/WrapperWidgetUI.js | 8 +++-- .../src/widgets/legend/LayerOptionWrapper.js | 2 +- .../src/widgets/legend/LegendCategories.js | 3 +- .../react-ui/src/widgets/legend/LegendIcon.js | 2 +- .../src/widgets/legend/LegendProportion.js | 3 +- .../react-ui/src/widgets/legend/LegendRamp.js | 3 +- .../src/widgets/legend/LegendWidgetUI.js | 12 ++----- .../src/widgets/legend/LegendWrapper.js | 8 ++--- packages/react-ui/src/widgets/legend/Note.js | 3 +- .../react-ui/storybook/.storybook/preview.js | 18 ++++++++--- .../stories/common/Autocomplete.stories.js | 4 +-- .../stories/common/Breadcrumb.stories.js | 4 +-- .../stories/common/Button.stories.js | 4 +-- .../stories/common/ButtonGroup.stories.js | 2 +- .../stories/common/Checkbox.stories.js | 2 +- .../storybook/stories/common/Chip.stories.js | 2 +- .../stories/common/Dialog.stories.js | 2 +- .../stories/common/Divider.stories.js | 4 +-- .../storybook/stories/common/List.stories.js | 6 ++-- .../stories/common/Palette.stories.js | 5 +-- .../storybook/stories/common/Paper.stories.js | 4 ++- .../stories/common/Progress.stories.js | 4 +-- .../storybook/stories/common/Radio.stories.js | 2 +- .../stories/common/Select.stories.js | 4 +-- .../stories/common/Slider.stories.js | 2 +- .../stories/common/Switch.stories.js | 2 +- .../storybook/stories/common/Tabs.stories.js | 4 +-- .../stories/common/Text-field.stories.js | 4 +-- .../stories/common/ToggleButton.stories.js | 10 +++--- .../stories/common/Tooltip.stories.js | 4 ++- .../stories/common/Typography.stories.js | 2 +- .../FeatureSelectionWidgetUI.stories.js | 2 +- .../stories/widgetsUI/InputFile.stories.js | 4 +-- .../widgetsUI/TableWidgetUI.stories.js | 4 +-- .../widgetsUI/WrapperWidgetUI.stories.js | 8 ++--- .../src/layers/FeatureSelectionLayer.js | 2 +- .../src/widgets/GeocoderWidget.js | 6 ++-- .../src/widgets/TimeSeriesWidget.js | 2 +- 67 files changed, 166 insertions(+), 141 deletions(-) diff --git a/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js index 2d52df6b7..c27c56e05 100644 --- a/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { render, queryByAttribute, fireEvent } from '@testing-library/react'; import FeatureSelectionWidgetUI from '../../src/widgets/FeatureSelectionWidgetUI'; -import { capitalize } from '@material-ui/core'; +import { capitalize } from '@mui/material'; import CursorIcon from '../../src/assets/CursorIcon'; import PolygonIcon from '../../src/assets/PolygonIcon'; import RectangleIcon from '../../src/assets/RectangleIcon'; diff --git a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js index 3e28392d8..83d90479e 100644 --- a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { getMaterialUIContext } from './testUtils'; import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI'; import { fireEvent, render, screen } from '@testing-library/react'; -import { Typography } from '@material-ui/core'; +import { Typography } from '@mui/material'; import { act } from '@testing-library/react-hooks'; const CUSTOM_CHILDREN = Legend custom; diff --git a/packages/react-ui/__tests__/widgets/testUtils.js b/packages/react-ui/__tests__/widgets/testUtils.js index 49407d9a4..b5525cee0 100644 --- a/packages/react-ui/__tests__/widgets/testUtils.js +++ b/packages/react-ui/__tests__/widgets/testUtils.js @@ -1,6 +1,12 @@ import React from 'react'; -import { createTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core'; +import { + createTheme, + responsiveFontSizes, + ThemeProvider, + StyledEngineProvider, + adaptV4Theme +} from '@mui/material'; import * as echarts from 'echarts'; import { cartoThemeOptions } from '../../src/theme/carto-theme'; @@ -18,11 +24,15 @@ export function currencyFormatter(value) { } export function getMaterialUIContext(children) { - return {children}; + return ( + + {children} + + ); } function getTheme() { - let theme = createTheme(cartoThemeOptions); + let theme = createTheme(adaptV4Theme(cartoThemeOptions)); theme = responsiveFontSizes(theme, { breakpoints: ['sm'], disableAlign: false, diff --git a/packages/react-ui/src/assets/CircleIcon.js b/packages/react-ui/src/assets/CircleIcon.js index c8a3694ae..ba2e6bce7 100644 --- a/packages/react-ui/src/assets/CircleIcon.js +++ b/packages/react-ui/src/assets/CircleIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function CircleIcon(props) { return ( diff --git a/packages/react-ui/src/assets/CursorIcon.js b/packages/react-ui/src/assets/CursorIcon.js index 408a7da69..82906144f 100644 --- a/packages/react-ui/src/assets/CursorIcon.js +++ b/packages/react-ui/src/assets/CursorIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function CursorIcon(props) { return ( diff --git a/packages/react-ui/src/assets/LassoIcon.js b/packages/react-ui/src/assets/LassoIcon.js index 073782492..0d07fb140 100644 --- a/packages/react-ui/src/assets/LassoIcon.js +++ b/packages/react-ui/src/assets/LassoIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function LassoIcon(props) { return ( diff --git a/packages/react-ui/src/assets/LayerIcon.js b/packages/react-ui/src/assets/LayerIcon.js index a4b487f9f..ee2c06250 100644 --- a/packages/react-ui/src/assets/LayerIcon.js +++ b/packages/react-ui/src/assets/LayerIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function LayerIcon(props) { return ( diff --git a/packages/react-ui/src/assets/PolygonIcon.js b/packages/react-ui/src/assets/PolygonIcon.js index 510b07433..5fac25832 100644 --- a/packages/react-ui/src/assets/PolygonIcon.js +++ b/packages/react-ui/src/assets/PolygonIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function PolygonIcon(props) { return ( diff --git a/packages/react-ui/src/assets/RectangleIcon.js b/packages/react-ui/src/assets/RectangleIcon.js index 4bfc558c3..ce151e178 100644 --- a/packages/react-ui/src/assets/RectangleIcon.js +++ b/packages/react-ui/src/assets/RectangleIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function RectangleIcon(props) { return ( diff --git a/packages/react-ui/src/assets/UploadIcon.js b/packages/react-ui/src/assets/UploadIcon.js index 58ecabce0..0ff8d6227 100644 --- a/packages/react-ui/src/assets/UploadIcon.js +++ b/packages/react-ui/src/assets/UploadIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { SvgIcon } from '@material-ui/core'; +import { SvgIcon } from '@mui/material'; export default function RectangleIcon(props) { return ( diff --git a/packages/react-ui/src/custom-components/InputFile.js b/packages/react-ui/src/custom-components/InputFile.js index 4623e0dc3..3b9e87f2e 100644 --- a/packages/react-ui/src/custom-components/InputFile.js +++ b/packages/react-ui/src/custom-components/InputFile.js @@ -1,6 +1,8 @@ import React, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, Button, makeStyles, Typography } from '@material-ui/core'; +import { Box, Button, Typography } from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ inputFile: { diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js index 5b41ad2e7..0a9c7b74b 100644 --- a/packages/react-ui/src/theme/carto-theme.js +++ b/packages/react-ui/src/theme/carto-theme.js @@ -39,7 +39,7 @@ export const cartoThemeOptions = { } }, palette: { - type: 'light', + mode: 'light', contrastThreshold: 3, tonalOffset: 0.2, common: { ...commonPalette.common }, diff --git a/packages/react-ui/src/theme/sections/palette.js b/packages/react-ui/src/theme/sections/palette.js index 0071b67e3..a34085662 100644 --- a/packages/react-ui/src/theme/sections/palette.js +++ b/packages/react-ui/src/theme/sections/palette.js @@ -1,4 +1,4 @@ -import { alpha, darken, lighten } from '@material-ui/core'; +import { alpha, darken, lighten } from '@mui/material'; const COLOR_BLACK = '#2C3032'; const COLOR_WHITE = '#FFFFFF'; diff --git a/packages/react-ui/src/theme/themeUtils.js b/packages/react-ui/src/theme/themeUtils.js index bcfba3122..03d74d619 100644 --- a/packages/react-ui/src/theme/themeUtils.js +++ b/packages/react-ui/src/theme/themeUtils.js @@ -1,4 +1,4 @@ -import createSpacing from '@material-ui/core/styles/createSpacing'; +import { createSpacing } from '@mui/material/styles'; import { SPACING } from './themeConstants'; export const spacing = createSpacing(SPACING); diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index 96a097bc0..654a792ab 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -1,7 +1,8 @@ import React, { useCallback, useMemo } from 'react'; import PropTypes from 'prop-types'; import ReactEcharts from '../custom-components/echarts-for-react'; -import { Grid, Link, Typography, useTheme, makeStyles, darken } from '@material-ui/core'; +import { Grid, Link, Typography, useTheme, darken } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import detectTouchScreen from './utils/detectTouchScreen'; import { processFormatterRes } from './utils/formatterUtils'; diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index 72bd6990d..cf4aed440 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -10,10 +10,10 @@ import { SvgIcon, TextField, Typography, - makeStyles, Tooltip -} from '@material-ui/core'; -import { Skeleton } from '@material-ui/lab'; +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { Skeleton } from '@mui/material'; import { animateValues } from './utils/animations'; diff --git a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js index 11c5d98fa..f792837fa 100644 --- a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js +++ b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js @@ -6,14 +6,14 @@ import { Chip, Divider, IconButton, - makeStyles, Menu, MenuItem, Tooltip, Typography, useTheme -} from '@material-ui/core'; -import { ArrowDropDown } from '@material-ui/icons'; +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { ArrowDropDown } from '@mui/icons-material'; import PropTypes from 'prop-types'; function FeatureSelectionWidgetUI({ @@ -125,9 +125,7 @@ function Helper({ hasMode, enabled, isEdit, children }) { return ( @@ -184,9 +182,7 @@ function SelectedModeViewer({ if (modes?.length && selectedMode) { const foundMode = modes.find(({ id: modeId }) => modeId === selectedMode); if (!foundMode) { - throw new Error( - 'Selected mode not supported' - ); + throw new Error('Selected mode not supported'); } return foundMode; } else { @@ -200,7 +196,7 @@ function SelectedModeViewer({ return ( - + {icon} @@ -284,6 +280,7 @@ function ModesSelector({ aria-expanded={open ? 'true' : undefined} className={classes.btn} onClick={handleClick} + size='large' > diff --git a/packages/react-ui/src/widgets/FormulaWidgetUI.js b/packages/react-ui/src/widgets/FormulaWidgetUI.js index bc52e7460..ac785e511 100644 --- a/packages/react-ui/src/widgets/FormulaWidgetUI.js +++ b/packages/react-ui/src/widgets/FormulaWidgetUI.js @@ -1,6 +1,7 @@ import React, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, makeStyles } from '@material-ui/core'; +import { Box } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { animateValue } from './utils/animations'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index a52298fac..8134919ac 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -2,7 +2,8 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { useMemo } from 'react'; import ReactEcharts from '../../custom-components/echarts-for-react'; -import { darken, Grid, Link, makeStyles, Typography, useTheme } from '@material-ui/core'; +import { darken, Grid, Link, Typography, useTheme } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { processFormatterRes } from '../utils/formatterUtils'; import detectTouchscreen from '../utils/detectTouchScreen'; import useHistogramInteractivity from './useHistogramInteractivity'; diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js b/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js index 26f558c90..7c6c59369 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import { useCallback, useEffect, useMemo, useState } from 'react'; const events = {}; diff --git a/packages/react-ui/src/widgets/NoDataAlert.js b/packages/react-ui/src/widgets/NoDataAlert.js index 3291e7b2d..f5a6c9581 100644 --- a/packages/react-ui/src/widgets/NoDataAlert.js +++ b/packages/react-ui/src/widgets/NoDataAlert.js @@ -1,22 +1,28 @@ import React from 'react'; -import { Alert, AlertTitle } from '@material-ui/lab'; -import { Box, Typography } from '@material-ui/core'; +import { Alert, AlertTitle } from '@mui/material'; +import { Box, Typography } from '@mui/material'; -function AlertBody ({ color = undefined, children }) { +function AlertBody({ color = undefined, children }) { return children ? ( - - {children} - -) : ( - -)} + + + {children} + + + ) : ( + + ); +} function NoDataAlert({ title = 'No data available', body = 'There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust the Map View.', severity = undefined }) { - return severity ? ( {title && {title}} @@ -24,10 +30,10 @@ function NoDataAlert({ ) : ( - {title && {title}} - {body} + {title && {title}} + {body} - ) + ); } export default NoDataAlert; diff --git a/packages/react-ui/src/widgets/OpacityControl.js b/packages/react-ui/src/widgets/OpacityControl.js index 693e73b5e..d141a15e4 100644 --- a/packages/react-ui/src/widgets/OpacityControl.js +++ b/packages/react-ui/src/widgets/OpacityControl.js @@ -1,12 +1,6 @@ import React from 'react'; -import { - Box, - Grid, - InputAdornment, - makeStyles, - Slider, - TextField -} from '@material-ui/core'; +import { Box, Grid, InputAdornment, Slider, TextField } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import LayerOptionWrapper from './legend/LayerOptionWrapper'; const useOpacityControlStyles = makeStyles(({ spacing }) => ({ diff --git a/packages/react-ui/src/widgets/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI.js index bf9e54a99..e4dc67671 100644 --- a/packages/react-ui/src/widgets/PieWidgetUI.js +++ b/packages/react-ui/src/widgets/PieWidgetUI.js @@ -1,7 +1,7 @@ import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react'; import PropTypes from 'prop-types'; import ReactEcharts from '../custom-components/echarts-for-react'; -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import { disableSerie, setColor } from './utils/chartUtils'; import { processFormatterRes } from './utils/formatterUtils'; diff --git a/packages/react-ui/src/widgets/RangeWidgetUI.js b/packages/react-ui/src/widgets/RangeWidgetUI.js index 4ce72e9ea..66346f5a8 100644 --- a/packages/react-ui/src/widgets/RangeWidgetUI.js +++ b/packages/react-ui/src/widgets/RangeWidgetUI.js @@ -1,6 +1,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, Link, makeStyles, Slider, TextField } from '@material-ui/core'; +import { Box, Link, Slider, TextField } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { debounce } from '@carto/react-core'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js index 4a5038c2f..1b694d2bb 100644 --- a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js +++ b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import PropTypes from 'prop-types'; import React, { useRef, useState, useEffect } from 'react'; import { areChartPropsEqual } from './utils/chartUtils'; diff --git a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js index 3719abe79..120a50f13 100644 --- a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js +++ b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js @@ -7,10 +7,11 @@ import { TableContainer, TableHead, TableRow, - makeStyles, TableSortLabel, TablePagination -} from '@material-ui/core'; +} from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const useStyles = makeStyles((theme) => ({ tableHeadCellLabel: { diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js index 077dacfe1..d8e485e38 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js @@ -7,9 +7,9 @@ import { SvgIcon, Typography, capitalize, - makeStyles, Link -} from '@material-ui/core'; +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'; import TimeSeriesChart from './components/TimeSeriesChart'; import { TimeSeriesProvider, useTimeSeriesContext } from './hooks/TimeSeriesContext'; diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js index bee481302..ff65c5ab4 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import React, { useMemo, useState } from 'react'; import ReactEcharts from '../../../custom-components/echarts-for-react'; import useTimeSeriesInteractivity from '../hooks/useTimeSeriesInteractivity'; diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js index d31346a6c..f2a101f53 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js @@ -1,4 +1,4 @@ -import { useTheme } from '@material-ui/core'; +import { useTheme } from '@mui/material'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { useTimeSeriesContext } from './TimeSeriesContext'; diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index a6b068eb0..0d155a5d3 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -1,6 +1,6 @@ import React, { useState, createRef } from 'react'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import makeStyles from '@mui/styles/makeStyles'; import { Box, Button, @@ -13,8 +13,8 @@ import { MenuItem, Tooltip, Typography -} from '@material-ui/core'; -import { ExpandLess, ExpandMore, MoreVert } from '@material-ui/icons'; +} from '@mui/material'; +import { ExpandLess, ExpandMore, MoreVert } from '@mui/icons-material'; /* Options props must have this format: @@ -157,6 +157,7 @@ function WrapperWidgetUI(props) { aria-label={action.label} onClick={action.action} className={classes.iconAction} + size='large' > {action.icon} @@ -217,6 +218,7 @@ function WrapperWidgetUI(props) { aria-haspopup='true' onClick={handleClick} className={classes.iconAction} + size='large' > {optionsIcon} diff --git a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js index 5ae8955f1..ed7514f11 100644 --- a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js +++ b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Typography } from '@material-ui/core'; +import { Box, Typography } from '@mui/material'; export default function LayerOptionWrapper({ className = '', label, children }) { return ( diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index 5e5528c4a..ddff240cf 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Box, Grid, makeStyles, Tooltip, Typography } from '@material-ui/core'; +import { Box, Grid, Tooltip, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; diff --git a/packages/react-ui/src/widgets/legend/LegendIcon.js b/packages/react-ui/src/widgets/legend/LegendIcon.js index 7aab1d90f..c193e47c6 100644 --- a/packages/react-ui/src/widgets/legend/LegendIcon.js +++ b/packages/react-ui/src/widgets/legend/LegendIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Grid, Typography } from '@material-ui/core'; +import { Box, Grid, Typography } from '@mui/material'; import PropTypes from 'prop-types'; const ICON_SIZE = 16; diff --git a/packages/react-ui/src/widgets/legend/LegendProportion.js b/packages/react-ui/src/widgets/legend/LegendProportion.js index f271efb47..0afc90e17 100644 --- a/packages/react-ui/src/widgets/legend/LegendProportion.js +++ b/packages/react-ui/src/widgets/legend/LegendProportion.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Box, Grid, makeStyles, Typography } from '@material-ui/core'; +import { Box, Grid, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import PropTypes from 'prop-types'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/legend/LegendRamp.js b/packages/react-ui/src/widgets/legend/LegendRamp.js index 21e25d9ba..1f5eb122d 100644 --- a/packages/react-ui/src/widgets/legend/LegendRamp.js +++ b/packages/react-ui/src/widgets/legend/LegendRamp.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Grid, makeStyles, Tooltip, Typography } from '@material-ui/core'; +import { Grid, Tooltip, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; import { getMinMax } from './LegendProportion'; diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index ef20a300f..f1a1320a5 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -1,14 +1,6 @@ import React, { createRef, Fragment } from 'react'; -import { - Box, - Button, - Collapse, - Divider, - Grid, - makeStyles, - SvgIcon, - Typography -} from '@material-ui/core'; +import { Box, Button, Collapse, Divider, Grid, SvgIcon, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import LegendWrapper from './LegendWrapper'; import LegendCategories from './LegendCategories'; import LegendIcon from './LegendIcon'; diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js index 56676393c..93e3390f0 100644 --- a/packages/react-ui/src/widgets/legend/LegendWrapper.js +++ b/packages/react-ui/src/widgets/legend/LegendWrapper.js @@ -5,15 +5,15 @@ import { Collapse, Grid, Icon, - makeStyles, Switch, Tooltip, Typography -} from '@material-ui/core'; -import { ExpandLess, ExpandMore } from '@material-ui/icons'; +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { ExpandLess, ExpandMore } from '@mui/icons-material'; import Note from './Note'; import LayerIcon from '../../assets/LayerIcon'; -import { ToggleButton } from '@material-ui/lab'; +import { ToggleButton } from '@mui/material'; import OpacityControl from '../OpacityControl'; const useStyles = makeStyles((theme) => ({ diff --git a/packages/react-ui/src/widgets/legend/Note.js b/packages/react-ui/src/widgets/legend/Note.js index 76da22dab..f5c25d7a8 100644 --- a/packages/react-ui/src/widgets/legend/Note.js +++ b/packages/react-ui/src/widgets/legend/Note.js @@ -1,4 +1,5 @@ -import { Box, makeStyles, Typography } from '@material-ui/core'; +import { Box, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import React from 'react'; const useNoteStyles = makeStyles(() => ({ diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index 1cdf0617c..820ff7d24 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -1,9 +1,15 @@ import React from 'react'; import { withDesign } from 'storybook-addon-designs'; -import { createTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core'; +import { + createTheme, + responsiveFontSizes, + ThemeProvider, + StyledEngineProvider, + adaptV4Theme +} from '@mui/material'; import { cartoThemeOptions } from '../../src/theme/carto-theme'; -let theme = createTheme(cartoThemeOptions); +let theme = createTheme(adaptV4Theme(cartoThemeOptions)); theme = responsiveFontSizes(theme, { breakpoints: ['sm'], disableAlign: false, @@ -12,9 +18,11 @@ theme = responsiveFontSizes(theme, { export const decorators = [ (Story) => ( - - - + + + + + ) ]; diff --git a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js index d287719ab..3cb2b637c 100644 --- a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import Autocomplete from '@material-ui/lab/Autocomplete'; -import { Grid, TextField } from '@material-ui/core'; +import Autocomplete from '@mui/material/Autocomplete'; +import { Grid, TextField } from '@mui/material'; const options = { title: 'Common/Autocomplete', diff --git a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js index 585daac3e..947cb5c2a 100644 --- a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js +++ b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Breadcrumbs, Link, Typography } from '@material-ui/core'; -import { NavigateNext, CloudCircle, Home, Style } from '@material-ui/icons'; +import { Breadcrumbs, Link, Typography } from '@mui/material'; +import { NavigateNext, CloudCircle, Home, Style } from '@mui/icons-material'; const options = { title: 'Common/Breadcrumbs', diff --git a/packages/react-ui/storybook/stories/common/Button.stories.js b/packages/react-ui/storybook/stories/common/Button.stories.js index 651ad0d63..0f6e26258 100644 --- a/packages/react-ui/storybook/stories/common/Button.stories.js +++ b/packages/react-ui/storybook/stories/common/Button.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, IconButton, Grid, SvgIcon } from '@material-ui/core'; +import { Button, IconButton, Grid, SvgIcon } from '@mui/material'; const options = { title: 'Common/Button', @@ -64,7 +64,7 @@ const PlaygroundTemplate = ({ label, icon, ...rest }) => ( - + diff --git a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js index 58819e61d..64aabad34 100644 --- a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, Grid, ButtonGroup } from '@material-ui/core'; +import { Button, Grid, ButtonGroup } from '@mui/material'; const options = { title: 'Common/Button Group', diff --git a/packages/react-ui/storybook/stories/common/Checkbox.stories.js b/packages/react-ui/storybook/stories/common/Checkbox.stories.js index 5577d8821..7c9d07b20 100644 --- a/packages/react-ui/storybook/stories/common/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/common/Checkbox.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Checkbox, FormControlLabel, Grid } from '@material-ui/core'; +import { Checkbox, FormControlLabel, Grid } from '@mui/material'; const options = { title: 'Common/Checkbox', diff --git a/packages/react-ui/storybook/stories/common/Chip.stories.js b/packages/react-ui/storybook/stories/common/Chip.stories.js index 8a529f611..024336f5f 100644 --- a/packages/react-ui/storybook/stories/common/Chip.stories.js +++ b/packages/react-ui/storybook/stories/common/Chip.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Avatar, Chip, Grid } from '@material-ui/core'; +import { Avatar, Chip, Grid } from '@mui/material'; const options = { title: 'Common/Chip', diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/common/Dialog.stories.js index 6fe6481c7..c2281dc84 100644 --- a/packages/react-ui/storybook/stories/common/Dialog.stories.js +++ b/packages/react-ui/storybook/stories/common/Dialog.stories.js @@ -10,7 +10,7 @@ import { Grid, Slide, TextField -} from '@material-ui/core'; +} from '@mui/material'; const options = { title: 'Common/Dialog', diff --git a/packages/react-ui/storybook/stories/common/Divider.stories.js b/packages/react-ui/storybook/stories/common/Divider.stories.js index 44ddf5adf..effa846a4 100644 --- a/packages/react-ui/storybook/stories/common/Divider.stories.js +++ b/packages/react-ui/storybook/stories/common/Divider.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Divider, Grid, List, ListItem, ListItemText } from '@material-ui/core'; +import { Divider, Grid, List, ListItem, ListItemText } from '@mui/material'; import { FormatAlignLeft, FormatAlignCenter, @@ -7,7 +7,7 @@ import { FormatBold, FormatItalic, FormatUnderlined -} from '@material-ui/icons'; +} from '@mui/icons-material'; const options = { title: 'Common/Divider', diff --git a/packages/react-ui/storybook/stories/common/List.stories.js b/packages/react-ui/storybook/stories/common/List.stories.js index 628d9de58..96ff2a083 100644 --- a/packages/react-ui/storybook/stories/common/List.stories.js +++ b/packages/react-ui/storybook/stories/common/List.stories.js @@ -14,10 +14,10 @@ import { ListItemSecondaryAction, ListItemText, Typography, - makeStyles, Switch, Paper -} from '@material-ui/core'; +} from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { Drafts, Delete, @@ -26,7 +26,7 @@ import { Home, Inbox, Star -} from '@material-ui/icons'; +} from '@mui/icons-material'; const options = { title: 'Common/List', diff --git a/packages/react-ui/storybook/stories/common/Palette.stories.js b/packages/react-ui/storybook/stories/common/Palette.stories.js index d8646eeb3..53869507e 100644 --- a/packages/react-ui/storybook/stories/common/Palette.stories.js +++ b/packages/react-ui/storybook/stories/common/Palette.stories.js @@ -1,6 +1,7 @@ import React from 'react'; -import { Box, Grid, makeStyles, Typography } from '@material-ui/core'; -import { useTheme } from '@material-ui/core/styles'; +import { Box, Grid, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { useTheme } from '@mui/material/styles'; const options = { title: 'CARTO Theme/Palette', diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/common/Paper.stories.js index ced2232ba..a516cb95e 100644 --- a/packages/react-ui/storybook/stories/common/Paper.stories.js +++ b/packages/react-ui/storybook/stories/common/Paper.stories.js @@ -1,5 +1,7 @@ import React from 'react'; -import { Grid, makeStyles, Paper, Typography } from '@material-ui/core'; +import { Grid, Paper, Typography } from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const options = { title: 'Common/Paper', diff --git a/packages/react-ui/storybook/stories/common/Progress.stories.js b/packages/react-ui/storybook/stories/common/Progress.stories.js index b7e247727..0be46f21f 100644 --- a/packages/react-ui/storybook/stories/common/Progress.stories.js +++ b/packages/react-ui/storybook/stories/common/Progress.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Box, Button, CircularProgress, Grid, LinearProgress } from '@material-ui/core'; -import CheckIcon from '@material-ui/icons/Check'; +import { Box, Button, CircularProgress, Grid, LinearProgress } from '@mui/material'; +import CheckIcon from '@mui/icons-material/Check'; const options = { title: 'Common/Progress', diff --git a/packages/react-ui/storybook/stories/common/Radio.stories.js b/packages/react-ui/storybook/stories/common/Radio.stories.js index 26615ffcb..e32578d0d 100644 --- a/packages/react-ui/storybook/stories/common/Radio.stories.js +++ b/packages/react-ui/storybook/stories/common/Radio.stories.js @@ -6,7 +6,7 @@ import { Grid, Radio, RadioGroup -} from '@material-ui/core'; +} from '@mui/material'; const options = { title: 'Common/Radio', diff --git a/packages/react-ui/storybook/stories/common/Select.stories.js b/packages/react-ui/storybook/stories/common/Select.stories.js index 748bcd4f9..7ce9e7178 100644 --- a/packages/react-ui/storybook/stories/common/Select.stories.js +++ b/packages/react-ui/storybook/stories/common/Select.stories.js @@ -8,8 +8,8 @@ import { MenuItem, Typography, Select -} from '@material-ui/core'; -import { Visibility } from '@material-ui/icons'; +} from '@mui/material'; +import { Visibility } from '@mui/icons-material'; const options = { title: 'Common/Select', diff --git a/packages/react-ui/storybook/stories/common/Slider.stories.js b/packages/react-ui/storybook/stories/common/Slider.stories.js index 2519018c9..fec2d1587 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/common/Slider.stories.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Grid, Slider, TextField, Tooltip } from '@material-ui/core'; +import { Grid, Slider, TextField, Tooltip } from '@mui/material'; const options = { title: 'Common/Slider', diff --git a/packages/react-ui/storybook/stories/common/Switch.stories.js b/packages/react-ui/storybook/stories/common/Switch.stories.js index e9d7eec9f..d45f9fe5b 100644 --- a/packages/react-ui/storybook/stories/common/Switch.stories.js +++ b/packages/react-ui/storybook/stories/common/Switch.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { FormControlLabel, Grid, Switch } from '@material-ui/core'; +import { FormControlLabel, Grid, Switch } from '@mui/material'; const options = { title: 'Common/Switch', diff --git a/packages/react-ui/storybook/stories/common/Tabs.stories.js b/packages/react-ui/storybook/stories/common/Tabs.stories.js index 78a4540ec..c49ffc963 100644 --- a/packages/react-ui/storybook/stories/common/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/common/Tabs.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Tab, Tabs } from '@material-ui/core'; -import { Layers, LocalOffer, Map, Place, Store } from '@material-ui/icons'; +import { Tab, Tabs } from '@mui/material'; +import { Layers, LocalOffer, Map, Place, Store } from '@mui/icons-material'; const options = { title: 'Common/Tabs', diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/common/Text-field.stories.js index d92b5a024..22406c2b6 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/common/Text-field.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { Grid, InputAdornment, TextField, Typography } from '@material-ui/core'; -import { Visibility } from '@material-ui/icons'; +import { Grid, InputAdornment, TextField, Typography } from '@mui/material'; +import { Visibility } from '@mui/icons-material'; const options = { title: 'Common/Text Field', diff --git a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js index b61d40885..a767fd35d 100644 --- a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js @@ -1,9 +1,9 @@ import React from 'react'; -import { ToggleButtonGroup, ToggleButton } from '@material-ui/lab'; -import DirectionsWalkIcon from '@material-ui/icons/DirectionsWalk'; -import DriveEtaIcon from '@material-ui/icons/DriveEta'; -import AirplanemodeActiveIcon from '@material-ui/icons/AirplanemodeActive'; -import TrainIcon from '@material-ui/icons/Train'; +import { ToggleButtonGroup, ToggleButton } from '@mui/material'; +import DirectionsWalkIcon from '@mui/icons-material/DirectionsWalk'; +import DriveEtaIcon from '@mui/icons-material/DriveEta'; +import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive'; +import TrainIcon from '@mui/icons-material/Train'; const options = { title: 'Common/Toggle Button', diff --git a/packages/react-ui/storybook/stories/common/Tooltip.stories.js b/packages/react-ui/storybook/stories/common/Tooltip.stories.js index 6c3e9ab22..ee55db134 100644 --- a/packages/react-ui/storybook/stories/common/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/common/Tooltip.stories.js @@ -1,5 +1,7 @@ import React from 'react'; -import { Button, Grid, Tooltip, Typography, makeStyles } from '@material-ui/core'; +import { Button, Grid, Tooltip, Typography } from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const options = { title: 'Common/Tooltip', diff --git a/packages/react-ui/storybook/stories/common/Typography.stories.js b/packages/react-ui/storybook/stories/common/Typography.stories.js index 2acff78cd..60661c069 100644 --- a/packages/react-ui/storybook/stories/common/Typography.stories.js +++ b/packages/react-ui/storybook/stories/common/Typography.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; const options = { title: 'CARTO Theme/Typography', diff --git a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js index b8bc249b5..79d9c0264 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js @@ -1,4 +1,4 @@ -import { Box } from '@material-ui/core'; +import { Box } from '@mui/material'; import React, { useState } from 'react'; import FeatureSelectionWidgetUI from '../../../src/widgets/FeatureSelectionWidgetUI'; import CursorIcon from '../../../src/assets/CursorIcon'; diff --git a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js b/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js index e0431032a..d3098b540 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/InputFile.stories.js @@ -5,10 +5,10 @@ import { FormControl, InputLabel, Typography -} from '@material-ui/core'; +} from '@mui/material'; import React, { useState } from 'react'; import InputFile from '../../../src/custom-components/InputFile'; -import { Alert } from '@material-ui/lab'; +import { Alert } from '@mui/material'; import UploadIcon from '../../../src/assets/UploadIcon'; const options = { diff --git a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js index 7bb6a6d95..dbdbcc7a3 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import TableWidgetUI from '../../../src/widgets/TableWidgetUI/TableWidgetUI'; -import { Box, Typography } from '@material-ui/core'; -import LocationOnIcon from '@material-ui/icons/LocationOn'; +import { Box, Typography } from '@mui/material'; +import LocationOnIcon from '@mui/icons-material/LocationOn'; import { columns, rows } from '../../../src/widgets/TableWidgetUI/mockData'; const options = { diff --git a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js index 0b52520ea..d8923c1aa 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js @@ -1,8 +1,8 @@ import React from 'react'; -import { Typography } from '@material-ui/core'; -import ColorizeIcon from '@material-ui/icons/Colorize'; -import MenuIcon from '@material-ui/icons/Menu'; -import AddLocationIcon from '@material-ui/icons/AddLocation'; +import { Typography } from '@mui/material'; +import ColorizeIcon from '@mui/icons-material/Colorize'; +import MenuIcon from '@mui/icons-material/Menu'; +import AddLocationIcon from '@mui/icons-material/AddLocation'; import WrapperWidgetUI from '.../../../src/widgets/WrapperWidgetUI'; import { buildReactPropsAsString } from '../../utils'; diff --git a/packages/react-widgets/src/layers/FeatureSelectionLayer.js b/packages/react-widgets/src/layers/FeatureSelectionLayer.js index 5de9a7cfc..9dd97b340 100644 --- a/packages/react-widgets/src/layers/FeatureSelectionLayer.js +++ b/packages/react-widgets/src/layers/FeatureSelectionLayer.js @@ -8,7 +8,7 @@ import { selectFeatureSelectionMode } from '@carto/react-redux'; import { EDIT_MODES } from '@carto/react-core'; -import { hexToRgb, useTheme } from '@material-ui/core'; +import { hexToRgb, useTheme } from '@mui/material'; import EditableCartoGeoJsonLayer from './EditableCartoGeoJsonLayer'; import useEventManager from './useEventManager'; import MaskLayer from './MaskLayer'; diff --git a/packages/react-widgets/src/widgets/GeocoderWidget.js b/packages/react-widgets/src/widgets/GeocoderWidget.js index 9cd36d809..5009d887f 100644 --- a/packages/react-widgets/src/widgets/GeocoderWidget.js +++ b/packages/react-widgets/src/widgets/GeocoderWidget.js @@ -4,8 +4,8 @@ import { PropTypes } from 'prop-types'; import { addLayer, setViewState } from '@carto/react-redux'; -import { CircularProgress, InputBase, Paper, SvgIcon } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; +import { CircularProgress, InputBase, Paper, SvgIcon } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import useGeocoderWidgetController from '../hooks/useGeocoderWidgetController'; const useStyles = makeStyles((theme) => ({ @@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({ }, input: { ...theme.typography.body2, - width: `calc(100% - ${theme.spacing(5)}px)`, + width: `calc(100% - ${theme.spacing(5)})`, marginLeft: theme.spacing(1) } })); diff --git a/packages/react-widgets/src/widgets/TimeSeriesWidget.js b/packages/react-widgets/src/widgets/TimeSeriesWidget.js index 6508b016b..555339758 100644 --- a/packages/react-widgets/src/widgets/TimeSeriesWidget.js +++ b/packages/react-widgets/src/widgets/TimeSeriesWidget.js @@ -12,7 +12,7 @@ import { AggregationTypes, _FilterTypes as FilterTypes } from '@carto/react-core'; -import { capitalize, Menu, MenuItem, SvgIcon, Typography } from '@material-ui/core'; +import { capitalize, Menu, MenuItem, SvgIcon, Typography } from '@mui/material'; import { PropTypes } from 'prop-types'; import { columnAggregationOn } from './utils/propTypesFns'; import useWidgetFetch from '../hooks/useWidgetFetch'; From 372890a294349a2e8fe7bf4657295c43246fb92e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 19 Oct 2022 20:12:26 +0200 Subject: [PATCH 04/42] Partial and basic typing for new palette elements, using mui --- packages/react-ui/src/theme/carto-theme.d.ts | 11 ++++++++--- packages/react-ui/src/theme/sections/palette.js | 1 + 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index a911c981a..a0c4cbd2d 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -1,10 +1,15 @@ -import { Theme, ThemeOptions } from '@material-ui/core'; -import { Palette, PaletteColor } from '@material-ui/core/styles/createPalette'; +import { Theme, ThemeOptions } from '@mui/material'; +import { Palette, PaletteColor } from '@mui/material' +/* + TODO: Review if this set of changes in the type of Palette and PaletteColor, to properly use theme + from TypeScript clients, is still required and if it needs to be fully extended to reflect the new + color structure (custom keys & props) +*/ export const cartoThemeOptions: ThemeOptions; type Modify = Omit & R -type CustomPaletteColor = Modify +type CustomPaletteColor = Modify type CustomPalette = Modify Date: Wed, 19 Oct 2022 20:13:49 +0200 Subject: [PATCH 05/42] Fully remove material-ui v4 references from lib --- package.json | 3 - packages/react-ui/package.json | 3 - packages/react-widgets/package.json | 1 - yarn.lock | 193 +--------------------------- 4 files changed, 2 insertions(+), 198 deletions(-) diff --git a/package.json b/package.json index a1e648c8a..0b40e3c5e 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,6 @@ "@deck.gl/google-maps": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@deck.gl/mesh-layers": "^8.9.0-alpha.4", - "@material-ui/core": "^4.11.3", - "@material-ui/icons": "^4.11.2", - "@material-ui/lab": "^4.0.0-alpha.57", "@mui/icons-material": "^5.10.9", "@mui/lab": "^5.0.0-alpha.104", "@mui/material": "^5.10.10", diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 909934ade..81b2b669d 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -78,9 +78,6 @@ "peerDependencies": { "@carto/react-core": "^1.5.0-alpha.4", "@mui/icons-material": "^5.10.9", - "@material-ui/core": "^4.11.3", - "@material-ui/icons": "^4.11.2", - "@material-ui/lab": "^4.0.0-alpha.57", "@mui/lab": "^5.0.0-alpha.104", "@mui/material": "^5.10.10", "@mui/styles": "^5.10.10", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 95c4a025c..547d57e5f 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -72,7 +72,6 @@ "@carto/react-workers": "^1.5.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", - "@material-ui/core": "^4.11.3", "@mui/material": "^5.10.10", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", diff --git a/yarn.lock b/yarn.lock index 28f39573a..9f72e61ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1239,7 +1239,7 @@ core-js-pure "^3.19.0" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.9", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.9", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.16.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a" integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA== @@ -1497,11 +1497,6 @@ "@emotion/weak-memoize" "^0.3.0" stylis "4.0.13" -"@emotion/hash@^0.8.0": - version "0.8.0" - resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" - integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== - "@emotion/hash@^0.9.0": version "0.9.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" @@ -2891,88 +2886,6 @@ dependencies: "@mapbox/point-geometry" "~0.1.0" -"@material-ui/core@^4.11.3": - version "4.12.3" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca" - integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/styles" "^4.11.4" - "@material-ui/system" "^4.12.1" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.2" - "@types/react-transition-group" "^4.2.0" - clsx "^1.0.4" - hoist-non-react-statics "^3.3.2" - popper.js "1.16.1-lts" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - react-transition-group "^4.4.0" - -"@material-ui/icons@^4.11.2": - version "4.11.2" - resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" - integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ== - dependencies: - "@babel/runtime" "^7.4.4" - -"@material-ui/lab@^4.0.0-alpha.57": - version "4.0.0-alpha.60" - resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2" - integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/utils" "^4.11.2" - clsx "^1.0.4" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - -"@material-ui/styles@^4.11.4": - version "4.11.4" - resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d" - integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew== - dependencies: - "@babel/runtime" "^7.4.4" - "@emotion/hash" "^0.8.0" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.2" - clsx "^1.0.4" - csstype "^2.5.2" - hoist-non-react-statics "^3.3.2" - jss "^10.5.1" - jss-plugin-camel-case "^10.5.1" - jss-plugin-default-unit "^10.5.1" - jss-plugin-global "^10.5.1" - jss-plugin-nested "^10.5.1" - jss-plugin-props-sort "^10.5.1" - jss-plugin-rule-value-function "^10.5.1" - jss-plugin-vendor-prefixer "^10.5.1" - prop-types "^15.7.2" - -"@material-ui/system@^4.12.1": - version "4.12.1" - resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c" - integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/utils" "^4.11.2" - csstype "^2.5.2" - prop-types "^15.7.2" - -"@material-ui/types@5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2" - integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A== - -"@material-ui/utils@^4.11.2": - version "4.11.2" - resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a" - integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA== - dependencies: - "@babel/runtime" "^7.4.4" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - "@math.gl/core@3.5.6", "@math.gl/core@^3.5.0", "@math.gl/core@^3.5.1": version "3.5.6" resolved "https://registry.yarnpkg.com/@math.gl/core/-/core-3.5.6.tgz#d849db978d7d4a4984bb63868adc693975d97ce7" @@ -5192,13 +5105,6 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.2.0": - version "4.4.4" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" - integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug== - dependencies: - "@types/react" "*" - "@types/react-transition-group@^4.4.5": version "4.4.5" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416" @@ -7298,11 +7204,6 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4= -clsx@^1.0.4: - version "1.1.1" - resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" - integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== - clsx@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" @@ -8017,11 +7918,6 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" -csstype@^2.5.2: - version "2.6.19" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa" - integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ== - csstype@^3.0.2: version "3.0.10" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5" @@ -12370,15 +12266,6 @@ jsprim@^1.2.2: json-schema "0.4.0" verror "1.10.0" -jss-plugin-camel-case@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz#4921b568b38d893f39736ee8c4c5f1c64670aaf7" - integrity sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww== - dependencies: - "@babel/runtime" "^7.3.1" - hyphenate-style-name "^1.0.3" - jss "10.9.0" - jss-plugin-camel-case@^10.9.2: version "10.9.2" resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.2.tgz#76dddfa32f9e62d17daa4e3504991fd0933b89e1" @@ -12388,14 +12275,6 @@ jss-plugin-camel-case@^10.9.2: hyphenate-style-name "^1.0.3" jss "10.9.2" -jss-plugin-default-unit@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz#bb23a48f075bc0ce852b4b4d3f7582bc002df991" - integrity sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.9.0" - jss-plugin-default-unit@^10.9.2: version "10.9.2" resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.2.tgz#3e7f4a1506b18d8fe231554fd982439feb2a9c53" @@ -12404,14 +12283,6 @@ jss-plugin-default-unit@^10.9.2: "@babel/runtime" "^7.3.1" jss "10.9.2" -jss-plugin-global@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz#fc07a0086ac97aca174e37edb480b69277f3931f" - integrity sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.9.0" - jss-plugin-global@^10.9.2: version "10.9.2" resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.2.tgz#e7f2ad4a5e8e674fb703b04b57a570b8c3e5c2c2" @@ -12420,15 +12291,6 @@ jss-plugin-global@^10.9.2: "@babel/runtime" "^7.3.1" jss "10.9.2" -jss-plugin-nested@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz#cc1c7d63ad542c3ccc6e2c66c8328c6b6b00f4b3" - integrity sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.9.0" - tiny-warning "^1.0.2" - jss-plugin-nested@^10.9.2: version "10.9.2" resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.2.tgz#3aa2502816089ecf3981e1a07c49b276d67dca63" @@ -12438,14 +12300,6 @@ jss-plugin-nested@^10.9.2: jss "10.9.2" tiny-warning "^1.0.2" -jss-plugin-props-sort@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz#30e9567ef9479043feb6e5e59db09b4de687c47d" - integrity sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.9.0" - jss-plugin-props-sort@^10.9.2: version "10.9.2" resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.2.tgz#645f6c8f179309667b3e6212f66b59a32fb3f01f" @@ -12454,15 +12308,6 @@ jss-plugin-props-sort@^10.9.2: "@babel/runtime" "^7.3.1" jss "10.9.2" -jss-plugin-rule-value-function@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz#379fd2732c0746fe45168011fe25544c1a295d67" - integrity sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg== - dependencies: - "@babel/runtime" "^7.3.1" - jss "10.9.0" - tiny-warning "^1.0.2" - jss-plugin-rule-value-function@^10.9.2: version "10.9.2" resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.2.tgz#9afe07596e477123cbf11120776be6a64494541f" @@ -12472,15 +12317,6 @@ jss-plugin-rule-value-function@^10.9.2: jss "10.9.2" tiny-warning "^1.0.2" -jss-plugin-vendor-prefixer@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz#aa9df98abfb3f75f7ed59a3ec50a5452461a206a" - integrity sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA== - dependencies: - "@babel/runtime" "^7.3.1" - css-vendor "^2.0.8" - jss "10.9.0" - jss-plugin-vendor-prefixer@^10.9.2: version "10.9.2" resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.2.tgz#410a0f3b9f8dbbfba58f4d329134df4849aa1237" @@ -12490,16 +12326,6 @@ jss-plugin-vendor-prefixer@^10.9.2: css-vendor "^2.0.8" jss "10.9.2" -jss@10.9.0, jss@^10.5.1: - version "10.9.0" - resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.0.tgz#7583ee2cdc904a83c872ba695d1baab4b59c141b" - integrity sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw== - dependencies: - "@babel/runtime" "^7.3.1" - csstype "^3.0.2" - is-in-browser "^1.1.3" - tiny-warning "^1.0.2" - jss@10.9.2, jss@^10.9.2: version "10.9.2" resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.2.tgz#9379be1f195ef98011dfd31f9448251bd61b95a9" @@ -15061,11 +14887,6 @@ polygon-clipping@^0.15.3: dependencies: splaytree "^3.1.0" -popper.js@1.16.1-lts: - version "1.16.1-lts" - resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05" - integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA== - portfinder@^1.0.23: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" @@ -15639,7 +15460,7 @@ react-inspector@^5.1.0: is-dom "^1.0.0" prop-types "^15.0.0" -react-is@17.0.2, "react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2: +react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== @@ -15671,16 +15492,6 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== -react-transition-group@^4.4.0: - version "4.4.2" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" - integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== - dependencies: - "@babel/runtime" "^7.5.5" - dom-helpers "^5.0.1" - loose-envify "^1.4.0" - prop-types "^15.6.2" - react-transition-group@^4.4.5: version "4.4.5" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" From 32906744bb968aa9744e028e5ba81550fd682641 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 19 Oct 2022 20:41:50 +0200 Subject: [PATCH 06/42] Fix import for createSpacing --- packages/react-ui/src/theme/themeUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/src/theme/themeUtils.js b/packages/react-ui/src/theme/themeUtils.js index 03d74d619..a58d7d546 100644 --- a/packages/react-ui/src/theme/themeUtils.js +++ b/packages/react-ui/src/theme/themeUtils.js @@ -1,4 +1,4 @@ -import { createSpacing } from '@mui/material/styles'; +import { createSpacing } from '@mui/system'; import { SPACING } from './themeConstants'; export const spacing = createSpacing(SPACING); From 6e495eed720df6ee0a44393d6d0a5abb6fa60e2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 19 Oct 2022 21:17:53 +0200 Subject: [PATCH 07/42] Remove material-ui externals from webpack configuration --- packages/react-ui/webpack.config.js | 4 ++-- packages/react-widgets/webpack.config.js | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/webpack.config.js b/packages/react-ui/webpack.config.js index c2535112b..9f7060384 100644 --- a/packages/react-ui/webpack.config.js +++ b/packages/react-ui/webpack.config.js @@ -6,8 +6,8 @@ const webpackBaseConfig = require('../../webpack.base'); const webpackConfig = { ...webpackBaseConfig, - externals: [ - /^@material-ui\/.+$/, + externals: [ + /^@mui\/.+$/, '@carto/react-core', 'echarts', 'echarts-for-react', diff --git a/packages/react-widgets/webpack.config.js b/packages/react-widgets/webpack.config.js index 42dd34784..bda6e27fe 100644 --- a/packages/react-widgets/webpack.config.js +++ b/packages/react-widgets/webpack.config.js @@ -9,7 +9,6 @@ const webpackConfig = { externals: [ /^@carto\/react-.+$/, /^@deck.gl\/.+$/, - /^@material-ui\/.+$/, /^@mui\/.+$/, /^@nebula.gl\/.+$/, 'react', From 96d003a4904f0d1c876c42252ce180b9711a66ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Wed, 19 Oct 2022 21:20:49 +0200 Subject: [PATCH 08/42] Adapt webpack externals with new peer deps, due to mui v5 upgrade --- packages/react-ui/webpack.config.js | 4 +++- packages/react-widgets/webpack.config.js | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/webpack.config.js b/packages/react-ui/webpack.config.js index 9f7060384..230e6aa50 100644 --- a/packages/react-ui/webpack.config.js +++ b/packages/react-ui/webpack.config.js @@ -7,8 +7,10 @@ const webpackBaseConfig = require('../../webpack.base'); const webpackConfig = { ...webpackBaseConfig, externals: [ - /^@mui\/.+$/, '@carto/react-core', + /^@mui\/.+$/, + /^@emotion\/.+$/, + 'styled-components', 'echarts', 'echarts-for-react', 'react', diff --git a/packages/react-widgets/webpack.config.js b/packages/react-widgets/webpack.config.js index bda6e27fe..6bb6ed60d 100644 --- a/packages/react-widgets/webpack.config.js +++ b/packages/react-widgets/webpack.config.js @@ -10,6 +10,7 @@ const webpackConfig = { /^@carto\/react-.+$/, /^@deck.gl\/.+$/, /^@mui\/.+$/, + /^@emotion\/.+$/, /^@nebula.gl\/.+$/, 'react', 'react-dom', From 5c2f854467d29e32a67dd9f706a389f6dbe6913c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Thu, 20 Oct 2022 19:51:35 +0200 Subject: [PATCH 09/42] Use custom render with providers in test files for react-ui --- .../__tests__/widgets/BarWidgetUI.test.js | 2 +- .../widgets/CategoryWidgetUI.test.js | 38 +++++++++++-------- .../widgets/FeatureSelectionWidgetUI.test.js | 2 +- .../__tests__/widgets/FormulaWidgetUI.test.js | 2 +- .../widgets/HistogramWidgetUI.test.js | 2 +- .../__tests__/widgets/LegendWidgetUI.test.js | 3 +- .../__tests__/widgets/PieWidgetUI.test.js | 4 +- .../__tests__/widgets/RangeWidgetUI.test.js | 2 +- .../widgets/ScatterPlotWidget.test.js | 2 +- .../__tests__/widgets/TableWidgetUI.test.js | 2 +- .../widgets/TimeSeriesWidgetUI.test.js | 2 +- .../__tests__/widgets/WrapperWidgetUI.test.js | 2 +- .../widgets/legend/LegendCategories.test.js | 2 +- .../widgets/legend/LegendIcon.test.js | 2 +- .../widgets/legend/LegendProportion.test.js | 2 +- .../widgets/legend/LegendRamp.test.js | 6 ++- .../__tests__/widgets/utils/testUtils.js | 22 +++++++++++ 17 files changed, 64 insertions(+), 33 deletions(-) diff --git a/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js b/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js index ef1c19521..23bbd309a 100644 --- a/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import BarWidgetUI from '../../src/widgets/BarWidgetUI'; import { getMaterialUIContext, mockEcharts } from './testUtils'; diff --git a/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js b/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js index 3b18d33bc..5de8e77ff 100644 --- a/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import userEvent from '@testing-library/user-event'; import CategoryWidgetUI from '../../src/widgets/CategoryWidgetUI'; import { currencyFormatter } from './testUtils'; @@ -170,25 +170,33 @@ describe('CategoryWidgetUI', () => { }); describe('when data name is not string', () => { - const NotStringData = [{ - name: true, - value: 100 - }, { - name: false, - value: 101 - }] + const NotStringData = [ + { + name: true, + value: 100 + }, + { + name: false, + value: 101 + } + ]; test('should render properly', () => { render(); - + expect(screen.getByText(/true/)).toBeInTheDocument(); expect(screen.getByText(/101/)).toBeInTheDocument(); }); test('should maintain typing when filters', () => { - const onSelectedCategoriesChangeFn = jest.fn() - render(); - userEvent.click(screen.getByText(/true/)) - expect(onSelectedCategoriesChangeFn).toHaveBeenCalledWith([true]) - }) - }) + const onSelectedCategoriesChangeFn = jest.fn(); + render( + + ); + userEvent.click(screen.getByText(/true/)); + expect(onSelectedCategoriesChangeFn).toHaveBeenCalledWith([true]); + }); + }); }); diff --git a/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js index c27c56e05..ecdd46cdb 100644 --- a/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, queryByAttribute, fireEvent } from '@testing-library/react'; +import { render, queryByAttribute, fireEvent } from '../widgets/utils/testUtils'; import FeatureSelectionWidgetUI from '../../src/widgets/FeatureSelectionWidgetUI'; import { capitalize } from '@mui/material'; import CursorIcon from '../../src/assets/CursorIcon'; diff --git a/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js index 28c286474..d9aa4809c 100644 --- a/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../widgets/utils/testUtils'; import FormulaWidgetUI from '../../src/widgets/FormulaWidgetUI'; import { currencyFormatter } from './testUtils'; diff --git a/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js b/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js index 37d392fd0..5fc9e3c84 100644 --- a/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import HistogramWidgetUI from '../../src/widgets/HistogramWidgetUI/HistogramWidgetUI'; import { getMaterialUIContext, mockEcharts } from './testUtils'; diff --git a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js index 83d90479e..09980b52c 100644 --- a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js @@ -1,9 +1,8 @@ import React from 'react'; import { getMaterialUIContext } from './testUtils'; import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI'; -import { fireEvent, render, screen } from '@testing-library/react'; +import { fireEvent, render, screen } from '../widgets/utils/testUtils'; import { Typography } from '@mui/material'; -import { act } from '@testing-library/react-hooks'; const CUSTOM_CHILDREN = Legend custom; diff --git a/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js b/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js index 75a283f84..87b420fad 100644 --- a/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render } from '../widgets/utils/testUtils'; import PieWidgetUI from '../../src/widgets/PieWidgetUI'; import { getMaterialUIContext, mockEcharts } from './testUtils'; @@ -35,4 +35,4 @@ describe('PieWidgetUI', () => { test('with selected categories', () => { render(); }); -}); \ No newline at end of file +}); diff --git a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js index dbc50ddb3..18ada24e9 100644 --- a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, screen, waitFor } from '@testing-library/react'; +import { render, fireEvent, screen, waitFor } from '../widgets/utils/testUtils'; import { getMaterialUIContext } from './testUtils'; import RangeWidgetUI from '../../src/widgets/RangeWidgetUI'; diff --git a/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js b/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js index 76f3ef886..037bc046a 100644 --- a/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js +++ b/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render } from '../widgets/utils/testUtils'; import ScatterPlotWidgetUI from '../../src/widgets/ScatterPlotWidgetUI'; import { getMaterialUIContext, mockEcharts } from './testUtils'; diff --git a/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js b/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js index d7c6e93d9..bb4fabbe0 100644 --- a/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import TableWidgetUI from '../../src/widgets/TableWidgetUI/TableWidgetUI'; import { getMaterialUIContext } from './testUtils'; import { columns, rows } from '../../src/widgets/TableWidgetUI/mockData'; diff --git a/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js b/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js index 7b85c1669..d57d6106d 100644 --- a/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen, act, fireEvent, waitFor } from '@testing-library/react'; +import { render, screen, act, fireEvent, waitFor } from '../widgets/utils/testUtils'; import TimeSeriesWidgetUI from '../../src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI'; import { getMaterialUIContext, mockEcharts } from './testUtils'; import { GroupDateTypes } from '@carto/react-core'; diff --git a/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js b/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js index 628983ef9..fe143aaf6 100644 --- a/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js @@ -4,7 +4,7 @@ import { fireEvent, screen, waitForElementToBeRemoved -} from '@testing-library/react'; +} from '../widgets/utils/testUtils'; import WrapperWidgetUI from '../../src/widgets/WrapperWidgetUI'; import FormulaWidgetUI from '../../src/widgets/FormulaWidgetUI'; diff --git a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js index 04c229704..bc1582ab4 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendCategories from '../../../src/widgets/legend/LegendCategories'; import { getPalette } from '../../../src/utils/palette'; diff --git a/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js b/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js index 2425feef7..69605b83c 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendIcon.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendIcon from '../../../src/widgets/legend/LegendIcon'; const ICON = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxkZWZzPgogICAgICAgIDxmaWx0ZXIgaWQ9InFsbTY3aXI1MWEiPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlR3JhcGhpYyIgdmFsdWVzPSIwIDAgMCAwIDAuMTcyNTQ5IDAgMCAwIDAgMC4xODgyMzUgMCAwIDAgMCAwLjE5NjA3OCAwIDAgMCAxLjAwMDAwMCAwIi8+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnPgogICAgICAgICAgICA8ZyBmaWx0ZXI9InVybCgjcWxtNjdpcjUxYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNDIgLTQ2NCkgdHJhbnNsYXRlKDIyMiA0NDgpIj4KICAgICAgICAgICAgICAgIDxnIGZpbGw9IiMyQzMwMzIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwIDE2KSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyIDBjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnMtNS4zNzMgMTItMTIgMTJTMCAxOC42MjcgMCAxMiA1LjM3MyAwIDEyIDB6IiBvcGFjaXR5PSIuMiIvPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjQiLz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==`; diff --git a/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js b/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js index cf0d7aff0..3a2758ed9 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendProportion.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendProportion from '../../../src/widgets/legend/LegendProportion'; const DEFAULT_LEGEND = { diff --git a/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js b/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js index c9b342021..59b2353a3 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen } from '../../widgets/utils/testUtils'; import LegendRamp from '../../../src/widgets/legend/LegendRamp'; import { getPalette } from '../../../src/utils/palette'; @@ -62,7 +62,9 @@ describe('LegendRamp', () => { ); }); test('renders formatted labels correctly', () => { - render(); + render( + + ); expect(screen.queryByText('0 km')).toBeInTheDocument(); expect(screen.queryByText('200 km')).toBeInTheDocument(); diff --git a/packages/react-ui/__tests__/widgets/utils/testUtils.js b/packages/react-ui/__tests__/widgets/utils/testUtils.js index e69de29bb..d0c4cee61 100644 --- a/packages/react-ui/__tests__/widgets/utils/testUtils.js +++ b/packages/react-ui/__tests__/widgets/utils/testUtils.js @@ -0,0 +1,22 @@ +// https://testing-library.com/docs/react-testing-library/setup/ + +import React from 'react'; +import { render } from '@testing-library/react'; + +import { ThemeProvider } from '@mui/material'; +import { createTheme } from '@mui/material/styles'; + +const theme = createTheme(); // for now we don't need real theme for tests + +const AllTheProviders = ({ children }) => { + return {children}; +}; + +const customRender = (ui, options) => + render(ui, { wrapper: AllTheProviders, ...options }); + +// re-export everything +export * from '@testing-library/react'; + +// override render method +export { customRender as render }; From 183a018d5a3c33faf174c4219b462808cc9d2c7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Thu, 20 Oct 2022 20:50:14 +0200 Subject: [PATCH 10/42] Remove custom getMaterialUIContext in favour of render override for tests --- .../__tests__/widgets/BarWidgetUI.test.js | 40 +++++++++---------- .../widgets/HistogramWidgetUI.test.js | 5 +-- .../__tests__/widgets/LegendWidgetUI.test.js | 3 +- .../__tests__/widgets/PieWidgetUI.test.js | 9 ++--- .../__tests__/widgets/RangeWidgetUI.test.js | 6 +-- .../widgets/ScatterPlotWidget.test.js | 9 ++--- .../__tests__/widgets/TableWidgetUI.test.js | 4 +- .../widgets/TimeSeriesWidgetUI.test.js | 9 ++--- .../react-ui/__tests__/widgets/testUtils.js | 24 ++++------- .../__tests__/widgets/utils/testUtils.js | 16 +++++++- 10 files changed, 58 insertions(+), 67 deletions(-) diff --git a/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js b/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js index 23bbd309a..db5e29700 100644 --- a/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import BarWidgetUI from '../../src/widgets/BarWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('BarWidgetUI', () => { beforeAll(() => { @@ -16,15 +16,14 @@ describe('BarWidgetUI', () => { const X_AXIS_DATA = ['column_1', 'column_2', 'column_3']; - const Widget = (props) => - getMaterialUIContext( - {}} - {...props} - /> - ); + const Widget = (props) => ( + {}} + {...props} + /> + ); const Y_AXIS_DATA_MULTIPLE = [ [1, 2, 3], @@ -39,17 +38,16 @@ describe('BarWidgetUI', () => { 6: 'Column 2' }; - const WidgetMultiple = (props) => - getMaterialUIContext( - {}} - {...props} - /> - ); + const WidgetMultiple = (props) => ( + {}} + {...props} + /> + ); test('all selected', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js b/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js index 5fc9e3c84..9d2a31646 100644 --- a/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import HistogramWidgetUI from '../../src/widgets/HistogramWidgetUI/HistogramWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('HistogramWidgetUI', () => { beforeAll(() => { @@ -22,8 +22,7 @@ describe('HistogramWidgetUI', () => { onSelectedBarsChange }; - const Widget = (props) => - getMaterialUIContext(); + const Widget = (props) => ; test('all selected', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js index 09980b52c..2e65744b2 100644 --- a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js @@ -1,5 +1,4 @@ import React from 'react'; -import { getMaterialUIContext } from './testUtils'; import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI'; import { fireEvent, render, screen } from '../widgets/utils/testUtils'; import { Typography } from '@mui/material'; @@ -117,7 +116,7 @@ describe('LegendWidgetUI', () => { } } ]; - const Widget = (props) => getMaterialUIContext(); + const Widget = (props) => ; test('single legend', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js b/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js index 87b420fad..cd1db9fa9 100644 --- a/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/PieWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { render } from '../widgets/utils/testUtils'; import PieWidgetUI from '../../src/widgets/PieWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('PieWidgetUI', () => { beforeAll(() => { @@ -23,10 +23,9 @@ describe('PieWidgetUI', () => { } ]; - const Widget = (props) => - getMaterialUIContext( - {}} {...props} /> - ); + const Widget = (props) => ( + {}} {...props} /> + ); test('renders correctly', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js index 18ada24e9..ffb806eac 100644 --- a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js @@ -1,11 +1,9 @@ import React from 'react'; import { render, fireEvent, screen, waitFor } from '../widgets/utils/testUtils'; -import { getMaterialUIContext } from './testUtils'; import RangeWidgetUI from '../../src/widgets/RangeWidgetUI'; -describe('SliderWidgetUI', () => { - const Widget = (props) => - getMaterialUIContext(); +describe('RangeWidgetUI', () => { + const Widget = (props) => ; test('renders with default props', () => { const { container } = render(); diff --git a/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js b/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js index 037bc046a..63242579c 100644 --- a/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js +++ b/packages/react-ui/__tests__/widgets/ScatterPlotWidget.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { render } from '../widgets/utils/testUtils'; import ScatterPlotWidgetUI from '../../src/widgets/ScatterPlotWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; describe('ScatterPlotWidgetUI', () => { beforeAll(() => { @@ -16,10 +16,9 @@ describe('ScatterPlotWidgetUI', () => { [2, 4], [3, 6] ]; - const Widget = (props) => - getMaterialUIContext( - {}} {...props} /> - ); + const Widget = (props) => ( + {}} {...props} /> + ); test('renders correctly', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js b/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js index bb4fabbe0..8dfaccec0 100644 --- a/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/TableWidgetUI.test.js @@ -1,12 +1,10 @@ import React from 'react'; import { render, fireEvent, screen } from '../widgets/utils/testUtils'; import TableWidgetUI from '../../src/widgets/TableWidgetUI/TableWidgetUI'; -import { getMaterialUIContext } from './testUtils'; import { columns, rows } from '../../src/widgets/TableWidgetUI/mockData'; describe('TableWidgetUI', () => { - const Widget = (props) => - getMaterialUIContext(); + const Widget = (props) => ; test('renders with default props', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js b/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js index d57d6106d..6ea4c6a9e 100644 --- a/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { render, screen, act, fireEvent, waitFor } from '../widgets/utils/testUtils'; import TimeSeriesWidgetUI from '../../src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI'; -import { getMaterialUIContext, mockEcharts } from './testUtils'; +import { mockEcharts } from './testUtils'; import { GroupDateTypes } from '@carto/react-core'; describe('TimeSeriesWidgetUI', () => { @@ -46,10 +46,9 @@ describe('TimeSeriesWidgetUI', () => { stepSize: GroupDateTypes.WEEKS }; - const Widget = (props) => - getMaterialUIContext( - - ); + const Widget = (props) => ( + + ); test('renders correctly', () => { render(); diff --git a/packages/react-ui/__tests__/widgets/testUtils.js b/packages/react-ui/__tests__/widgets/testUtils.js index b5525cee0..8a1fd18d8 100644 --- a/packages/react-ui/__tests__/widgets/testUtils.js +++ b/packages/react-ui/__tests__/widgets/testUtils.js @@ -23,23 +23,13 @@ export function currencyFormatter(value) { }; } -export function getMaterialUIContext(children) { - return ( - - {children} - - ); -} - -function getTheme() { - let theme = createTheme(adaptV4Theme(cartoThemeOptions)); - theme = responsiveFontSizes(theme, { - breakpoints: ['sm'], - disableAlign: false, - factor: 2 - }); - return theme; -} +// export function getMaterialUIContext(children) { +// return ( +// +// {children} +// +// ); +// } export const mockEcharts = { init() { diff --git a/packages/react-ui/__tests__/widgets/utils/testUtils.js b/packages/react-ui/__tests__/widgets/utils/testUtils.js index d0c4cee61..971476468 100644 --- a/packages/react-ui/__tests__/widgets/utils/testUtils.js +++ b/packages/react-ui/__tests__/widgets/utils/testUtils.js @@ -4,9 +4,21 @@ import React from 'react'; import { render } from '@testing-library/react'; import { ThemeProvider } from '@mui/material'; -import { createTheme } from '@mui/material/styles'; +import { createTheme, responsiveFontSizes } from '@mui/material'; -const theme = createTheme(); // for now we don't need real theme for tests +import { cartoThemeOptions } from '../../../src/theme/carto-theme'; + +const theme = getTheme(); // for now we don't need real theme for tests + +function getTheme() { + let theme = createTheme(cartoThemeOptions); + theme = responsiveFontSizes(theme, { + breakpoints: ['sm'], + disableAlign: false, + factor: 2 + }); + return theme; +} const AllTheProviders = ({ children }) => { return {children}; From efc77305551197a4e910f560448ab04fec664f4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Thu, 20 Oct 2022 22:30:41 +0200 Subject: [PATCH 11/42] Fix LegendWidgetUI tests, due to some changes in the rendering details --- .../__tests__/widgets/LegendWidgetUI.test.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js index 2e65744b2..a766ebe80 100644 --- a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js @@ -198,13 +198,13 @@ describe('LegendWidgetUI', () => { expect(screen.getByText('Test')).toBeInTheDocument(); }); - test('legend with opacity control', () => { + test('legend with opacity control', async() => { const legendConfig = DATA[7]; const onChangeOpacity = jest.fn(); const container = render( ); - const layerOptionsBtn = screen.getByTitle('Layer options'); + const layerOptionsBtn = await screen.findByLabelText('Layer options'); expect(layerOptionsBtn).toBeInTheDocument(); layerOptionsBtn.click(); expect(screen.getByText('Opacity')).toBeInTheDocument(); @@ -252,22 +252,23 @@ describe('LegendWidgetUI', () => { expect(screen.getByText('Legend custom')).toBeInTheDocument(); }); - test('with custom layer options', () => { + test('with custom layer options', async() => { const layer = DATA[8]; render( ); - const layerOptionsBtn = screen.getByTitle('Layer options'); + const layerOptionsBtn = await screen.findByLabelText('Layer options'); expect(layerOptionsBtn).toBeInTheDocument(); layerOptionsBtn.click(); expect(screen.getByText('PaletteSelector')).toBeInTheDocument(); }); - test('with custom layer options - unknown option', () => { + + test('with custom layer options - unknown option', async() => { const layer = { ...DATA[8], options: ['unknown'] }; render( ); - const layerOptionsBtn = screen.getByTitle('Layer options'); + const layerOptionsBtn = await screen.findByLabelText('Layer options'); expect(layerOptionsBtn).toBeInTheDocument(); layerOptionsBtn.click(); expect(screen.getByText('Unknown layer option')).toBeInTheDocument(); From ccb6237b5f9d753dec5e22568e3a2a37d5b97e7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Thu, 20 Oct 2022 22:33:44 +0200 Subject: [PATCH 12/42] Fix FeatureSelectionWidgetUI tests, due to some changes in the rendering details --- .../__tests__/widgets/FeatureSelectionWidgetUI.test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js index ecdd46cdb..c400034e8 100644 --- a/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js @@ -79,9 +79,9 @@ describe('FeatureSelectionWidgetUI', () => { expect(onEnabledChange).toHaveBeenCalledWith(false); }); - test('selectionModes and editModes are rendered correctly in modes menu', () => { + test('selectionModes and editModes are rendered correctly in modes menu', async () => { const rendered = render(); - const menuBtn = rendered.getByTitle('Select a mode'); + const menuBtn = await rendered.findByLabelText('Select a mode'); // Open menu fireEvent.click(menuBtn); // Once the menu is opened, check everything is okey rendered @@ -90,13 +90,13 @@ describe('FeatureSelectionWidgetUI', () => { ); }); - test('select mode event is correctly raised', () => { + test('select mode event is correctly raised', async () => { const onSelectMode = jest.fn(); const rendered = render( ); - const menuBtn = rendered.getByTitle('Select a mode'); + const menuBtn = await rendered.findByLabelText('Select a mode'); // Open menu fireEvent.click(menuBtn); From 2dfc0be0b83f6e0a14d8ff1c70d8ba4d5dc4b2bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 21 Oct 2022 17:07:27 +0200 Subject: [PATCH 13/42] Fix RangeWidgetUI tests by changing selectors (temporarily?) --- .../__tests__/widgets/RangeWidgetUI.test.js | 43 +++++++++++++------ 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js index ffb806eac..9c68d3ddf 100644 --- a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js @@ -7,8 +7,16 @@ describe('RangeWidgetUI', () => { test('renders with default props', () => { const { container } = render(); - const minValue = screen.getByRole('slider', { name: 'min value' }); - const maxValue = screen.getByRole('slider', { name: 'max value' }); + + // const minValue = screen.getByLabelText('min value'); + // const maxValue = screen.getByLabelText('max value'); + const minValue = document.querySelector( + 'input[type="range"][aria-label="min value"]' + ); + const maxValue = document.querySelector( + 'input[type="range"][aria-label="max value"]' + ); + const inputMin = screen.getByRole('spinbutton', { name: 'min value' }); const inputMax = screen.getByRole('spinbutton', { name: 'max value' }); @@ -29,8 +37,8 @@ describe('RangeWidgetUI', () => { test('renders specified limits', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); expect(minLimit).toHaveAttribute('aria-valuemin', '0'); expect(minLimit).toHaveAttribute('aria-valuemax', '100'); @@ -46,8 +54,8 @@ describe('RangeWidgetUI', () => { test('renders specified limits with same min and max values', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); expect(minLimit).toHaveAttribute('aria-valuemin', '0'); expect(minLimit).toHaveAttribute('aria-valuemax', '100'); @@ -63,8 +71,9 @@ describe('RangeWidgetUI', () => { test('renders specified limits and values', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); + const inputMin = screen.getByRole('spinbutton', { name: 'min value' }); const inputMax = screen.getByRole('spinbutton', { name: 'max value' }); @@ -85,8 +94,8 @@ describe('RangeWidgetUI', () => { test('renders specified limits out of min-max range', () => { const { container } = render(); - const minLimit = screen.getByRole('slider', { name: 'min limit' }); - const maxLimit = screen.getByRole('slider', { name: 'max limit' }); + const minLimit = screen.getByLabelText('min limit'); + const maxLimit = screen.getByLabelText('max limit'); expect(minLimit).toHaveAttribute('aria-valuemin', '0'); expect(minLimit).toHaveAttribute('aria-valuemax', '100'); @@ -99,13 +108,21 @@ describe('RangeWidgetUI', () => { expect(container.getElementsByClassName('MuiSlider-mark').length).toBe(0); }); - test('On selected method is called when we change slider values', async () => { + test('on selected method is called when we change slider values', async () => { const mockOnSelectedRangeChange = jest.fn(); render(); + const inputMin = screen.getByRole('spinbutton', { name: 'min value' }); const inputMax = screen.getByRole('spinbutton', { name: 'max value' }); - const minValue = screen.getByRole('slider', { name: 'min value' }); - const maxValue = screen.getByRole('slider', { name: 'max value' }); + + // const minValue = screen.getByLabelText('min value'); + // const maxValue = screen.getByLabelText('max value'); + const minValue = document.querySelector( + 'input[type="range"][aria-label="min value"]' + ); + const maxValue = document.querySelector( + 'input[type="range"][aria-label="max value"]' + ); fireEvent.change(inputMin, { target: { value: 20 } }); fireEvent.blur(inputMin); From fb8ae5a5eba6771bf531dad8de99425fe8e44e17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 21 Oct 2022 17:15:05 +0200 Subject: [PATCH 14/42] Remove adaptV4Theme from Storybook preview --- packages/react-ui/storybook/.storybook/preview.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index 820ff7d24..45506ab64 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -4,12 +4,11 @@ import { createTheme, responsiveFontSizes, ThemeProvider, - StyledEngineProvider, - adaptV4Theme + StyledEngineProvider } from '@mui/material'; import { cartoThemeOptions } from '../../src/theme/carto-theme'; -let theme = createTheme(adaptV4Theme(cartoThemeOptions)); +let theme = createTheme(cartoThemeOptions); theme = responsiveFontSizes(theme, { breakpoints: ['sm'], disableAlign: false, From 83075950e4fdb4b865bf84448746e13dd7ec2479 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 21 Oct 2022 17:28:44 +0200 Subject: [PATCH 15/42] Set a new alpha name for experimental release --- CHANGELOG.md | 1 + lerna.json | 4 ++-- packages/react-api/package.json | 10 +++++----- packages/react-auth/package.json | 6 +++--- packages/react-basemaps/package.json | 6 +++--- packages/react-core/package.json | 4 ++-- packages/react-redux/package.json | 8 ++++---- packages/react-ui/package.json | 6 +++--- packages/react-widgets/package.json | 14 +++++++------- packages/react-workers/package.json | 6 +++--- 10 files changed, 33 insertions(+), 32 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a608a8d6..8a9fedda7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Split carto-theme into sections [#495](https://github.com/CartoDB/carto-react/pull/495) - Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488) - Update Storybook to v6.5.12 [#487](https://github.com/CartoDB/carto-react/pull/487) +- Upgrade from Material UI v4 to MUI v5 [#501](https://github.com/CartoDB/carto-react/pull/501) ## 1.5 diff --git a/lerna.json b/lerna.json index 9e0f84b8e..7d7926dc3 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "1.5.0-alpha.4" -} + "version": "2.0.0-mui-v5-alpha.0" +} \ No newline at end of file diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 25b40bb5a..dc432d01d 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "1.5.0-alpha.4", + "version": "2.0.0-mui-v5-alpha.0", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", - "@carto/react-redux": "^1.5.0-alpha.4", - "@carto/react-workers": "^1.5.0-alpha.4", + "@carto/react-core": "^2.0.0-mui-v5-alpha.0", + "@carto/react-redux": "^2.0.0-mui-v5-alpha.0", + "@carto/react-workers": "^2.0.0-mui-v5-alpha.0", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", @@ -75,4 +75,4 @@ "react-redux": "^7.2.2", "redux": "^4.0.5" } -} +} \ No newline at end of file diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index d249849be..31efed798 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "1.5.0-alpha.4", + "version": "2.0.0-mui-v5-alpha.0", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ @@ -64,8 +64,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", + "@carto/react-core": "^2.0.0-mui-v5-alpha.0", "react": "^17.0.1", "react-dom": "^17.0.1" } -} +} \ No newline at end of file diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index a77735e44..28a466e71 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "1.5.0-alpha.4", + "version": "2.0.0-mui-v5-alpha.0", "description": "CARTO for React - Basemaps", "keywords": [ "carto", @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", + "@carto/react-core": "^2.0.0-mui-v5-alpha.0", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" } -} +} \ No newline at end of file diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 1786a1bfe..93b9f605e 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "1.5.0-alpha.4", + "version": "2.0.0-mui-v5-alpha.0", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ @@ -73,4 +73,4 @@ "h3-js": "^3.7.2", "quadbin": "^0.1.4" } -} +} \ No newline at end of file diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index af19c6016..0fea4070f 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "1.5.0-alpha.4", + "version": "2.0.0-mui-v5-alpha.0", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ @@ -63,10 +63,10 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", - "@carto/react-workers": "^1.5.0-alpha.4", + "@carto/react-core": "^2.0.0-mui-v5-alpha.0", + "@carto/react-workers": "^2.0.0-mui-v5-alpha.0", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" } -} +} \ No newline at end of file diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 81b2b669d..2ea24e45c 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "1.5.0-alpha.4", + "version": "2.0.0-mui-v5-alpha.0", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ @@ -76,7 +76,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^1.5.0-alpha.4", + "@carto/react-core": "^2.0.0-mui-v5-alpha.0", "@mui/icons-material": "^5.10.9", "@mui/lab": "^5.0.0-alpha.104", "@mui/material": "^5.10.10", @@ -90,4 +90,4 @@ "react": "^17.0.1", "react-dom": "^17.0.1" } -} +} \ No newline at end of file diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index 547d57e5f..d6e27f14e 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "1.5.0-alpha.4", + "version": "2.0.0-mui-v5-alpha.0", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "^1.5.0-alpha.4", - "@carto/react-core": "^1.5.0-alpha.4", - "@carto/react-redux": "^1.5.0-alpha.4", - "@carto/react-ui": "^1.5.0-alpha.4", - "@carto/react-workers": "^1.5.0-alpha.4", + "@carto/react-api": "^2.0.0-mui-v5-alpha.0", + "@carto/react-core": "^2.0.0-mui-v5-alpha.0", + "@carto/react-redux": "^2.0.0-mui-v5-alpha.0", + "@carto/react-ui": "^2.0.0-mui-v5-alpha.0", + "@carto/react-workers": "^2.0.0-mui-v5-alpha.0", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@mui/material": "^5.10.10", @@ -83,4 +83,4 @@ "react-redux": "^7.2.2", "redux": "^4.0.5" } -} +} \ No newline at end of file diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index f85d4d498..f60afab60 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "1.5.0-alpha.4", + "version": "2.0.0-mui-v5-alpha.0", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,11 +62,11 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^1.5.0-alpha.4", + "@carto/react-core": "^2.0.0-mui-v5-alpha.0", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", "@turf/intersect": "^6.3.0", "thenby": "^1.3.4" } -} +} \ No newline at end of file From 7e389929de089c3689f79267e9dc7a5e91dda506 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 21 Oct 2022 19:35:39 +0200 Subject: [PATCH 16/42] Mock requestAnimationFrame in FormulaUI tests --- .../react-ui/__tests__/widgets/FormulaWidgetUI.test.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js index d9aa4809c..899ba8edb 100644 --- a/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js @@ -4,6 +4,14 @@ import FormulaWidgetUI from '../../src/widgets/FormulaWidgetUI'; import { currencyFormatter } from './testUtils'; describe('FormulaWidgetUI', () => { + beforeEach(() => { + jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb()); + }); + + afterEach(() => { + window.requestAnimationFrame.mockRestore(); + }); + test('empty', () => { render(); expect(screen.getByText(/-/)).toBeInTheDocument(); From 8cb9c8dadb9e948f046fc082858c24359fe9d82e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 21 Oct 2022 19:45:52 +0200 Subject: [PATCH 17/42] v0.0.0-experimental-muiv5-0 --- lerna.json | 2 +- packages/react-api/package.json | 4 ++-- packages/react-auth/package.json | 4 ++-- packages/react-basemaps/package.json | 4 ++-- packages/react-core/package.json | 4 ++-- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 16 ++++++++-------- packages/react-widgets/package.json | 6 +++--- packages/react-workers/package.json | 6 +++--- 9 files changed, 25 insertions(+), 25 deletions(-) diff --git a/lerna.json b/lerna.json index 7d7926dc3..17ee4503a 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "2.0.0-mui-v5-alpha.0" + "version": "0.0.0-experimental-muiv5-0" } \ No newline at end of file diff --git a/packages/react-api/package.json b/packages/react-api/package.json index dc432d01d..4c885d648 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "2.0.0-mui-v5-alpha.0", + "version": "0.0.0-experimental-muiv5-0", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ @@ -75,4 +75,4 @@ "react-redux": "^7.2.2", "redux": "^4.0.5" } -} \ No newline at end of file +} diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 31efed798..72ca6a783 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "2.0.0-mui-v5-alpha.0", + "version": "0.0.0-experimental-muiv5-0", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ @@ -68,4 +68,4 @@ "react": "^17.0.1", "react-dom": "^17.0.1" } -} \ No newline at end of file +} diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 28a466e71..8314a809e 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "2.0.0-mui-v5-alpha.0", + "version": "0.0.0-experimental-muiv5-0", "description": "CARTO for React - Basemaps", "keywords": [ "carto", @@ -69,4 +69,4 @@ "react": "^17.0.1", "react-dom": "^17.0.1" } -} \ No newline at end of file +} diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 93b9f605e..475603d8a 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "2.0.0-mui-v5-alpha.0", + "version": "0.0.0-experimental-muiv5-0", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ @@ -73,4 +73,4 @@ "h3-js": "^3.7.2", "quadbin": "^0.1.4" } -} \ No newline at end of file +} diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 0fea4070f..8fd8f5e5f 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "2.0.0-mui-v5-alpha.0", + "version": "0.0.0-experimental-muiv5-0", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ @@ -69,4 +69,4 @@ "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" } -} \ No newline at end of file +} diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 2ea24e45c..0eac3d2fd 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "2.0.0-mui-v5-alpha.0", + "version": "0.0.0-experimental-muiv5-0", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ @@ -47,7 +47,6 @@ "@storybook/addon-essentials": "^6.5.12", "@storybook/addon-links": "^6.5.12", "@storybook/react": "^6.5.12", - "storybook-addon-designs": "^6.3.1", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", "@testing-library/react-hooks": "^5.1.0", @@ -69,6 +68,7 @@ "firebase-tools": "^8.17.0", "jest": "^26.6.3", "react-redux": "^7.2.2", + "storybook-addon-designs": "^6.3.1", "webpack": "^5.24.2", "webpack-cli": "^4.5.0" }, @@ -77,17 +77,17 @@ }, "peerDependencies": { "@carto/react-core": "^2.0.0-mui-v5-alpha.0", + "@emotion/react": "^11.10.0", + "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", "@mui/lab": "^5.0.0-alpha.104", "@mui/material": "^5.10.10", - "@mui/styles": "^5.10.10", "@mui/styled-engine-sc": "^5.10.6", - "@emotion/react": "^11.10.0", - "@emotion/styled": "^11.10.0", - "styled-components": "^5.2.3", + "@mui/styles": "^5.10.10", "echarts": "^5.2.0", "echarts-for-react": "^3.0.1", "react": "^17.0.1", - "react-dom": "^17.0.1" + "react-dom": "^17.0.1", + "styled-components": "^5.2.3" } -} \ No newline at end of file +} diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index d6e27f14e..a76ea8604 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "2.0.0-mui-v5-alpha.0", + "version": "0.0.0-experimental-muiv5-0", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ @@ -72,9 +72,9 @@ "@carto/react-workers": "^2.0.0-mui-v5-alpha.0", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", - "@mui/material": "^5.10.10", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", + "@mui/material": "^5.10.10", "@nebula.gl/edit-modes": "^1.0.4", "@nebula.gl/layers": "^1.0.4", "dequal": "^2.0.2", @@ -83,4 +83,4 @@ "react-redux": "^7.2.2", "redux": "^4.0.5" } -} \ No newline at end of file +} diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index f60afab60..21c97e872 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "2.0.0-mui-v5-alpha.0", + "version": "0.0.0-experimental-muiv5-0", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,11 +62,11 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^2.0.0-mui-v5-alpha.0", + "@carto/react-core": "^0.0.0-experimental-muiv5-0", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", "@turf/intersect": "^6.3.0", "thenby": "^1.3.4" } -} \ No newline at end of file +} From 3f39da3971fba085ceda5bd3f8f50026787ce573 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 21 Oct 2022 19:50:24 +0200 Subject: [PATCH 18/42] Set peer deps to experimental 0.0.0 packages --- packages/react-api/package.json | 6 +++--- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-redux/package.json | 4 ++-- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 10 +++++----- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 4c885d648..3c91661b4 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^2.0.0-mui-v5-alpha.0", - "@carto/react-redux": "^2.0.0-mui-v5-alpha.0", - "@carto/react-workers": "^2.0.0-mui-v5-alpha.0", + "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-redux": "0.0.0-experimental-muiv5-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-0", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 72ca6a783..dbe487937 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^2.0.0-mui-v5-alpha.0", + "@carto/react-core": "0.0.0-experimental-muiv5-0", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 8314a809e..ca2cfb85f 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^2.0.0-mui-v5-alpha.0", + "@carto/react-core": "0.0.0-experimental-muiv5-0", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 8fd8f5e5f..69145727c 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^2.0.0-mui-v5-alpha.0", - "@carto/react-workers": "^2.0.0-mui-v5-alpha.0", + "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-0", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 0eac3d2fd..0fb4eabdd 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -76,7 +76,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^2.0.0-mui-v5-alpha.0", + "@carto/react-core": "0.0.0-experimental-muiv5-0", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index a76ea8604..d24dcc968 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "^2.0.0-mui-v5-alpha.0", - "@carto/react-core": "^2.0.0-mui-v5-alpha.0", - "@carto/react-redux": "^2.0.0-mui-v5-alpha.0", - "@carto/react-ui": "^2.0.0-mui-v5-alpha.0", - "@carto/react-workers": "^2.0.0-mui-v5-alpha.0", + "@carto/react-api": "0.0.0-experimental-muiv5-0", + "@carto/react-core": "0.0.0-experimental-muiv5-0", + "@carto/react-redux": "0.0.0-experimental-muiv5-0", + "@carto/react-ui": "0.0.0-experimental-muiv5-0", + "@carto/react-workers": "0.0.0-experimental-muiv5-0", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", From 73b43dc9c6c9f895b1c7c79aaa0837fb346c8d1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 21 Oct 2022 19:56:45 +0200 Subject: [PATCH 19/42] v0.0.0-experimental-muiv5-1 --- lerna.json | 2 +- packages/react-api/package.json | 2 +- packages/react-auth/package.json | 2 +- packages/react-basemaps/package.json | 2 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 2 +- packages/react-ui/package.json | 2 +- packages/react-widgets/package.json | 2 +- packages/react-workers/package.json | 4 ++-- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lerna.json b/lerna.json index 17ee4503a..0b61ab7f3 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-0" + "version": "0.0.0-experimental-muiv5-1" } \ No newline at end of file diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 3c91661b4..fb96055a5 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-0", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index dbe487937..b101c3882 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-0", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index ca2cfb85f..c07ec632a 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-0", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Basemaps", "keywords": [ "carto", diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 475603d8a..8d2925b70 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-0", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 69145727c..c2bb2b701 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-0", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 0fb4eabdd..a179d6315 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-0", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index d24dcc968..60966edc5 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-0", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 21c97e872..7817cc04f 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-0", + "version": "0.0.0-experimental-muiv5-1", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-0", + "@carto/react-core": "^0.0.0-experimental-muiv5-1", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From c90ac103336f9172c19bdefb34224d86fb04a9ac Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 24 Oct 2022 13:16:17 +0200 Subject: [PATCH 20/42] Replace state class names and nested classes selectors with global class names --- .../react-ui/src/theme/sections/components.js | 94 +++++++++---------- .../react-ui/src/widgets/CategoryWidgetUI.js | 6 +- .../react-ui/src/widgets/FormulaWidgetUI.js | 2 +- .../src/widgets/legend/LegendCategories.js | 5 +- .../react-ui/storybook/.storybook/preview.js | 2 +- .../storybook/stories/common/Tabs.stories.js | 6 ++ .../stories/common/Text-field.stories.js | 20 ++++ 7 files changed, 79 insertions(+), 56 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components.js b/packages/react-ui/src/theme/sections/components.js index 8408bfe7f..fb746ce5f 100644 --- a/packages/react-ui/src/theme/sections/components.js +++ b/packages/react-ui/src/theme/sections/components.js @@ -20,7 +20,7 @@ export const themeComponentsOverrides = { '&:hover': { borderWidth: '2px' }, - '&$disabled': { + '&.Mui-disabled': { borderWidth: '2px' } }, @@ -35,7 +35,7 @@ export const themeComponentsOverrides = { '&:hover': { borderWidth: '2px' }, - '&$disabled': { + '&.Mui-disabled': { borderWidth: '2px' } }, @@ -71,20 +71,20 @@ export const themeComponentsOverrides = { startIcon: { marginRight: 6, marginLeft: -4, - '&$iconSizeSmall': { + '&.MuiButton-iconSizeSmall': { marginLeft: -4 }, - '&$iconSizeLarge': { + '&.MuiButton-iconSizeLarge': { marginRight: 8 } }, endIcon: { marginRight: -4, marginLeft: 6, - '&$iconSizeSmall': { + '&.MuiButton-iconSizeSmall': { marginRight: -4 }, - '&$iconSizeLarge': { + '&.MuiButton-iconSizeLarge': { marginLeft: 8 } }, @@ -117,17 +117,17 @@ export const themeComponentsOverrides = { MuiInputBase: { root: { - '&$disabled .MuiInputAdornment-root': { + '&.Mui-disabled .MuiInputAdornment-root': { color: commonPalette.action.disabled }, - '&$disabled .MuiTypography-root': { + '&.Mui-disabled .MuiTypography-root': { color: commonPalette.action.disabled } } }, MuiOutlinedInput: { root: { - '&$disabled': { + '&.Mui-disabled': { backgroundColor: commonPalette.action.hover } }, @@ -147,12 +147,12 @@ export const themeComponentsOverrides = { }, adornedStart: { - '&$marginDense': { + '&.MuiFormControl-marginDense': { paddingLeft: spacing(1.5) } }, adornedEnd: { - '&$marginDense': { + '&.MuiFormControl-marginDense': { paddingRight: spacing(1.5) } }, @@ -173,16 +173,16 @@ export const themeComponentsOverrides = { formControl: { transform: 'translate(16px, 20px) scale(1)', - '&$shrink': { + '&.MuiInputLabel-shrink': { ...themeTypography.caption, transform: 'translate(16px, 8px) scale(1)' }, - '&$marginDense': { + '&.MuiFormControl-marginDense': { ...themeTypography.caption, transform: 'translate(0, -20px) scale(1)', - '&$shrink': { + '&.MuiInputLabel-shrink': { ...themeTypography.caption, transform: 'translate(0, -20px) scale(1)' } @@ -190,16 +190,16 @@ export const themeComponentsOverrides = { }, outlined: { - '&$shrink': { + '&.MuiInputLabel-shrink': { ...themeTypography.caption, transform: 'translate(16px, 8px) scale(1)' }, - '&$marginDense': { + '&.MuiFormControl-marginDense': { ...themeTypography.caption, transform: 'translate(0, -20px) scale(1)', - '&$shrink': { + '&.MuiInputLabel-shrink': { transform: 'translate(0, -20px) scale(1)' } } @@ -246,13 +246,13 @@ export const themeComponentsOverrides = { MuiFormHelperText: { root: { ...themeTypography.caption, - '&$contained': { + '&.MuiFormHelperText-contained': { marginTop: spacing(1) } }, marginDense: { - '&$contained': { + '&.MuiFormHelperText-contained': { marginLeft: spacing(0) } } @@ -297,7 +297,7 @@ export const themeComponentsOverrides = { padding: spacing(0, 1.25, 0.5) } }, - '&.MuiInputBase-marginDense.MuiOutlinedInput-root $input.MuiOutlinedInput-inputMarginDense': + '&.MuiInputBase-marginDense.MuiOutlinedInput-root .MuiInputBase-input.MuiOutlinedInput-inputMarginDense': { paddingTop: spacing(0.25), paddingBottom: spacing(0.25) @@ -353,7 +353,7 @@ export const themeComponentsOverrides = { }, vertical: { - '& $indicator': { + '& .MuiTabs-indicator': { width: 4 }, @@ -385,10 +385,10 @@ export const themeComponentsOverrides = { textColorPrimary: { color: commonPalette.primary.main, opacity: 1, - '&$selected': { + '&.Mui-selected': { color: commonPalette.text.primary }, - '&$disabled': { + '&.Mui-disabled': { color: commonPalette.action.disabled } } @@ -424,7 +424,7 @@ export const themeComponentsOverrides = { transform: 'translate(1px, 1px)', color: commonPalette.text.secondary, - '&$checked': { + '&.Mui-checked': { '& input': { left: spacing(-1.5) }, @@ -432,7 +432,7 @@ export const themeComponentsOverrides = { transform: 'translate(13px, 1px)', color: commonPalette.common.white, - '& + $track': { + '& + .MuiSwitch-track': { opacity: 1 } } @@ -458,27 +458,27 @@ export const themeComponentsOverrides = { }, colorPrimary: { - '&$checked': { + '&.Mui-checked': { color: commonPalette.common.white, - '& + $track': { + '& + .MuiSwitch-track': { backgroundColor: commonPalette.primary.main, borderColor: 'transparent' }, - '&$disabled': { + '&.Mui-disabled': { color: commonPalette.grey[100], - '& + $track': { + '& + .MuiSwitch-track': { backgroundColor: commonPalette.text.disabled } } }, - '&$disabled': { + '&.Mui-disabled': { color: commonPalette.text.disabled, - '& + $track': { + '& + .MuiSwitch-track': { opacity: 1, backgroundColor: commonPalette.common.white, borderColor: commonPalette.text.disabled @@ -487,27 +487,27 @@ export const themeComponentsOverrides = { }, colorSecondary: { - '&$checked': { + '&.Mui-checked': { color: commonPalette.common.white, - '& + $track': { + '& + .MuiSwitch-track': { backgroundColor: commonPalette.secondary.main, borderColor: 'transparent' }, - '&$disabled': { + '&.Mui-disabled': { color: commonPalette.grey[100], - '& + $track': { + '& + .MuiSwitch-track': { backgroundColor: commonPalette.text.disabled } } }, - '&$disabled': { + '&.Mui-disabled': { color: commonPalette.text.disabled, - '& + $track': { + '& + .MuiSwitch-track': { opacity: 1, backgroundColor: commonPalette.common.white, borderColor: commonPalette.text.disabled @@ -520,15 +520,15 @@ export const themeComponentsOverrides = { width: spacing(6), padding: spacing(1), - '& $switchBase': { + '& .MuiSwitch-switchBase': { padding: spacing(1.5), transform: 'translate(0, 1px)', - '&$checked': { + '&.Mui-checked': { transform: 'translate(15px, 1px)' } }, - '& $thumb': { + '& .MuiSwitch-thumb': { width: spacing(1.25), height: spacing(1.25) } @@ -722,7 +722,7 @@ export const themeComponentsOverrides = { border: 'none', borderRadius: spacing(0.5), color: commonPalette.grey[500], - '&$selected': { + '&.Mui-selected': { color: commonPalette.primary.main, backgroundColor: commonPalette.primary.relatedLight, '&:hover': { @@ -756,7 +756,7 @@ export const themeComponentsOverrides = { } }, colorPrimary: { - '&$disabled': { + '&.Mui-disabled': { backgroundColor: commonPalette.grey[100], color: commonPalette.text.primary }, @@ -765,7 +765,7 @@ export const themeComponentsOverrides = { } }, colorSecondary: { - '&$disabled': { + '&.Mui-disabled': { backgroundColor: commonPalette.grey[100] }, '&:hover': { @@ -782,13 +782,13 @@ export const themeComponentsOverrides = { }, outlined: { transition: `border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)`, - '&$disabled': { + '&.Mui-disabled': { backgroundColor: 'transparent' }, '&:hover': { backgroundColor: 'transparent', borderColor: commonPalette.grey[200], - '&$clickable': { + '&.MuiChip-clickable': { backgroundColor: 'transparent' } } @@ -798,7 +798,7 @@ export const themeComponentsOverrides = { backgroundColor: 'transparent', borderColor: commonPalette.primary.dark, color: commonPalette.primary.dark, - '&$clickable': { + '&.MuiChip-clickable': { backgroundColor: 'transparent' } } @@ -808,7 +808,7 @@ export const themeComponentsOverrides = { backgroundColor: 'transparent', borderColor: commonPalette.secondary.dark, color: commonPalette.secondary.dark, - '&$clickable': { + '&.MuiChip-clickable': { backgroundColor: 'transparent' } } diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index cf4aed440..cf2424d35 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -38,15 +38,15 @@ const useStyles = makeStyles((theme) => ({ }, element: { - '&$unselected': { + '&.unselected': { color: theme.palette.text.disabled, - '& $progressbar div': { + '& .progressbar div': { backgroundColor: theme.palette.text.disabled } }, - '&$rest $progressbar div': { + '&.rest .progressbar div': { backgroundColor: theme.palette.text.disabled } }, diff --git a/packages/react-ui/src/widgets/FormulaWidgetUI.js b/packages/react-ui/src/widgets/FormulaWidgetUI.js index ac785e511..92c3b5048 100644 --- a/packages/react-ui/src/widgets/FormulaWidgetUI.js +++ b/packages/react-ui/src/widgets/FormulaWidgetUI.js @@ -14,7 +14,7 @@ const useStyles = makeStyles((theme) => ({ color: theme.palette.text.secondary, marginLeft: theme.spacing(0.5), - '&$before': { + '&.before': { marginLeft: 0, marginRight: theme.spacing(0.5) } diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index ddff240cf..df5708b3c 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -67,10 +67,7 @@ export default LegendCategories; // Aux const useStyles = makeStyles((theme) => ({ legendCategories: { - alignItems: 'center', - '&:hover': { - '& $circle': {} - } + alignItems: 'center' }, marker: { whiteSpace: 'nowrap', diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index 45506ab64..74bee20ed 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -27,7 +27,7 @@ export const decorators = [ export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, - viewMode: 'story', + viewMode: 'docs', docs: { source: { type: 'code' diff --git a/packages/react-ui/storybook/stories/common/Tabs.stories.js b/packages/react-ui/storybook/stories/common/Tabs.stories.js index c49ffc963..19b9631d1 100644 --- a/packages/react-ui/storybook/stories/common/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/common/Tabs.stories.js @@ -24,6 +24,12 @@ const options = { type: 'select', options: ['default', 'primary', 'secondary'] } + }, + orientation: { + control: { + type: 'select', + options: ['horizontal', 'vertical'] + } } } }; diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/common/Text-field.stories.js index 22406c2b6..c640caa55 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/common/Text-field.stories.js @@ -19,11 +19,25 @@ const options = { } }, required: { + defaultValue: false, control: { type: 'boolean' } }, disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + error: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + multiline: { + defaultValue: false, control: { type: 'boolean' } @@ -32,6 +46,12 @@ const options = { control: { type: 'text' } + }, + margin: { + control: { + type: 'select', + options: ['dense', 'none', 'normal'] + } } }, parameters: { From 2645e8bfb76c7fe553354817d47d590c46ae98fa Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 28 Oct 2022 17:42:21 +0200 Subject: [PATCH 21/42] storybook tweaks --- UPGRADE.md | 2 ++ packages/react-ui/storybook/.storybook/manager.js | 15 +++++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 packages/react-ui/storybook/.storybook/manager.js diff --git a/UPGRADE.md b/UPGRADE.md index f3d778d32..54b878e47 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -14,6 +14,8 @@ Also added some files for shared constants (`themeConstants.js`) and useful func Removed unused custom `createTheme` function in `carto-theme.js`. +We have a new custom spacing constant in carto-theme, `spacingValue`, which you should use instead of the common `theme.spacing()` function in cases where you need to do value calculations, because since Mui v5, theme.spacing is no longer a number, but a string in this format: `number + px`. + # Typography `responsiveFontSizes` simplified due we want to resize only a few variants through the theme. diff --git a/packages/react-ui/storybook/.storybook/manager.js b/packages/react-ui/storybook/.storybook/manager.js new file mode 100644 index 000000000..8615b65a2 --- /dev/null +++ b/packages/react-ui/storybook/.storybook/manager.js @@ -0,0 +1,15 @@ +// ./storybook/manager.ts +import { addons } from '@storybook/addons'; +import { create } from '@storybook/theming'; + +const theme = create({ + base: 'light', + + // Brand + brandTitle: 'CARTO Design System', + brandImage: undefined +}); + +addons.setConfig({ + theme +}); From 0b0cdbf51b90f9be7411f55874f71d571da71797 Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 31 Oct 2022 11:53:29 +0100 Subject: [PATCH 22/42] Breaking changes in styles --- CHANGELOG.md | 1 + UPGRADE.md | 9 + lerna.json | 2 +- packages/react-api/package.json | 8 +- packages/react-auth/package.json | 4 +- packages/react-basemaps/package.json | 4 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 6 +- packages/react-ui/package.json | 4 +- packages/react-ui/src/theme/carto-theme.d.ts | 13 +- packages/react-ui/src/theme/carto-theme.js | 23 +- .../react-ui/src/theme/sections/components.js | 902 ------------------ .../src/theme/sections/components/buttons.js | 194 ++++ .../theme/sections/components/dataDisplay.js | 270 ++++++ .../src/theme/sections/components/forms.js | 440 +++++++++ .../theme/sections/components/navigation.js | 101 ++ packages/react-widgets/package.json | 12 +- packages/react-workers/package.json | 4 +- 18 files changed, 1065 insertions(+), 934 deletions(-) delete mode 100644 packages/react-ui/src/theme/sections/components.js create mode 100644 packages/react-ui/src/theme/sections/components/buttons.js create mode 100644 packages/react-ui/src/theme/sections/components/dataDisplay.js create mode 100644 packages/react-ui/src/theme/sections/components/forms.js create mode 100644 packages/react-ui/src/theme/sections/components/navigation.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a5ece472..72441d12f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Breaking changes in Mui v5: styles and theme [#514](https://github.com/CartoDB/carto-react/pull/514/) - Breakpoints for the new design system [#513](https://github.com/CartoDB/carto-react/pull/513/) - New Typography component to extend Mui Typography [#506](https://github.com/CartoDB/carto-react/pull/506) - New spacings, borders and shadows toolkit for MUI carto-theme [#507](https://github.com/CartoDB/carto-react/pull/507/) diff --git a/UPGRADE.md b/UPGRADE.md index 54b878e47..f5193cbe6 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -1,5 +1,12 @@ # Upgrade to the new design system +## Breaking changes in Mui v5 + +Please, follow the Mui guides related to breaking changes in components and styles: + +- [Styles](https://mui.com/material-ui/migration/v5-style-changes/) +- [Components](https://mui.com/material-ui/migration/v5-component-changes/) + ## MUI theme [carto-theme.js](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/src/theme/carto-theme.js) file splitted in sections: @@ -16,6 +23,8 @@ Removed unused custom `createTheme` function in `carto-theme.js`. We have a new custom spacing constant in carto-theme, `spacingValue`, which you should use instead of the common `theme.spacing()` function in cases where you need to do value calculations, because since Mui v5, theme.spacing is no longer a number, but a string in this format: `number + px`. +Note that if you're using `calc()` in your styles, you can keep using `theme.spacing()` as usual. + # Typography `responsiveFontSizes` simplified due we want to resize only a few variants through the theme. diff --git a/lerna.json b/lerna.json index dda3e4aba..301648be0 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index da3e99034..f4b45d5a1 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 0dc9f50f6..1bfa4065b 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 63658c45f..90b3c34c8 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Basemaps", "keywords": [ "carto", @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 447fecb3f..7c79b9271 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 9d5b3af76..ce58b6573 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 11799d1db..866466f53 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ @@ -77,7 +77,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index 910d7e284..eec2762a7 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -79,6 +79,18 @@ export type CartoTheme = Modify< >; declare module '@mui/material/styles' { + // Check https://mui.com/material-ui/customization/theming/#custom-variables + interface Theme { + palette: CustomPalette; + spacingValue: number; + } + + // allow configuration using `createTheme` + interface ThemeOptions { + palette?: CustomPalette; + spacingValue?: number; + } + interface TypographyVariants { overlineDelicate: React.CSSProperties; code1: React.CSSProperties; @@ -86,7 +98,6 @@ declare module '@mui/material/styles' { code3: React.CSSProperties; } - // allow configuration using `createTheme` interface TypographyVariantsOptions { overlineDelicate?: React.CSSProperties; code1?: React.CSSProperties; diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js index 3eac76257..da070fd03 100644 --- a/packages/react-ui/src/theme/carto-theme.js +++ b/packages/react-ui/src/theme/carto-theme.js @@ -1,4 +1,7 @@ -import { themeComponentsOverrides, themeComponentsProps } from './sections/components'; +import { dataDisplayOverrides } from './sections/components/dataDisplay'; +import { buttonsOverrides } from './sections/components/buttons'; +import { formsOverrides } from './sections/components/forms'; +import { navigationOverrides } from './sections/components/navigation'; import { CssBaseline } from './sections/cssBaseline'; import { commonPalette } from './sections/palette'; import { themeShadows } from './sections/shadows'; @@ -99,13 +102,17 @@ export const cartoThemeOptions = { snackbar: 1400, tooltip: 1500 }, - overrides: { + + // Styles and props overrides for components + components: { MuiCssBaseline: { - ...CssBaseline + styleOverrides: { + ...CssBaseline + } }, - ...themeComponentsOverrides - }, - - // Props - props: { ...themeComponentsProps } + ...buttonsOverrides, + ...formsOverrides, + ...navigationOverrides, + ...dataDisplayOverrides + } }; diff --git a/packages/react-ui/src/theme/sections/components.js b/packages/react-ui/src/theme/sections/components.js deleted file mode 100644 index 1060d5d25..000000000 --- a/packages/react-ui/src/theme/sections/components.js +++ /dev/null @@ -1,902 +0,0 @@ -import { getSpacing } from '../themeUtils'; -import { commonPalette } from './palette'; -import { themeTypography } from './typography'; - -const round = (value) => Math.round(value * 1e5) / 1e5; -const pxToRem = (size) => `${round(size / themeTypography.htmlFontSize)}rem`; - -themeTypography.pxToRem = pxToRem; -themeTypography.round = round; - -export const themeComponentsOverrides = { - // Button - MuiButton: { - contained: { - boxShadow: 'none' - }, - outlined: { - border: `2px solid ${commonPalette.text.primary}`, - padding: '4px 14px', - '&:hover': { - borderWidth: '2px' - }, - '&.Mui-disabled': { - borderWidth: '2px' - } - }, - outlinedPrimary: { - border: `2px solid ${commonPalette.primary.main}`, - '&:hover': { - borderWidth: '2px' - } - }, - outlinedSecondary: { - border: `2px solid ${commonPalette.secondary.main}`, - '&:hover': { - borderWidth: '2px' - }, - '&.Mui-disabled': { - borderWidth: '2px' - } - }, - containedSizeSmall: { - padding: '2px 12px', - fontSize: pxToRem(12) - }, - outlinedSizeSmall: { - padding: '2px 12px', - fontSize: pxToRem(12) - }, - textSizeSmall: { - padding: '2px 12px', - fontSize: pxToRem(12) - }, - containedSizeLarge: { - padding: '16px 24px', - fontSize: pxToRem(16) - }, - containedSecondary: { - '&:hover': { - backgroundColor: commonPalette.secondary.light - } - }, - outlinedSizeLarge: { - padding: '16px 24px', - fontSize: pxToRem(16) - }, - textSizeLarge: { - padding: '16px 24px', - fontSize: pxToRem(16) - }, - startIcon: { - marginRight: 6, - marginLeft: -4, - '&.MuiButton-iconSizeSmall': { - marginLeft: -4 - }, - '&.MuiButton-iconSizeLarge': { - marginRight: 8 - } - }, - endIcon: { - marginRight: -4, - marginLeft: 6, - '&.MuiButton-iconSizeSmall': { - marginRight: -4 - }, - '&.MuiButton-iconSizeLarge': { - marginLeft: 8 - } - }, - iconSizeSmall: { - '& > *:first-child': { - fontSize: 20 - } - }, - iconSizeMedium: { - '& > *:first-child': { - fontSize: 24 - } - }, - iconSizeLarge: { - '& > *:first-child': { - fontSize: 24 - } - } - }, - MuiIconButton: { - root: { - padding: getSpacing(0.75), - borderRadius: getSpacing(0.5), - color: commonPalette.text.primary - }, - sizeSmall: { - padding: getSpacing(0.25) - } - }, - - MuiInputBase: { - root: { - '&.Mui-disabled .MuiInputAdornment-root': { - color: commonPalette.action.disabled - }, - '&.Mui-disabled .MuiTypography-root': { - color: commonPalette.action.disabled - } - } - }, - MuiOutlinedInput: { - root: { - '&.Mui-disabled': { - backgroundColor: commonPalette.action.hover - } - }, - - input: { - ...themeTypography.body1, - height: `${themeTypography.body1.lineHeight}em`, - padding: getSpacing(3, 2, 1) - }, - - inputMarginDense: { - ...themeTypography.body2, - height: `${themeTypography.body2.lineHeight}em`, - padding: getSpacing(1, 1.5), - paddingTop: getSpacing(1), - paddingBottom: getSpacing(1) - }, - - adornedStart: { - '&.MuiFormControl-marginDense': { - paddingLeft: getSpacing(1.5) - } - }, - adornedEnd: { - '&.MuiFormControl-marginDense': { - paddingRight: getSpacing(1.5) - } - }, - - notchedOutline: { - border: `2px solid ${commonPalette.text.disabled}` - }, - - multiline: { - padding: getSpacing(2.75, 2, 1.25) - } - }, - MuiInputLabel: { - root: { - ...themeTypography.body1 - }, - - formControl: { - transform: 'translate(16px, 20px) scale(1)', - - '&.MuiInputLabel-shrink': { - ...themeTypography.caption, - transform: 'translate(16px, 8px) scale(1)' - }, - - '&.MuiFormControl-marginDense': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)', - - '&.MuiInputLabel-shrink': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)' - } - } - }, - - outlined: { - '&.MuiInputLabel-shrink': { - ...themeTypography.caption, - transform: 'translate(16px, 8px) scale(1)' - }, - - '&.MuiFormControl-marginDense': { - ...themeTypography.caption, - transform: 'translate(0, -20px) scale(1)', - - '&.MuiInputLabel-shrink': { - transform: 'translate(0, -20px) scale(1)' - } - } - } - }, - MuiInputAdornment: { - root: { - ...themeTypography.body1, - alignItems: 'baseline', - marginBottom: getSpacing(1.5), - color: commonPalette.text.secondary, - - '&:disabled': { - color: commonPalette.action.disabled - }, - - '& .MuiSvgIcon-root': { - fontSize: `${themeTypography.body1.lineHeight}em` - } - }, - - positionStart: { - marginLeft: getSpacing(0.25) - }, - - positionEnd: { - marginRight: getSpacing(0.25) - }, - - marginDense: { - marginBottom: getSpacing(0), - alignItems: 'center', - ...themeTypography.body2, - - '& .MuiTypography-root': { - ...themeTypography.body2 - }, - - '& .MuiSvgIcon-root': { - fontSize: `${themeTypography.body2.lineHeight}em` - } - } - }, - MuiFormHelperText: { - root: { - ...themeTypography.caption, - '&.MuiFormHelperText-contained': { - marginTop: getSpacing(1) - } - }, - - marginDense: { - '&.MuiFormHelperText-contained': { - marginLeft: getSpacing(0) - } - } - }, - - // Select - MuiFormControl: { - root: { - width: '100%' - } - }, - MuiSelect: { - selectMenu: {}, - - root: { - '&:hover': { - backgroundColor: 'transparent' - } - }, - - select: { - '&:focus': { - backgroundColor: 'transparent' - } - } - }, - - // Menu - MuiMenuItem: { - root: { - ...themeTypography.body2 - } - }, - - // Autocomplete - MuiAutocomplete: { - inputRoot: { - '&[class*="MuiOutlinedInput-root"]': { - padding: getSpacing(3, 1.25, 0.5), - - '& .MuiAutocomplete-input': { - padding: getSpacing(0, 1.25, 0.5) - } - }, - '&.MuiInputBase-marginDense.MuiOutlinedInput-root .MuiInputBase-input.MuiOutlinedInput-inputMarginDense': - { - paddingTop: getSpacing(0.25), - paddingBottom: getSpacing(0.25) - } - } - }, - - // Checkbox - MuiCheckbox: { - root: { - ...themeTypography.body2, - padding: getSpacing(0.75), - borderRadius: '50%', - - '& + .MuiFormControlLabel-label': { - ...themeTypography.body2, - marginLeft: getSpacing(0.25), - color: commonPalette.text.primary - }, - - '& .MuiSvgIcon-root': { - fontSize: getSpacing(3) - } - } - }, - - // RadioButton - MuiRadio: { - root: { - ...themeTypography.body2, - padding: getSpacing(0.75), - borderRadius: '50%', - - '& + .MuiFormControlLabel-label': { - ...themeTypography.body2, - marginLeft: getSpacing(0.25), - color: commonPalette.text.primary - }, - - '& .MuiSvgIcon-root': { - fontSize: getSpacing(3) - } - } - }, - - // Tabs - MuiTabs: { - indicator: { - height: 4, - '&.colorPrimary': { - backgroundColor: commonPalette.text.primary - } - }, - - vertical: { - '& .MuiTabs-indicator': { - width: 4 - }, - - '& .MuiTab-root': { - padding: getSpacing(0, 2), - - '& .MuiTab-wrapper': { - alignItems: 'flex-start' - } - } - } - }, - - // Tab - MuiTab: { - root: { - padding: getSpacing(0, 1), - marginRight: getSpacing(3), - minWidth: '56px!important', - '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper': { - flexFlow: 'row', - alignItems: 'center' - }, - '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper > .MuiSvgIcon-root': { - marginRight: getSpacing(1), - marginBottom: 0 - } - }, - textColorPrimary: { - color: commonPalette.primary.main, - opacity: 1, - '&.Mui-selected': { - color: commonPalette.text.primary - }, - '&.Mui-disabled': { - color: commonPalette.action.disabled - } - } - }, - - MuiDivider: { - root: { - backgroundColor: commonPalette.divider - }, - light: { - backgroundColor: commonPalette.grey[50] - } - }, - - // Switch - MuiSwitch: { - root: { - height: getSpacing(4.5), - width: getSpacing(6), - padding: getSpacing(1), - overflow: 'visible', - - '& + .MuiFormControlLabel-label': { - ...themeTypography.body2, - marginLeft: getSpacing(0.25), - color: commonPalette.text.primary - } - }, - - switchBase: { - padding: getSpacing(1.5), - borderRadius: '50%', - transform: 'translate(1px, 1px)', - color: commonPalette.text.secondary, - - '&.Mui-checked': { - '& input': { - left: getSpacing(-1.5) - }, - - transform: 'translate(13px, 1px)', - color: commonPalette.common.white, - - '& + .MuiSwitch-track': { - opacity: 1 - } - } - }, - - thumb: { - width: getSpacing(1.25), - height: getSpacing(1.25), - boxShadow: 'none' - }, - - input: { - width: getSpacing(6), - left: 0 - }, - - track: { - height: 'auto', - border: `2px solid ${commonPalette.text.secondary}`, - borderRadius: getSpacing(2), - opacity: 1, - backgroundColor: commonPalette.common.white - }, - - colorPrimary: { - '&.Mui-checked': { - color: commonPalette.common.white, - - '& + .MuiSwitch-track': { - backgroundColor: commonPalette.primary.main, - borderColor: 'transparent' - }, - - '&.Mui-disabled': { - color: commonPalette.grey[100], - - '& + .MuiSwitch-track': { - backgroundColor: commonPalette.text.disabled - } - } - }, - - '&.Mui-disabled': { - color: commonPalette.text.disabled, - - '& + .MuiSwitch-track': { - opacity: 1, - backgroundColor: commonPalette.common.white, - borderColor: commonPalette.text.disabled - } - } - }, - - colorSecondary: { - '&.Mui-checked': { - color: commonPalette.common.white, - - '& + .MuiSwitch-track': { - backgroundColor: commonPalette.secondary.main, - borderColor: 'transparent' - }, - - '&.Mui-disabled': { - color: commonPalette.grey[100], - - '& + .MuiSwitch-track': { - backgroundColor: commonPalette.text.disabled - } - } - }, - - '&.Mui-disabled': { - color: commonPalette.text.disabled, - - '& + .MuiSwitch-track': { - opacity: 1, - backgroundColor: commonPalette.common.white, - borderColor: commonPalette.text.disabled - } - } - }, - - sizeSmall: { - height: getSpacing(4.5), - width: getSpacing(6), - padding: getSpacing(1), - - '& .MuiSwitch-switchBase': { - padding: getSpacing(1.5), - transform: 'translate(0, 1px)', - - '&.Mui-checked': { - transform: 'translate(15px, 1px)' - } - }, - '& .MuiSwitch-thumb': { - width: getSpacing(1.25), - height: getSpacing(1.25) - } - } - }, - - // Breadcrumbs - MuiBreadcrumbs: { - li: { - '& .MuiTypography-root': { - ...themeTypography.body2, - display: 'flex', - flexDirection: 'row', - alignItems: 'center' - }, - '& .MuiSvgIcon-root': { - fontSize: `${themeTypography.body2.lineHeight}em`, - marginRight: getSpacing(1) - } - }, - - separator: { - marginLeft: getSpacing(0.5), - marginRight: getSpacing(0.5) - } - }, - - // Lists - MuiList: { - root: { - // Indent sublevels, ugly but needed to avoid issues with hover - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: getSpacing(4) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: getSpacing(6) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: getSpacing(8) - }, - - '& .MuiList-root': { - '& .MuiListItem-root': { - paddingLeft: getSpacing(10) - } - } - } - } - } - } - }, - - MuiListItemIcon: { - root: { - minWidth: getSpacing(5.75), - marginLeft: getSpacing(0.75), - - '& .MuiSvgIcon-root': { - fontSize: getSpacing(3) - } - } - }, - - MuiListItemAvatar: { - root: { - '& .MuiAvatar-root': { - height: getSpacing(4.5), - width: getSpacing(4.5) - }, - '& .MuiSvgIcon-root': { - fontSize: getSpacing(2.5) - } - } - }, - - // Tooltip - MuiTooltip: { - tooltip: { - ...themeTypography.caption, - backgroundColor: commonPalette.black[90] - }, - - arrow: { - color: commonPalette.black[90] - } - }, - - // Dialog - MuiDialogTitle: { - root: { - padding: getSpacing(3, 3, 2) - } - }, - - MuiDialogContent: { - root: { - '& .MuiFormGroup-root': { - padding: getSpacing(1, 0) - } - } - }, - - // Slider - MuiSlider: { - root: {} - }, - - // MuiToggleButtonGroup - MuiToggleButtonGroup: { - groupedHorizontal: { - '&:not(:last-child)': { - marginRight: getSpacing(0.25), - borderTopRightRadius: getSpacing(0.5), - borderBottomRightRadius: getSpacing(0.5) - }, - '&:not(:first-child)': { - marginLeft: 0, - borderLeft: 'none', - borderTopLeftRadius: getSpacing(0.5), - borderBottomLeftRadius: getSpacing(0.5) - } - }, - groupedVertical: { - '&:not(:last-child)': { - marginBottom: getSpacing(0.25), - borderBottomLeftRadius: getSpacing(0.5), - borderBottomRightRadius: getSpacing(0.5) - }, - '&:not(:first-child)': { - borderTopLeftRadius: getSpacing(0.5), - borderTopRightRadius: getSpacing(0.5) - } - } - }, - - MuiTablePagination: { - select: { - paddingRight: getSpacing(7.5), - paddingLeft: getSpacing(1.5) - }, - input: { - height: getSpacing(4), - border: `2px solid ${commonPalette.divider}`, - borderRadius: getSpacing(0.5), - fontWeight: themeTypography.fontWeightMedium, - '& .MuiSelect-icon': { - top: '50%', - transform: 'translateY(-50%)', - width: getSpacing(2.25), - height: getSpacing(2.25), - right: getSpacing(0.75) - } - }, - caption: { - ...themeTypography.caption, - '&:first-of-type': { - color: commonPalette.text.secondary - } - }, - toolbar: { - minHeight: 0, - marginTop: getSpacing(1) - }, - actions: { - '& button:last-child': { - marginLeft: getSpacing(2) - } - } - }, - - MuiTableCell: { - head: { - ...themeTypography.caption, - color: commonPalette.text.secondary - }, - stickyHeader: { - backgroundColor: commonPalette.common.white - } - }, - - // MuiToggleButton - MuiToggleButton: { - root: { - width: getSpacing(4.5), - height: getSpacing(4.5), - border: 'none', - borderRadius: getSpacing(0.5), - color: commonPalette.grey[500], - '&.Mui-selected': { - color: commonPalette.primary.main, - backgroundColor: commonPalette.primary.background, - '&:hover': { - backgroundColor: commonPalette.primary.background - } - } - }, - sizeSmall: { - width: getSpacing(3), - height: getSpacing(3), - '& .MuiSvgIcon-root': { - maxWidth: getSpacing(2.5), - maxHeight: getSpacing(2.5) - } - }, - sizeLarge: { - width: getSpacing(7), - height: getSpacing(7) - } - }, - - MuiChip: { - root: { - backgroundColor: commonPalette.grey[100], - '&:hover': { - backgroundColor: commonPalette.grey[200] - }, - '& .MuiAvatar-root': { - backgroundColor: '#7f3c8d', - color: commonPalette.common.white - } - }, - colorPrimary: { - '&.Mui-disabled': { - backgroundColor: commonPalette.grey[100], - color: commonPalette.text.primary - }, - '&:hover': { - backgroundColor: commonPalette.primary.dark - } - }, - colorSecondary: { - '&.Mui-disabled': { - backgroundColor: commonPalette.grey[100] - }, - '&:hover': { - backgroundColor: commonPalette.secondary.light - } - }, - label: { - fontFamily: '"Open Sans", sans-serif', - letterSpacing: 0.25 - }, - labelSmall: { - fontSize: themeTypography.caption.fontSize, - fontWeight: themeTypography.fontWeightLight - }, - outlined: { - transition: `border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)`, - '&.Mui-disabled': { - backgroundColor: 'transparent' - }, - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.grey[200], - '&.MuiChip-clickable': { - backgroundColor: 'transparent' - } - } - }, - outlinedPrimary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.primary.dark, - color: commonPalette.primary.dark, - '&.MuiChip-clickable': { - backgroundColor: 'transparent' - } - } - }, - outlinedSecondary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.secondary.dark, - color: commonPalette.secondary.dark, - '&.MuiChip-clickable': { - backgroundColor: 'transparent' - } - } - }, - clickable: { - '&:focus': { - webkitTapHighlightColor: 'none' - } - } - } -}; - -export const themeComponentsProps = { - MuiButtonBase: { - disableRipple: true - }, - MuiButton: { - disableElevation: true - }, - MuiTextField: { - variant: 'outlined' - }, - MuiSelect: { - variant: 'outlined', - MenuProps: { - getContentAnchorEl: null, - anchorOrigin: { - vertical: 'bottom', - horizontal: 'left' - } - } - }, - MuiOutlinedInput: { - notched: false - }, - MuiCheckbox: { - size: 'small', - color: 'primary' - }, - MuiRadio: { - size: 'small', - color: 'primary' - }, - MuiSwitch: { - color: 'primary' - }, - MuiInputAdornment: { - disableTypography: true - }, - MuiListItemText: { - primaryTypographyProps: { - variant: 'body2', - style: { fontWeight: themeTypography.fontWeightBold }, - noWrap: true - }, - secondaryTypographyProps: { variant: 'caption' } - }, - MuiSkeleton: { - animation: 'wave' - }, - MuiTabs: { - indicatorColor: 'primary', - textColor: 'primary', - TabIndicatorProps: { - classes: { - colorPrimary: 'colorPrimary' - } - } - }, - MuiTypography: { - color: 'textPrimary' - }, - MuiDialogContentText: { - variant: 'body2' - }, - MuiToggleButtonGroup: { - orientation: 'horizontal', - exclusive: true - }, - CircularProgress: { - size: 40, - thickness: 4 - }, - MuiSlider: { - color: 'primary', - marks: false - }, - MuiDialog: { - maxWidth: 'md' - } -}; diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js new file mode 100644 index 000000000..7be93add4 --- /dev/null +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -0,0 +1,194 @@ +import { getPixelToRem, getSpacing } from '../../themeUtils'; +import { commonPalette } from '../palette'; + +export const buttonsOverrides = { + // Button + MuiButton: { + defaultProps: { + disableElevation: true + }, + + styleOverrides: { + contained: { + boxShadow: 'none' + }, + outlined: { + border: `2px solid ${commonPalette.text.primary}`, + padding: '4px 14px', + '&:hover': { + borderWidth: '2px' + }, + '&.Mui-disabled': { + borderWidth: '2px' + } + }, + outlinedPrimary: { + border: `2px solid ${commonPalette.primary.main}`, + '&:hover': { + borderWidth: '2px' + } + }, + outlinedSecondary: { + border: `2px solid ${commonPalette.secondary.main}`, + '&:hover': { + borderWidth: '2px' + }, + '&.Mui-disabled': { + borderWidth: '2px' + } + }, + containedSizeSmall: { + padding: '2px 12px', + fontSize: getPixelToRem(12) + }, + outlinedSizeSmall: { + padding: '2px 12px', + fontSize: getPixelToRem(12) + }, + textSizeSmall: { + padding: '2px 12px', + fontSize: getPixelToRem(12) + }, + containedSizeLarge: { + padding: '16px 24px', + fontSize: getPixelToRem(16) + }, + containedSecondary: { + '&:hover': { + backgroundColor: commonPalette.secondary.light + } + }, + outlinedSizeLarge: { + padding: '16px 24px', + fontSize: getPixelToRem(16) + }, + textSizeLarge: { + padding: '16px 24px', + fontSize: getPixelToRem(16) + }, + startIcon: { + marginRight: 6, + marginLeft: -4, + '&.MuiButton-iconSizeSmall': { + marginLeft: -4 + }, + '&.MuiButton-iconSizeLarge': { + marginRight: 8 + } + }, + endIcon: { + marginRight: -4, + marginLeft: 6, + '&.MuiButton-iconSizeSmall': { + marginRight: -4 + }, + '&.MuiButton-iconSizeLarge': { + marginLeft: 8 + } + }, + iconSizeSmall: { + '& > *:first-child': { + fontSize: 20 + } + }, + iconSizeMedium: { + '& > *:first-child': { + fontSize: 24 + } + }, + iconSizeLarge: { + '& > *:first-child': { + fontSize: 24 + } + } + } + }, + + // Button Base + MuiButtonBase: { + defaultProps: { + disableRipple: true + } + }, + + // Icon Button + MuiIconButton: { + styleOverrides: { + root: { + padding: getSpacing(0.75), + borderRadius: getSpacing(0.5), + color: commonPalette.text.primary + }, + sizeSmall: { + padding: getSpacing(0.25) + } + } + }, + + // MuiToggleButton + MuiToggleButton: { + styleOverrides: { + root: { + width: getSpacing(4.5), + height: getSpacing(4.5), + border: 'none', + borderRadius: getSpacing(0.5), + color: commonPalette.grey[500], + '&.Mui-selected': { + color: commonPalette.primary.main, + backgroundColor: commonPalette.primary.background, + '&:hover': { + backgroundColor: commonPalette.primary.background + } + } + }, + sizeSmall: { + width: getSpacing(3), + height: getSpacing(3), + '& .MuiSvgIcon-root': { + maxWidth: getSpacing(2.5), + maxHeight: getSpacing(2.5) + } + }, + sizeLarge: { + width: getSpacing(7), + height: getSpacing(7) + } + } + }, + + // MuiToggleButtonGroup + MuiToggleButtonGroup: { + defaultProps: { + orientation: 'horizontal', + exclusive: true + }, + + styleOverrides: { + groupedHorizontal: { + '&:not(:last-child)': { + marginRight: getSpacing(0.25), + borderTopRightRadius: getSpacing(0.5), + borderBottomRightRadius: getSpacing(0.5) + }, + '&:not(:first-child)': { + marginLeft: 0, + borderLeft: 'none', + borderTopLeftRadius: getSpacing(0.5), + borderBottomLeftRadius: getSpacing(0.5) + } + }, + groupedVertical: { + '&:not(:last-child)': { + marginBottom: getSpacing(0.25), + borderBottomLeftRadius: getSpacing(0.5), + borderBottomRightRadius: getSpacing(0.5) + }, + '&:not(:first-child)': { + borderTopLeftRadius: getSpacing(0.5), + borderTopRightRadius: getSpacing(0.5) + } + } + } + } +}; diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js new file mode 100644 index 000000000..64cf0fa3d --- /dev/null +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -0,0 +1,270 @@ +import { getSpacing } from '../../themeUtils'; +import { commonPalette } from '../palette'; +import { themeTypography } from '../typography'; + +export const dataDisplayOverrides = { + // Divider + MuiDivider: { + styleOverrides: { + root: { + backgroundColor: commonPalette.divider + }, + light: { + backgroundColor: commonPalette.grey[50] + } + } + }, + + // List + MuiList: { + styleOverrides: { + root: { + // Indent sublevels, ugly but needed to avoid issues with hover + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: getSpacing(4) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: getSpacing(6) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: getSpacing(8) + }, + + '& .MuiList-root': { + '& .MuiListItem-root': { + paddingLeft: getSpacing(10) + } + } + } + } + } + } + } + }, + + // List Item + MuiListItemText: { + defaultProps: { + primaryTypographyProps: { + variant: 'body2', + style: { fontWeight: themeTypography.fontWeightBold }, + noWrap: true + }, + secondaryTypographyProps: { variant: 'caption' } + } + }, + MuiListItemIcon: { + styleOverrides: { + root: { + minWidth: getSpacing(5.75), + marginLeft: getSpacing(0.75), + + '& .MuiSvgIcon-root': { + fontSize: getSpacing(3) + } + } + } + }, + MuiListItemAvatar: { + styleOverrides: { + root: { + '& .MuiAvatar-root': { + height: getSpacing(4.5), + width: getSpacing(4.5) + }, + '& .MuiSvgIcon-root': { + fontSize: getSpacing(2.5) + } + } + } + }, + + // Tooltip + MuiTooltip: { + styleOverrides: { + tooltip: { + ...themeTypography.caption, + backgroundColor: commonPalette.black[90] + }, + + arrow: { + color: commonPalette.black[90] + } + } + }, + + // Dialog + MuiDialog: { + defaultProps: { + maxWidth: 'md' + } + }, + MuiDialogTitle: { + styleOverrides: { + root: { + padding: getSpacing(3, 3, 2) + } + } + }, + MuiDialogContent: { + styleOverrides: { + root: { + '& .MuiFormGroup-root': { + padding: getSpacing(1, 0) + } + } + } + }, + MuiDialogContentText: { + defaultProps: { + variant: 'body2' + } + }, + + // Table + MuiTablePagination: { + styleOverrides: { + select: { + paddingRight: getSpacing(7.5), + paddingLeft: getSpacing(1.5) + }, + input: { + height: getSpacing(4), + border: `2px solid ${commonPalette.divider}`, + borderRadius: getSpacing(0.5), + fontWeight: themeTypography.fontWeightMedium, + '& .MuiSelect-icon': { + top: '50%', + transform: 'translateY(-50%)', + width: getSpacing(2.25), + height: getSpacing(2.25), + right: getSpacing(0.75) + } + }, + caption: { + ...themeTypography.caption, + '&:first-of-type': { + color: commonPalette.text.secondary + } + }, + toolbar: { + minHeight: 0, + marginTop: getSpacing(1) + }, + actions: { + '& button:last-child': { + marginLeft: getSpacing(2) + } + } + } + }, + MuiTableCell: { + styleOverrides: { + head: { + ...themeTypography.caption, + color: commonPalette.text.secondary + }, + stickyHeader: { + backgroundColor: commonPalette.common.white + } + } + }, + + // Chip + MuiChip: { + styleOverrides: { + root: { + backgroundColor: commonPalette.grey[100], + '&:hover': { + backgroundColor: commonPalette.grey[200] + }, + '& .MuiAvatar-root': { + backgroundColor: '#7f3c8d', + color: commonPalette.common.white + } + }, + colorPrimary: { + '&.Mui-disabled': { + backgroundColor: commonPalette.grey[100], + color: commonPalette.text.primary + }, + '&:hover': { + backgroundColor: commonPalette.primary.dark + } + }, + colorSecondary: { + '&.Mui-disabled': { + backgroundColor: commonPalette.grey[100] + }, + '&:hover': { + backgroundColor: commonPalette.secondary.light + } + }, + label: { + fontFamily: '"Open Sans", sans-serif', + letterSpacing: 0.25 + }, + labelSmall: { + fontSize: themeTypography.caption.fontSize, + fontWeight: themeTypography.fontWeightLight + }, + outlined: { + transition: `border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)`, + '&.Mui-disabled': { + backgroundColor: 'transparent' + }, + '&:hover': { + backgroundColor: 'transparent', + borderColor: commonPalette.grey[200], + '&.MuiChip-clickable': { + backgroundColor: 'transparent' + } + } + }, + outlinedPrimary: { + '&:hover': { + backgroundColor: 'transparent', + borderColor: commonPalette.primary.dark, + color: commonPalette.primary.dark, + '&.MuiChip-clickable': { + backgroundColor: 'transparent' + } + } + }, + outlinedSecondary: { + '&:hover': { + backgroundColor: 'transparent', + borderColor: commonPalette.secondary.dark, + color: commonPalette.secondary.dark, + '&.MuiChip-clickable': { + backgroundColor: 'transparent' + } + } + }, + clickable: { + '&:focus': { + webkitTapHighlightColor: 'none' + } + } + } + }, + + // Skeleton + MuiSkeleton: { + defaultProps: { + animation: 'wave' + } + }, + + // Typography + MuiTypography: { + defaultProps: { + color: 'textPrimary' + } + } +}; diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js new file mode 100644 index 000000000..f92f21517 --- /dev/null +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -0,0 +1,440 @@ +import { getSpacing } from '../../themeUtils'; +import { commonPalette } from '../palette'; +import { themeTypography } from '../typography'; + +export const formsOverrides = { + // Input + MuiInputBase: { + styleOverrides: { + root: { + '&.Mui-disabled .MuiInputAdornment-root': { + color: commonPalette.action.disabled + }, + '&.Mui-disabled .MuiTypography-root': { + color: commonPalette.action.disabled + } + } + } + }, + + // Outlined Input + MuiOutlinedInput: { + defaultProps: { + notched: false + }, + styleOverrides: { + root: { + '&.Mui-disabled': { + backgroundColor: commonPalette.action.hover + } + }, + + input: { + ...themeTypography.body1, + height: `${themeTypography.body1.lineHeight}em`, + padding: getSpacing(3, 2, 1) + }, + + inputMarginDense: { + ...themeTypography.body2, + height: `${themeTypography.body2.lineHeight}em`, + padding: getSpacing(1, 1.5), + paddingTop: getSpacing(1), + paddingBottom: getSpacing(1) + }, + + adornedStart: { + '&.MuiFormControl-marginDense': { + paddingLeft: getSpacing(1.5) + } + }, + adornedEnd: { + '&.MuiFormControl-marginDense': { + paddingRight: getSpacing(1.5) + } + }, + + notchedOutline: { + border: `2px solid ${commonPalette.text.disabled}` + }, + + multiline: { + padding: getSpacing(2.75, 2, 1.25) + } + } + }, + + // Label + MuiInputLabel: { + styleOverrides: { + root: { + ...themeTypography.body1 + }, + + formControl: { + transform: 'translate(16px, 20px) scale(1)', + + '&.MuiInputLabel-shrink': { + ...themeTypography.caption, + transform: 'translate(16px, 8px) scale(1)' + }, + + '&.MuiFormControl-marginDense': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)', + + '&.MuiInputLabel-shrink': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)' + } + } + }, + + outlined: { + '&.MuiInputLabel-shrink': { + ...themeTypography.caption, + transform: 'translate(16px, 8px) scale(1)' + }, + + '&.MuiFormControl-marginDense': { + ...themeTypography.caption, + transform: 'translate(0, -20px) scale(1)', + + '&.MuiInputLabel-shrink': { + transform: 'translate(0, -20px) scale(1)' + } + } + } + } + }, + + // Input Adornment + MuiInputAdornment: { + defaultProps: { + disableTypography: true + }, + + styleOverrides: { + root: { + ...themeTypography.body1, + alignItems: 'baseline', + marginBottom: getSpacing(1.5), + color: commonPalette.text.secondary, + + '&:disabled': { + color: commonPalette.action.disabled + }, + + '& .MuiSvgIcon-root': { + fontSize: `${themeTypography.body1.lineHeight}em` + } + }, + + positionStart: { + marginLeft: getSpacing(0.25) + }, + + positionEnd: { + marginRight: getSpacing(0.25) + }, + + marginDense: { + marginBottom: getSpacing(0), + alignItems: 'center', + ...themeTypography.body2, + + '& .MuiTypography-root': { + ...themeTypography.body2 + }, + + '& .MuiSvgIcon-root': { + fontSize: `${themeTypography.body2.lineHeight}em` + } + } + } + }, + + // Text Field + MuiTextField: { + defaultProps: { + variant: 'outlined' + } + }, + + // Form Helper Text + MuiFormHelperText: { + styleOverrides: { + root: { + ...themeTypography.caption, + '&.MuiFormHelperText-contained': { + marginTop: getSpacing(1) + } + }, + + marginDense: { + '&.MuiFormHelperText-contained': { + marginLeft: getSpacing(0) + } + } + } + }, + + // Form Control + MuiFormControl: { + styleOverrides: { + root: { + width: '100%' + } + } + }, + + // Select + MuiSelect: { + defaultProps: { + variant: 'outlined', + MenuProps: { + getContentAnchorEl: null, + anchorOrigin: { + vertical: 'bottom', + horizontal: 'left' + } + } + }, + styleOverrides: { + root: { + '&:hover': { + backgroundColor: 'transparent' + } + }, + + select: { + '&:focus': { + backgroundColor: 'transparent' + } + } + } + }, + + // Autocomplete + MuiAutocomplete: { + styleOverrides: { + inputRoot: { + '&[class*="MuiOutlinedInput-root"]': { + padding: getSpacing(3, 1.25, 0.5), + + '& .MuiAutocomplete-input': { + padding: getSpacing(0, 1.25, 0.5) + } + }, + '&.MuiInputBase-marginDense.MuiOutlinedInput-root .MuiInputBase-input.MuiOutlinedInput-inputMarginDense': + { + paddingTop: getSpacing(0.25), + paddingBottom: getSpacing(0.25) + } + } + } + }, + + // Checkbox + MuiCheckbox: { + defaultProps: { + size: 'small', + color: 'primary' + }, + styleOverrides: { + root: { + ...themeTypography.body2, + padding: getSpacing(0.75), + borderRadius: '50%', + + '& + .MuiFormControlLabel-label': { + ...themeTypography.body2, + marginLeft: getSpacing(0.25), + color: commonPalette.text.primary + }, + + '& .MuiSvgIcon-root': { + fontSize: getSpacing(3) + } + } + } + }, + + // Radio Button + MuiRadio: { + defaultProps: { + size: 'small', + color: 'primary' + }, + styleOverrides: { + root: { + ...themeTypography.body2, + padding: getSpacing(0.75), + borderRadius: '50%', + + '& + .MuiFormControlLabel-label': { + ...themeTypography.body2, + marginLeft: getSpacing(0.25), + color: commonPalette.text.primary + }, + + '& .MuiSvgIcon-root': { + fontSize: getSpacing(3) + } + } + } + }, + + // Switch + MuiSwitch: { + defaultProps: { + color: 'primary' + }, + styleOverrides: { + root: { + height: getSpacing(4.5), + width: getSpacing(6), + padding: getSpacing(1), + overflow: 'visible', + + '& + .MuiFormControlLabel-label': { + ...themeTypography.body2, + marginLeft: getSpacing(0.25), + color: commonPalette.text.primary + } + }, + + switchBase: { + padding: getSpacing(1.5), + borderRadius: '50%', + transform: 'translate(1px, 1px)', + color: commonPalette.text.secondary, + + '&.Mui-checked': { + '& input': { + left: getSpacing(-1.5) + }, + + transform: 'translate(13px, 1px)', + color: commonPalette.common.white, + + '& + .MuiSwitch-track': { + opacity: 1 + } + } + }, + + thumb: { + width: getSpacing(1.25), + height: getSpacing(1.25), + boxShadow: 'none' + }, + + input: { + width: getSpacing(6), + left: 0 + }, + + track: { + height: 'auto', + border: `2px solid ${commonPalette.text.secondary}`, + borderRadius: getSpacing(2), + opacity: 1, + backgroundColor: commonPalette.common.white + }, + + colorPrimary: { + '&.Mui-checked': { + color: commonPalette.common.white, + + '& + .MuiSwitch-track': { + backgroundColor: commonPalette.primary.main, + borderColor: 'transparent' + }, + + '&.Mui-disabled': { + color: commonPalette.grey[100], + + '& + .MuiSwitch-track': { + backgroundColor: commonPalette.text.disabled + } + } + }, + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + + '& + .MuiSwitch-track': { + opacity: 1, + backgroundColor: commonPalette.common.white, + borderColor: commonPalette.text.disabled + } + } + }, + + colorSecondary: { + '&.Mui-checked': { + color: commonPalette.common.white, + + '& + .MuiSwitch-track': { + backgroundColor: commonPalette.secondary.main, + borderColor: 'transparent' + }, + + '&.Mui-disabled': { + color: commonPalette.grey[100], + + '& + .MuiSwitch-track': { + backgroundColor: commonPalette.text.disabled + } + } + }, + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + + '& + .MuiSwitch-track': { + opacity: 1, + backgroundColor: commonPalette.common.white, + borderColor: commonPalette.text.disabled + } + } + }, + + sizeSmall: { + height: getSpacing(4.5), + width: getSpacing(6), + padding: getSpacing(1), + + '& .MuiSwitch-switchBase': { + padding: getSpacing(1.5), + transform: 'translate(0, 1px)', + + '&.Mui-checked': { + transform: 'translate(15px, 1px)' + } + }, + '& .MuiSwitch-thumb': { + width: getSpacing(1.25), + height: getSpacing(1.25) + } + } + } + }, + + // Circular Progress + CircularProgress: { + defaultProps: { + size: 40, + thickness: 4 + } + }, + + // Slider + MuiSlider: { + defaultProps: { + color: 'primary', + marks: false + } + } +}; diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js new file mode 100644 index 000000000..75f07a58a --- /dev/null +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -0,0 +1,101 @@ +import { getSpacing } from '../../themeUtils'; +import { commonPalette } from '../palette'; +import { themeTypography } from '../typography'; + +export const navigationOverrides = { + // Menu + MuiMenuItem: { + styleOverrides: { + root: { + ...themeTypography.body2 + } + } + }, + + // Tabs + MuiTabs: { + defaultProps: { + indicatorColor: 'primary', + textColor: 'primary', + TabIndicatorProps: { + classes: { + colorPrimary: 'colorPrimary' + } + } + }, + styleOverrides: { + indicator: { + height: 4, + '&.colorPrimary': { + backgroundColor: commonPalette.text.primary + } + }, + + vertical: { + '& .MuiTabs-indicator': { + width: 4 + }, + + '& .MuiTab-root': { + padding: getSpacing(0, 2), + + '& .MuiTab-wrapper': { + alignItems: 'flex-start' + } + } + } + } + }, + + // Tab + MuiTab: { + styleOverrides: { + root: { + padding: getSpacing(0, 1), + marginRight: getSpacing(3), + minWidth: '56px!important', + '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper': { + flexFlow: 'row', + alignItems: 'center' + }, + '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper > .MuiSvgIcon-root': { + marginRight: getSpacing(1), + marginBottom: 0 + } + }, + textColorPrimary: { + color: commonPalette.primary.main, + opacity: 1, + '&.Mui-selected': { + color: commonPalette.text.primary + }, + '&.Mui-disabled': { + color: commonPalette.action.disabled + } + } + } + }, + + // Breadcrumbs + MuiBreadcrumbs: { + styleOverrides: { + li: { + '& .MuiTypography-root': { + ...themeTypography.body2, + display: 'flex', + flexDirection: 'row', + alignItems: 'center' + }, + '& .MuiSvgIcon-root': { + fontSize: `${themeTypography.body2.lineHeight}em`, + marginRight: getSpacing(1) + } + }, + + separator: { + marginLeft: getSpacing(0.5), + marginRight: getSpacing(0.5) + } + } + } +}; diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index c75ee08a7..ce0d6ab7d 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 017a116cb..7a9ef5a71 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-1", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-2", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From b73923e120bcd5ddd27784d9d166f51ac388086c Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 2 Nov 2022 13:47:12 +0100 Subject: [PATCH 23/42] components --- CHANGELOG.md | 2 + UPGRADE.md | 2 +- lerna.json | 2 +- packages/react-api/package.json | 8 +- packages/react-auth/package.json | 4 +- packages/react-basemaps/package.json | 4 +- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 6 +- packages/react-ui/package.json | 4 +- packages/react-ui/src/index.d.ts | 3 +- packages/react-ui/src/index.js | 3 +- packages/react-ui/src/theme/carto-theme.d.ts | 18 ++- packages/react-ui/src/theme/carto-theme.js | 5 + .../theme/sections/components/dataDisplay.js | 4 +- .../src/theme/sections/components/forms.js | 10 +- .../theme/sections/components/navigation.js | 4 +- .../src/theme/sections/cssBaseline.js | 134 +++++++++--------- packages/react-ui/src/widgets/BarWidgetUI.js | 4 - .../react-ui/src/widgets/CategoryWidgetUI.js | 6 +- .../HistogramWidgetUI/HistogramWidgetUI.js | 4 - .../react-ui/src/widgets/OpacityControl.js | 2 +- .../react-ui/src/widgets/RangeWidgetUI.js | 4 +- .../widgets/TableWidgetUI/TableWidgetUI.js | 2 - .../react-ui/src/widgets/WrapperWidgetUI.js | 7 +- .../src/widgets/legend/LegendWidgetUI.js | 5 +- .../src/widgets/legend/LegendWrapper.js | 7 +- .../stories/common/Autocomplete.stories.js | 6 + .../stories/common/Breadcrumb.stories.js | 6 + .../stories/common/Button.stories.js | 2 +- .../stories/common/ButtonGroup.stories.js | 2 +- .../stories/common/Checkbox.stories.js | 2 +- .../storybook/stories/common/Chip.stories.js | 6 + .../stories/common/Dialog.stories.js | 6 + .../stories/common/Divider.stories.js | 8 +- .../storybook/stories/common/List.stories.js | 8 +- .../storybook/stories/common/Paper.stories.js | 6 + .../stories/common/Progress.stories.js | 6 + .../storybook/stories/common/Radio.stories.js | 2 +- .../stories/common/Select.stories.js | 2 +- .../stories/common/Slider.stories.js | 10 +- .../stories/common/Switch.stories.js | 2 +- .../storybook/stories/common/Tabs.stories.js | 6 + .../stories/common/Text-field.stories.js | 6 +- .../stories/common/ToggleButton.stories.js | 2 +- .../stories/common/Tooltip.stories.js | 2 +- .../stories/organisms/InputFile.stories.js | 2 +- packages/react-widgets/package.json | 12 +- packages/react-workers/package.json | 4 +- 48 files changed, 203 insertions(+), 161 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 72441d12f..410554f95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,9 @@ ## Not released +- Breaking changes in Mui v5: components [#518](https://github.com/CartoDB/carto-react/pull/518) - Breaking changes in Mui v5: styles and theme [#514](https://github.com/CartoDB/carto-react/pull/514/) +- Add final Figma links into Storybook [#515](https://github.com/CartoDB/carto-react/pull/515) - Breakpoints for the new design system [#513](https://github.com/CartoDB/carto-react/pull/513/) - New Typography component to extend Mui Typography [#506](https://github.com/CartoDB/carto-react/pull/506) - New spacings, borders and shadows toolkit for MUI carto-theme [#507](https://github.com/CartoDB/carto-react/pull/507/) diff --git a/UPGRADE.md b/UPGRADE.md index f5193cbe6..e01485a7f 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -25,7 +25,7 @@ We have a new custom spacing constant in carto-theme, `spacingValue`, which you Note that if you're using `calc()` in your styles, you can keep using `theme.spacing()` as usual. -# Typography +## Typography `responsiveFontSizes` simplified due we want to resize only a few variants through the theme. diff --git a/lerna.json b/lerna.json index 301648be0..07c86c0e3 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2" + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index f4b45d5a1..4d55887e7 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/extensions": "^8.9.0-alpha.4", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 1bfa4065b..adc5c3953 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "react": "^17.0.1", "react-dom": "^17.0.1" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 90b3c34c8..615b51048 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Basemaps", "keywords": [ "carto", @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@deck.gl/google-maps": "^8.9.0-alpha.4", "react": "^17.0.1", "react-dom": "^17.0.1" diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 7c79b9271..1de6c8623 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index ce58b6573..e65e79f1c 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@deck.gl/carto": "^8.9.0-alpha.4", "@deck.gl/core": "^8.9.0-alpha.4", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 866466f53..cef97e0d9 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ @@ -77,7 +77,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@mui/icons-material": "^5.10.9", diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index 7b89a10a4..b6faed108 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -1,4 +1,4 @@ -import { cartoThemeOptions, CartoTheme } from './theme/carto-theme'; +import { theme, cartoThemeOptions, CartoTheme } from './theme/carto-theme'; import WrapperWidgetUI from './widgets/WrapperWidgetUI'; import CategoryWidgetUI from './widgets/CategoryWidgetUI'; import FormulaWidgetUI from './widgets/FormulaWidgetUI'; @@ -25,6 +25,7 @@ import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI'; import Typography from './atoms/Typography'; export { + theme, cartoThemeOptions, CartoTheme, WrapperWidgetUI, diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index 8ab3ff496..0eb003dd7 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -1,4 +1,4 @@ -import { cartoThemeOptions } from './theme/carto-theme'; +import { theme, cartoThemeOptions } from './theme/carto-theme'; import WrapperWidgetUI from './widgets/WrapperWidgetUI'; import CategoryWidgetUI from './widgets/CategoryWidgetUI'; import FormulaWidgetUI from './widgets/FormulaWidgetUI'; @@ -33,6 +33,7 @@ const featureSelectionIcons = { }; export { + theme, cartoThemeOptions, WrapperWidgetUI, CategoryWidgetUI, diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index eec2762a7..8b51966aa 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -1,12 +1,9 @@ import { Theme, ThemeOptions, TypeText } from '@mui/material'; import { Palette, PaletteColor } from '@mui/material'; -/* - TODO: Review if this set of changes in the type of Palette and PaletteColor, to properly use theme - from TypeScript clients, is still required and if it needs to be fully extended to reflect the new - color structure (custom keys & props) -*/ + export const cartoThemeOptions: ThemeOptions; +export const theme: CartoTheme; type Modify = Omit & R; @@ -70,6 +67,7 @@ type CustomPalette = Modify< } >; +// If we get every client to use 'default' theme types, module augmentation probably would allow us omiting this export export type CartoTheme = Modify< Theme, { @@ -78,6 +76,16 @@ export type CartoTheme = Modify< } >; +/* + Module augmentation, to allow a better experience when using carto-react from + TypeScript clients (eg: *makeStyles* using 'DefaultTheme' | *useTheme* using 'Theme') +*/ + +declare module '@mui/styles/defaultTheme' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + interface DefaultTheme extends CartoTheme {} +} + declare module '@mui/material/styles' { // Check https://mui.com/material-ui/customization/theming/#custom-variables interface Theme { diff --git a/packages/react-ui/src/theme/carto-theme.js b/packages/react-ui/src/theme/carto-theme.js index da070fd03..a121acddd 100644 --- a/packages/react-ui/src/theme/carto-theme.js +++ b/packages/react-ui/src/theme/carto-theme.js @@ -1,3 +1,5 @@ +import { createTheme, responsiveFontSizes } from '@mui/material'; + import { dataDisplayOverrides } from './sections/components/dataDisplay'; import { buttonsOverrides } from './sections/components/buttons'; import { formsOverrides } from './sections/components/forms'; @@ -116,3 +118,6 @@ export const cartoThemeOptions = { ...dataDisplayOverrides } }; + +// @ts-ignore +export const theme = responsiveFontSizes(createTheme(cartoThemeOptions)); diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index 64cf0fa3d..d9364d925 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -7,10 +7,10 @@ export const dataDisplayOverrides = { MuiDivider: { styleOverrides: { root: { - backgroundColor: commonPalette.divider + borderColor: commonPalette.divider }, light: { - backgroundColor: commonPalette.grey[50] + borderColor: commonPalette.grey[50] } } }, diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index f92f21517..c5f6aa795 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -193,7 +193,6 @@ export const formsOverrides = { defaultProps: { variant: 'outlined', MenuProps: { - getContentAnchorEl: null, anchorOrigin: { vertical: 'bottom', horizontal: 'left' @@ -238,8 +237,7 @@ export const formsOverrides = { // Checkbox MuiCheckbox: { defaultProps: { - size: 'small', - color: 'primary' + size: 'small' }, styleOverrides: { root: { @@ -263,8 +261,7 @@ export const formsOverrides = { // Radio Button MuiRadio: { defaultProps: { - size: 'small', - color: 'primary' + size: 'small' }, styleOverrides: { root: { @@ -287,9 +284,6 @@ export const formsOverrides = { // Switch MuiSwitch: { - defaultProps: { - color: 'primary' - }, styleOverrides: { root: { height: getSpacing(4.5), diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js index 75f07a58a..b9c372d1c 100644 --- a/packages/react-ui/src/theme/sections/components/navigation.js +++ b/packages/react-ui/src/theme/sections/components/navigation.js @@ -54,11 +54,11 @@ export const navigationOverrides = { padding: getSpacing(0, 1), marginRight: getSpacing(3), minWidth: '56px!important', - '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper': { + '&[class*="MuiTab-labelIcon"]': { flexFlow: 'row', alignItems: 'center' }, - '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper > .MuiSvgIcon-root': { + '&[class*="MuiTab-labelIcon"] .MuiSvgIcon-root': { marginRight: getSpacing(1), marginBottom: 0 } diff --git a/packages/react-ui/src/theme/sections/cssBaseline.js b/packages/react-ui/src/theme/sections/cssBaseline.js index c939d034a..b05919bc9 100644 --- a/packages/react-ui/src/theme/sections/cssBaseline.js +++ b/packages/react-ui/src/theme/sections/cssBaseline.js @@ -3,86 +3,84 @@ import { commonPalette } from './palette'; import { themeTypography } from './typography'; export const CssBaseline = { - '@global': { - // Custom scrollbars - '*::-webkit-scrollbar': { - position: 'fixed', - width: '5px' - }, - '*::-webkit-scrollbar-track': { - '-webkit-box-shadow': 'none', - background: 'transparent' - }, - '*::-webkit-scrollbar-thumb': { - borderRadius: '3px', - background: commonPalette.action.focus, - outline: 'none' - }, + // Custom scrollbars + '*::-webkit-scrollbar': { + position: 'fixed', + width: '5px' + }, + '*::-webkit-scrollbar-track': { + '-webkit-box-shadow': 'none', + background: 'transparent' + }, + '*::-webkit-scrollbar-thumb': { + borderRadius: '3px', + background: commonPalette.action.focus, + outline: 'none' + }, + + // iOS Search clear button + 'input[type="search"]::-webkit-search-cancel-button': { + '-webkit-appearance': 'none', + height: getSpacing(2), + width: getSpacing(2), + display: 'block', + backgroundImage: `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC)`, + backgroundRepeat: 'no-repeat', + backgroundSize: getSpacing(2) + }, + + // Mapbox controls + '.mapboxgl-ctrl.mapboxgl-ctrl-attrib': { + padding: getSpacing(0, 1), + borderRadius: getSpacing(0.5, 0, 0, 0), - // iOS Search clear button - 'input[type="search"]::-webkit-search-cancel-button': { - '-webkit-appearance': 'none', - height: getSpacing(2), - width: getSpacing(2), - display: 'block', - backgroundImage: `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC)`, - backgroundRepeat: 'no-repeat', - backgroundSize: getSpacing(2) + '& .mapboxgl-ctrl-attrib-inner': { + ...themeTypography.overline, + textTransform: 'none', + letterSpacing: '0.75px', + + '& a': { + color: commonPalette.primary.main + } }, - // Mapbox controls - '.mapboxgl-ctrl.mapboxgl-ctrl-attrib': { - padding: getSpacing(0, 1), - borderRadius: getSpacing(0.5, 0, 0, 0), + '&.mapboxgl-compact': { + backgroundColor: 'transparent', + right: getSpacing(0.5), + bottom: getSpacing(2.5), - '& .mapboxgl-ctrl-attrib-inner': { - ...themeTypography.overline, - textTransform: 'none', - letterSpacing: '0.75px', + // Mobile + '@media (max-width: 600px)': { + bottom: getSpacing(0.5) + }, - '& a': { - color: commonPalette.primary.main + '& .mapboxgl-ctrl-attrib-button': { + backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cg%3E%3Crect%20fill='none'%20height='24'%20width='24'%20x='0'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath%20d='M11.88,9.14c1.28,0.06,1.61,1.15,1.63,1.66h1.79c-0.08-1.98-1.49-3.19-3.45-3.19C9.64,7.61,8,9,8,12.14%20c0,1.94,0.93,4.24,3.84,4.24c2.22,0,3.41-1.65,3.44-2.95h-1.79c-0.03,0.59-0.45,1.38-1.63,1.44C10.55,14.83,10,13.81,10,12.14%20C10,9.25,11.28,9.16,11.88,9.14z%20M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z%20M12,20c-4.41,0-8-3.59-8-8%20s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z'%20fill='${commonPalette.text.secondary}'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`, + backgroundColor: 'rgba(255,255,255,.8)', + top: 'auto', + bottom: 0, + right: 0, + + '&:not(:disabled):hover': { + backgroundColor: 'rgba(255,255,255,.8)' } }, - '&.mapboxgl-compact': { - backgroundColor: 'transparent', - right: getSpacing(0.5), - bottom: getSpacing(2.5), - - // Mobile - '@media (max-width: 600px)': { - bottom: getSpacing(0.5) - }, + '& .mapboxgl-ctrl-attrib-inner': { + backgroundColor: 'rgba(255,255,255,.8)', + padding: getSpacing(0.5, 1), + borderRadius: getSpacing(1.5), + marginRight: getSpacing(2.5), + color: commonPalette.text.secondary + }, + '&.mapboxgl-compact-show': { '& .mapboxgl-ctrl-attrib-button': { - backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cg%3E%3Crect%20fill='none'%20height='24'%20width='24'%20x='0'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath%20d='M11.88,9.14c1.28,0.06,1.61,1.15,1.63,1.66h1.79c-0.08-1.98-1.49-3.19-3.45-3.19C9.64,7.61,8,9,8,12.14%20c0,1.94,0.93,4.24,3.84,4.24c2.22,0,3.41-1.65,3.44-2.95h-1.79c-0.03,0.59-0.45,1.38-1.63,1.44C10.55,14.83,10,13.81,10,12.14%20C10,9.25,11.28,9.16,11.88,9.14z%20M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z%20M12,20c-4.41,0-8-3.59-8-8%20s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z'%20fill='${commonPalette.text.secondary}'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`, - backgroundColor: 'rgba(255,255,255,.8)', - top: 'auto', - bottom: 0, - right: 0, + backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3Cpath%20d='M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%20fill='white'/%3E%3C/svg%3E")`, + backgroundColor: commonPalette.common.black, '&:not(:disabled):hover': { - backgroundColor: 'rgba(255,255,255,.8)' - } - }, - - '& .mapboxgl-ctrl-attrib-inner': { - backgroundColor: 'rgba(255,255,255,.8)', - padding: getSpacing(0.5, 1), - borderRadius: getSpacing(1.5), - marginRight: getSpacing(2.5), - color: commonPalette.text.secondary - }, - - '&.mapboxgl-compact-show': { - '& .mapboxgl-ctrl-attrib-button': { - backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3Cpath%20d='M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%20fill='white'/%3E%3C/svg%3E")`, - backgroundColor: commonPalette.common.black, - - '&:not(:disabled):hover': { - backgroundColor: commonPalette.common.black - } + backgroundColor: commonPalette.common.black } } } diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index d2754fbe1..dc5d344ce 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -15,10 +15,6 @@ const useStyles = makeStyles((theme) => ({ '& .MuiTypography-caption': { color: theme.palette.text.secondary - }, - - '& .MuiButton-label': { - ...theme.typography.caption } }, diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index 0c1d63550..554378546 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -32,7 +32,7 @@ const useStyles = makeStyles((theme) => ({ cursor: 'pointer', flexWrap: 'nowrap', - '&:hover $progressbar div': { + '&:hover .progressbar div': { backgroundColor: theme.palette.secondary.dark } }, @@ -91,10 +91,6 @@ const useStyles = makeStyles((theme) => ({ '& .MuiTypography-caption': { color: theme.palette.text.secondary - }, - - '& .MuiButton-label': { - ...theme.typography.caption } }, diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index 4ecf9db33..cdfef2f93 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -17,10 +17,6 @@ const useStyles = makeStyles((theme) => ({ '& .MuiTypography-caption': { color: theme.palette.text.secondary - }, - - '& .MuiButton-label': { - ...theme.typography.caption } }, clearButton: { diff --git a/packages/react-ui/src/widgets/OpacityControl.js b/packages/react-ui/src/widgets/OpacityControl.js index d141a15e4..98169f7b7 100644 --- a/packages/react-ui/src/widgets/OpacityControl.js +++ b/packages/react-ui/src/widgets/OpacityControl.js @@ -58,7 +58,7 @@ export default function OpacityControl({ opacity, onChangeOpacity }) { handleInputChange(event, 0)} onBlur={() => handleInputBlur(0)} inputProps={{ @@ -207,7 +207,7 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { handleInputChange(event, 1)} onBlur={() => handleInputBlur(1)} inputProps={{ diff --git a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js index 120a50f13..a3ad1c858 100644 --- a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js +++ b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js @@ -56,7 +56,6 @@ function TableWidgetUI({ height, dense }) { - const classes = useStyles(); const paginationRef = useRef(null); const handleSort = (sortField) => { @@ -97,7 +96,6 @@ function TableWidgetUI({ {pagination && ( ({ alignItems: 'flex-start', justifyContent: 'flex-start', cursor: (props) => (props.expandable ? 'pointer' : 'default'), - '& .MuiButton-label': { - ...theme.typography.body1, - '& .MuiButton-startIcon': { - marginRight: theme.spacing(1) - } + '& .MuiButton-startIcon': { + marginRight: theme.spacing(1) }, '&:hover': { background: 'none' diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index 78b8cc7ba..6b19ca8ce 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -109,10 +109,7 @@ const useStylesLegendContainer = makeStyles((theme) => ({ padding: theme.spacing(0.75, 1.25, 0.75, 3), borderTop: ({ collapsed }) => collapsed ? 'none' : `1px solid ${theme.palette.divider}`, - cursor: 'pointer', - '& .MuiButton-label': { - ...theme.typography.body1 - } + cursor: 'pointer' }, wrapperInner: { maxHeight: 'max(350px, 80vh)', diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js index bccd8ead6..64c18a4f6 100644 --- a/packages/react-ui/src/widgets/legend/LegendWrapper.js +++ b/packages/react-ui/src/widgets/legend/LegendWrapper.js @@ -122,12 +122,9 @@ const useHeaderStyles = makeStyles((theme) => ({ flex: '1 1 auto', justifyContent: 'flex-start', cursor: ({ collapsible }) => (collapsible ? 'pointer' : 'default'), - '& .MuiButton-label': { - ...theme.typography.body1, - '& .MuiButton-startIcon': { - marginRight: theme.spacing(1) - } + '& .MuiButton-startIcon': { + marginRight: theme.spacing(1) }, '&:hover': { background: 'none' diff --git a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js index 3cb2b637c..c4aaaa79e 100644 --- a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js @@ -28,6 +28,12 @@ const options = { type: 'boolean' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26505' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js index 04232076a..1051cfd65 100644 --- a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js +++ b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js @@ -12,6 +12,12 @@ const options = { type: 'number' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26153' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Button.stories.js b/packages/react-ui/storybook/stories/common/Button.stories.js index 0f6e26258..8b5f106b8 100644 --- a/packages/react-ui/storybook/stories/common/Button.stories.js +++ b/packages/react-ui/storybook/stories/common/Button.stories.js @@ -37,7 +37,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1303%3A26362' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26509' } } }; diff --git a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js index 64aabad34..4e5613f56 100644 --- a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js @@ -43,7 +43,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1180%3A28045' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A27945' } } }; diff --git a/packages/react-ui/storybook/stories/common/Checkbox.stories.js b/packages/react-ui/storybook/stories/common/Checkbox.stories.js index 7c9d07b20..0bb635b68 100644 --- a/packages/react-ui/storybook/stories/common/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/common/Checkbox.stories.js @@ -30,7 +30,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27131' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28751' } } }; diff --git a/packages/react-ui/storybook/stories/common/Chip.stories.js b/packages/react-ui/storybook/stories/common/Chip.stories.js index 024336f5f..0b6a9feb6 100644 --- a/packages/react-ui/storybook/stories/common/Chip.stories.js +++ b/packages/react-ui/storybook/stories/common/Chip.stories.js @@ -67,6 +67,12 @@ const options = { options: ['default', 'outlined'] } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28895' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/common/Dialog.stories.js index c2281dc84..30d5c2781 100644 --- a/packages/react-ui/storybook/stories/common/Dialog.stories.js +++ b/packages/react-ui/storybook/stories/common/Dialog.stories.js @@ -47,6 +47,12 @@ const options = { options: ['lg', 'md', 'sm', 'xl', 'xs', false] } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28896' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Divider.stories.js b/packages/react-ui/storybook/stories/common/Divider.stories.js index effa846a4..9a3f9a518 100644 --- a/packages/react-ui/storybook/stories/common/Divider.stories.js +++ b/packages/react-ui/storybook/stories/common/Divider.stories.js @@ -11,7 +11,13 @@ import { const options = { title: 'Common/Divider', - component: Divider + component: Divider, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28897' + } + } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/List.stories.js b/packages/react-ui/storybook/stories/common/List.stories.js index 96ff2a083..a7ad83267 100644 --- a/packages/react-ui/storybook/stories/common/List.stories.js +++ b/packages/react-ui/storybook/stories/common/List.stories.js @@ -30,7 +30,13 @@ import { const options = { title: 'Common/List', - component: List + component: List, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29228' + } + } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/common/Paper.stories.js index 0cddc2bca..03e411fde 100644 --- a/packages/react-ui/storybook/stories/common/Paper.stories.js +++ b/packages/react-ui/storybook/stories/common/Paper.stories.js @@ -14,6 +14,12 @@ const options = { square: { control: { type: 'boolean' } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1447%3A38722' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Progress.stories.js b/packages/react-ui/storybook/stories/common/Progress.stories.js index 0be46f21f..7f5c39b11 100644 --- a/packages/react-ui/storybook/stories/common/Progress.stories.js +++ b/packages/react-ui/storybook/stories/common/Progress.stories.js @@ -37,6 +37,12 @@ const options = { options: ['determinate', 'indeterminate', 'static', 'buffer', 'query'] } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29703' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Radio.stories.js b/packages/react-ui/storybook/stories/common/Radio.stories.js index e32578d0d..35400dae7 100644 --- a/packages/react-ui/storybook/stories/common/Radio.stories.js +++ b/packages/react-ui/storybook/stories/common/Radio.stories.js @@ -32,7 +32,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27543' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29704' } } }; diff --git a/packages/react-ui/storybook/stories/common/Select.stories.js b/packages/react-ui/storybook/stories/common/Select.stories.js index 1972a9a89..5c5d6feb4 100644 --- a/packages/react-ui/storybook/stories/common/Select.stories.js +++ b/packages/react-ui/storybook/stories/common/Select.stories.js @@ -47,7 +47,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1145%3A26139' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29965' } } }; diff --git a/packages/react-ui/storybook/stories/common/Slider.stories.js b/packages/react-ui/storybook/stories/common/Slider.stories.js index fec2d1587..6ed3fbb0b 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/common/Slider.stories.js @@ -132,7 +132,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A24517' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A32732' } } }; @@ -185,7 +185,7 @@ const SliderWithInputTemplate = ({ ...args }) => { value={value} onChange={handleInputChange} onBlur={handleBlur} - margin='dense' + size='small' inputProps={{ step: 10, min: 0, @@ -200,7 +200,7 @@ const SliderWithInputTemplate = ({ ...args }) => { }; const CustomLabelTemplate = ({ ...args }) => { - const ValueLabelComponent = (props) => { + const CustomValueLabel = (props) => { const { children, open, value } = props; return ( @@ -213,7 +213,9 @@ const CustomLabelTemplate = ({ ...args }) => { return ( ); diff --git a/packages/react-ui/storybook/stories/common/Switch.stories.js b/packages/react-ui/storybook/stories/common/Switch.stories.js index d45f9fe5b..a3ec9241f 100644 --- a/packages/react-ui/storybook/stories/common/Switch.stories.js +++ b/packages/react-ui/storybook/stories/common/Switch.stories.js @@ -25,7 +25,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1192%3A27889' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33096' } } }; diff --git a/packages/react-ui/storybook/stories/common/Tabs.stories.js b/packages/react-ui/storybook/stories/common/Tabs.stories.js index 19b9631d1..f0d3b7844 100644 --- a/packages/react-ui/storybook/stories/common/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/common/Tabs.stories.js @@ -31,6 +31,12 @@ const options = { options: ['horizontal', 'vertical'] } } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33239' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/common/Text-field.stories.js index 0efa9adc1..b0a60e1ce 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/common/Text-field.stories.js @@ -58,7 +58,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1145%3A19069' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33807' } } }; @@ -319,7 +319,7 @@ Multiline.args = { value: 'Hello world\nwith multiple lines' }; Multiline.parameters = { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A22604' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33542' } }; @@ -328,6 +328,6 @@ MultilineSmall.args = { value: 'Hello world\nwith multiple lines', size: 'small' MultilineSmall.parameters = { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1149%3A22604' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33542' } }; diff --git a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js index a767fd35d..3f7267071 100644 --- a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js @@ -33,7 +33,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1185%3A33114' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36258' } } }; diff --git a/packages/react-ui/storybook/stories/common/Tooltip.stories.js b/packages/react-ui/storybook/stories/common/Tooltip.stories.js index c66a39619..547a7bfea 100644 --- a/packages/react-ui/storybook/stories/common/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/common/Tooltip.stories.js @@ -46,7 +46,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1185%3A33114' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36257' } } }; diff --git a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js index dcd0fd80c..94e80796e 100644 --- a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js +++ b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js @@ -47,7 +47,7 @@ const options = { }, design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1159%3A24236' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36997' } } }; diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index ce0d6ab7d..695ad7716 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", - "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-api": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-core": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-redux": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-ui": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", + "@carto/react-workers": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@deck.gl/core": "^8.9.0-alpha.4", "@deck.gl/layers": "^8.9.0-alpha.4", "@emotion/react": "^11.10.0", diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index 7a9ef5a71..4d67f05c9 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "version": "0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-2", + "@carto/react-core": "^0.0.0-experimental-muiv5-1.5.0-alpha.4-5", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From c05573fbfd9baffc243c6eff475dc70fe0f9f44a Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 2 Nov 2022 18:09:54 +0100 Subject: [PATCH 24/42] add status tag in components --- packages/react-ui/package.json | 1 + .../react-ui/storybook/.storybook/main.js | 3 +- .../react-ui/storybook/.storybook/preview.js | 31 +++++++++++++++++ .../stories/common/Autocomplete.stories.js | 3 ++ .../stories/common/Breadcrumb.stories.js | 3 ++ .../stories/common/Button.stories.js | 3 ++ .../stories/common/ButtonGroup.stories.js | 3 ++ .../stories/common/Checkbox.stories.js | 3 ++ .../storybook/stories/common/Chip.stories.js | 3 ++ .../stories/common/Dialog.stories.js | 3 ++ .../stories/common/Divider.stories.js | 3 ++ .../storybook/stories/common/List.stories.js | 3 ++ .../storybook/stories/common/Paper.stories.js | 3 ++ .../stories/common/Progress.stories.js | 3 ++ .../storybook/stories/common/Radio.stories.js | 3 ++ .../stories/common/Select.stories.js | 3 ++ .../stories/common/Slider.stories.js | 3 ++ .../stories/common/Switch.stories.js | 3 ++ .../storybook/stories/common/Tabs.stories.js | 3 ++ .../stories/common/Text-field.stories.js | 3 ++ .../stories/common/ToggleButton.stories.js | 3 ++ .../stories/common/Tooltip.stories.js | 3 ++ .../stories/foundations/Borders.stories.js | 4 ++- .../foundations/Breakpoints.stories.js | 4 ++- .../stories/foundations/Elevations.stories.js | 4 ++- .../stories/foundations/Palette.stories.js | 4 ++- .../stories/foundations/Spacing.stories.js | 4 ++- .../stories/foundations/Typography.stories.js | 4 ++- yarn.lock | 33 +++++++++++++++---- 29 files changed, 136 insertions(+), 13 deletions(-) diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index cef97e0d9..f6b4191d9 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -47,6 +47,7 @@ "@storybook/addon-essentials": "^6.5.12", "@storybook/addon-links": "^6.5.12", "@storybook/addon-viewport": "^6.5.12", + "@etchteam/storybook-addon-status": "^4.2.2", "@storybook/react": "^6.5.12", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", diff --git a/packages/react-ui/storybook/.storybook/main.js b/packages/react-ui/storybook/.storybook/main.js index a277e5933..bdb261c15 100644 --- a/packages/react-ui/storybook/.storybook/main.js +++ b/packages/react-ui/storybook/.storybook/main.js @@ -4,6 +4,7 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-essentials', 'storybook-addon-designs', - '@storybook/addon-viewport' + '@storybook/addon-viewport', + '@etchteam/storybook-addon-status' ] }; diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index d6e56fd3a..9e4ce06c5 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -54,6 +54,34 @@ const customViewports = { } }; +const componentsStatus = { + deprecated: { + background: '#C1300B', // Error/Main + color: '#ffffff', + description: 'Do not use' + }, + inDevelopment: { + background: '#F29E02', // Warning/Main + color: '#ffffff', + description: 'Work in progress' + }, + readyToReview: { + background: '#024388', // Info/Main + color: '#ffffff', + description: 'Ready to review and validation' + }, + validated: { + background: '#709F1D', // Success/Main + color: '#ffffff', + description: 'Validated and ready to use' + }, + needUpdate: { + background: '#E1E3E4', // Default/Main + color: '#2C3032', + description: 'Need an update' + } +}; + export const decorators = [ (Story) => ( @@ -98,5 +126,8 @@ export const parameters = { decorators: [withDesign], viewport: { viewports: customViewports + }, + status: { + statuses: componentsStatus } }; diff --git a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js index c4aaaa79e..e22ac0ac0 100644 --- a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/common/Autocomplete.stories.js @@ -33,6 +33,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26505' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js index 1051cfd65..eab805bf7 100644 --- a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js +++ b/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js @@ -17,6 +17,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26153' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Button.stories.js b/packages/react-ui/storybook/stories/common/Button.stories.js index 8b5f106b8..abb6e0265 100644 --- a/packages/react-ui/storybook/stories/common/Button.stories.js +++ b/packages/react-ui/storybook/stories/common/Button.stories.js @@ -38,6 +38,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26509' + }, + status: { + type: 'inDevelopment' } } }; diff --git a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js index 4e5613f56..aa52e1bbc 100644 --- a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js @@ -44,6 +44,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A27945' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Checkbox.stories.js b/packages/react-ui/storybook/stories/common/Checkbox.stories.js index 0bb635b68..7b7046789 100644 --- a/packages/react-ui/storybook/stories/common/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/common/Checkbox.stories.js @@ -31,6 +31,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28751' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Chip.stories.js b/packages/react-ui/storybook/stories/common/Chip.stories.js index 0b6a9feb6..2e806dd96 100644 --- a/packages/react-ui/storybook/stories/common/Chip.stories.js +++ b/packages/react-ui/storybook/stories/common/Chip.stories.js @@ -72,6 +72,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28895' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/common/Dialog.stories.js index 30d5c2781..a9e31ff52 100644 --- a/packages/react-ui/storybook/stories/common/Dialog.stories.js +++ b/packages/react-ui/storybook/stories/common/Dialog.stories.js @@ -52,6 +52,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28896' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Divider.stories.js b/packages/react-ui/storybook/stories/common/Divider.stories.js index 9a3f9a518..a95a72d74 100644 --- a/packages/react-ui/storybook/stories/common/Divider.stories.js +++ b/packages/react-ui/storybook/stories/common/Divider.stories.js @@ -16,6 +16,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28897' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/List.stories.js b/packages/react-ui/storybook/stories/common/List.stories.js index a7ad83267..221155785 100644 --- a/packages/react-ui/storybook/stories/common/List.stories.js +++ b/packages/react-ui/storybook/stories/common/List.stories.js @@ -35,6 +35,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29228' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/common/Paper.stories.js index 03e411fde..c59e22a46 100644 --- a/packages/react-ui/storybook/stories/common/Paper.stories.js +++ b/packages/react-ui/storybook/stories/common/Paper.stories.js @@ -19,6 +19,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1447%3A38722' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Progress.stories.js b/packages/react-ui/storybook/stories/common/Progress.stories.js index 7f5c39b11..07fb3df10 100644 --- a/packages/react-ui/storybook/stories/common/Progress.stories.js +++ b/packages/react-ui/storybook/stories/common/Progress.stories.js @@ -42,6 +42,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29703' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Radio.stories.js b/packages/react-ui/storybook/stories/common/Radio.stories.js index 35400dae7..95cb7e47e 100644 --- a/packages/react-ui/storybook/stories/common/Radio.stories.js +++ b/packages/react-ui/storybook/stories/common/Radio.stories.js @@ -33,6 +33,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29704' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Select.stories.js b/packages/react-ui/storybook/stories/common/Select.stories.js index 5c5d6feb4..9e3e44e00 100644 --- a/packages/react-ui/storybook/stories/common/Select.stories.js +++ b/packages/react-ui/storybook/stories/common/Select.stories.js @@ -48,6 +48,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29965' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Slider.stories.js b/packages/react-ui/storybook/stories/common/Slider.stories.js index 6ed3fbb0b..c299df73d 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/common/Slider.stories.js @@ -133,6 +133,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A32732' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Switch.stories.js b/packages/react-ui/storybook/stories/common/Switch.stories.js index a3ec9241f..11f239f30 100644 --- a/packages/react-ui/storybook/stories/common/Switch.stories.js +++ b/packages/react-ui/storybook/stories/common/Switch.stories.js @@ -26,6 +26,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33096' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Tabs.stories.js b/packages/react-ui/storybook/stories/common/Tabs.stories.js index f0d3b7844..7a4dcc6fd 100644 --- a/packages/react-ui/storybook/stories/common/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/common/Tabs.stories.js @@ -36,6 +36,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33239' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/common/Text-field.stories.js index b0a60e1ce..6cbc82000 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/common/Text-field.stories.js @@ -59,6 +59,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33807' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js index 3f7267071..8e4d8979d 100644 --- a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/common/ToggleButton.stories.js @@ -34,6 +34,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36258' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Tooltip.stories.js b/packages/react-ui/storybook/stories/common/Tooltip.stories.js index 547a7bfea..8bfa089dc 100644 --- a/packages/react-ui/storybook/stories/common/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/common/Tooltip.stories.js @@ -47,6 +47,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36257' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/foundations/Borders.stories.js b/packages/react-ui/storybook/stories/foundations/Borders.stories.js index 94416ad6c..f5f3b691d 100644 --- a/packages/react-ui/storybook/stories/foundations/Borders.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Borders.stories.js @@ -20,7 +20,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=9787%3A4001' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js b/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js index f0536d40b..b106b5c23 100644 --- a/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js @@ -19,7 +19,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=10472%3A3871' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Elevations.stories.js b/packages/react-ui/storybook/stories/foundations/Elevations.stories.js index 15bd91bf1..83bd18ee8 100644 --- a/packages/react-ui/storybook/stories/foundations/Elevations.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Elevations.stories.js @@ -21,7 +21,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8990%3A7615' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Palette.stories.js b/packages/react-ui/storybook/stories/foundations/Palette.stories.js index b1eabd555..7aa4db8bf 100644 --- a/packages/react-ui/storybook/stories/foundations/Palette.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Palette.stories.js @@ -28,7 +28,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8775%3A71615' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Spacing.stories.js b/packages/react-ui/storybook/stories/foundations/Spacing.stories.js index ad61a043d..67aba3802 100644 --- a/packages/react-ui/storybook/stories/foundations/Spacing.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Spacing.stories.js @@ -20,7 +20,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8776%3A64661' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Typography.stories.js b/packages/react-ui/storybook/stories/foundations/Typography.stories.js index 0fbfb4fad..9e3927fe8 100644 --- a/packages/react-ui/storybook/stories/foundations/Typography.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Typography.stories.js @@ -62,7 +62,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=4662%3A14' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/yarn.lock b/yarn.lock index c8f5e10d0..5efd883f1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1601,6 +1601,22 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@etchteam/storybook-addon-status@^4.2.2": + version "4.2.2" + resolved "https://registry.yarnpkg.com/@etchteam/storybook-addon-status/-/storybook-addon-status-4.2.2.tgz#27501aa1ece063284ac7e1c0ef6e2221c789a649" + integrity sha512-iCOoA0+Izu/SixxjjJ9BB4YBVT2reCJ/80dXHBiCqoGSPTAvYGeeoQKexC913eSFv/0u3u4lv5fRZN/KMPAurw== + dependencies: + "@storybook/addons" "^6.2.9" + "@storybook/api" "^6.2.9" + "@storybook/client-logger" "^6.2.9" + "@storybook/components" "^6.2.9" + "@storybook/core-events" "^6.2.9" + "@storybook/theming" "^6.2.9" + core-js "^3.0.1" + lodash "^4.17.21" + memoizerific "^1.11.3" + util-deprecate "^1.0.2" + "@figspec/components@^1.0.0": version "1.0.1" resolved "https://registry.yarnpkg.com/@figspec/components/-/components-1.0.1.tgz#47d7e24999974b18c6daa810299624d4370fc7da" @@ -3773,7 +3789,7 @@ global "^4.4.0" regenerator-runtime "^0.13.7" -"@storybook/addons@6.5.13": +"@storybook/addons@6.5.13", "@storybook/addons@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.13.tgz#61ec5eab07879400d423d60bb397880d10ee5e73" integrity sha512-18CqzNnrGMfeZtiKz+R/3rHtSNnfNwz6y6prIQIbWseK16jY8ELTfIFGviwO5V2OqpbHDQi5+xQQ63QAIb89YA== @@ -3813,7 +3829,7 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/api@6.5.13": +"@storybook/api@6.5.13", "@storybook/api@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.13.tgz#8671e580721ff68d209fcde2975f967ae79b7d64" integrity sha512-xVSmB7/IuFd6G7eiJjbI2MuS7SZunoUM6d+YCWpjiehfMeX47MXt1gZtOwFrgJC1ShZlefXFahq/dvxwtmWs+w== @@ -3965,7 +3981,7 @@ core-js "^3.8.2" global "^4.4.0" -"@storybook/client-logger@6.5.13": +"@storybook/client-logger@6.5.13", "@storybook/client-logger@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.13.tgz#83f332dd9bb4ff1696d16b0cc24561df90905264" integrity sha512-F2SMW3LWFGXLm2ENTwTitrLWJgmMXRf3CWQXdN2EbkNCIBHy5Zcbt+91K4OX8e2e5h9gjGfrdYbyYDYOoUCEfA== @@ -3987,7 +4003,7 @@ regenerator-runtime "^0.13.7" util-deprecate "^1.0.2" -"@storybook/components@6.5.13": +"@storybook/components@6.5.13", "@storybook/components@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.13.tgz#a05fc969458760b348d640f26c2cad310ab35030" integrity sha512-6Hhx70JK5pGfKCkqMU4yq/BBH+vRTmzj7tZKfPwba+f8VmTMoOr/2ysTQFRtXryiHB6Z15xBYgfq5x2pIwQzLQ== @@ -4090,7 +4106,7 @@ dependencies: core-js "^3.8.2" -"@storybook/core-events@6.5.13": +"@storybook/core-events@6.5.13", "@storybook/core-events@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.13.tgz#a8c0cc92694f09981ca6501d5c5ef328db18db8a" integrity sha512-kL745tPpRKejzHToA3/CoBNbI+NPRVk186vGxXBmk95OEg0TlwgQExP8BnqEtLlRZMbW08e4+6kilc1M1M4N5w== @@ -4443,7 +4459,7 @@ memoizerific "^1.11.3" regenerator-runtime "^0.13.7" -"@storybook/theming@6.5.13": +"@storybook/theming@6.5.13", "@storybook/theming@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.13.tgz#3f905eb9f72ddc28d096384290999057987f3083" integrity sha512-oif5NGFAUQhizo50r+ctw2hZNLWV4dPHai+L/gFvbaSeRBeHSNkIcMoZ2FlrO566HdGZTDutYXcR+xus8rI28g== @@ -7784,6 +7800,11 @@ core-js-pure@^3.23.3: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.25.5.tgz#79716ba54240c6aa9ceba6eee08cf79471ba184d" integrity sha512-oml3M22pHM+igfWHDfdLVq2ShWmjM2V4L+dQEBs0DWVIqEm9WHCwGAlZ6BmyBQGy5sFrJmcx+856D9lVKyGWYg== +core-js@^3.0.1: + version "3.26.0" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.26.0.tgz#a516db0ed0811be10eac5d94f3b8463d03faccfe" + integrity sha512-+DkDrhoR4Y0PxDz6rurahuB+I45OsEUv8E1maPTB6OuHRohMMcznBq9TMpdpDMm/hUPob/mJJS3PqgbHpMTQgw== + core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2: version "3.20.1" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.1.tgz#eb1598047b7813572f1dc24b7c6a95528c99eef3" From 6ad62c1f0f9cc35c2740335a616447b8c8868ac1 Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 3 Nov 2022 17:38:40 +0100 Subject: [PATCH 25/42] button and icon button stories --- packages/react-ui/src/theme/carto-theme.d.ts | 9 +- .../react-ui/storybook/.storybook/preview.js | 13 +- .../stories/common/Button.stories.js | 203 ++++++------------ .../storybook/stories/common/Chip.stories.js | 4 +- .../stories/common/IconButton.stories.js | 92 ++++++++ 5 files changed, 175 insertions(+), 146 deletions(-) create mode 100644 packages/react-ui/storybook/stories/common/IconButton.stories.js diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index 8b51966aa..1e9247d29 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -1,7 +1,6 @@ import { Theme, ThemeOptions, TypeText } from '@mui/material'; import { Palette, PaletteColor } from '@mui/material'; - export const cartoThemeOptions: ThemeOptions; export const theme: CartoTheme; @@ -123,3 +122,11 @@ declare module '@mui/material/Typography' { code3: true; } } + +// Update the Buttons's color prop options + +declare module '@mui/material/Button' { + interface ButtonPropsColorOverrides { + default: true; + } +} diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index 9e4ce06c5..3919843a8 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -78,7 +78,7 @@ const componentsStatus = { needUpdate: { background: '#E1E3E4', // Default/Main color: '#2C3032', - description: 'Need an update' + description: 'Need an update, but can be used in this state' } }; @@ -102,6 +102,7 @@ export const parameters = { }, options: { storySort: { + method: 'alphabetical', order: [ 'Introduction', 'Foundations', @@ -111,15 +112,7 @@ export const parameters = { 'Organisms', ['InputFile'], 'Common', - 'Custom Components', - [ - 'CategoryWidgetUI', - 'FormulaWidgetUI', - 'HistogramWidgetUI', - 'BarWidgetUI', - 'PieWidgetUI', - 'WrapperWidgetUI' - ] + 'Custom Components' ] } }, diff --git a/packages/react-ui/storybook/stories/common/Button.stories.js b/packages/react-ui/storybook/stories/common/Button.stories.js index abb6e0265..e556a8ac4 100644 --- a/packages/react-ui/storybook/stories/common/Button.stories.js +++ b/packages/react-ui/storybook/stories/common/Button.stories.js @@ -1,20 +1,23 @@ import React from 'react'; -import { Button, IconButton, Grid, SvgIcon } from '@mui/material'; +import { Button, Grid } from '@mui/material'; +import { Add, Close } from '@mui/icons-material'; const options = { - title: 'Common/Button', + title: 'Atoms/Button', component: Button, argTypes: { variant: { + defaultValue: 'contained', control: { type: 'select', options: ['text', 'contained', 'outlined'] } }, color: { + defaultValue: 'primary', control: { type: 'select', - options: ['default', 'primary', 'secondary'] + options: ['default', 'primary', 'secondary', 'error'] } }, size: { @@ -24,6 +27,7 @@ const options = { } }, disabled: { + defaultValue: false, control: { type: 'boolean' } @@ -46,161 +50,94 @@ const options = { }; export default options; -const Icon = (props) => ( - - - -); -const PlaygroundTemplate = ({ label, icon, ...rest }) => ( - - - - - - - - - - - - + + ); -const ButtonTemplate = ({ label, icon, ...rest }) => { + +const PlaygroundTemplate = ({ label, size, ...rest }) => ( + + + +); + +const VariantTemplate = ({ label, icon, ...rest }) => { const smallLabel = label ? label : 'Small button'; - const mediumLabel = label ? label : 'Normal button'; + const mediumLabel = label ? label : 'Medium button'; const largeLabel = label ? label : 'Large button'; const disabledLabel = label ? label : 'Disabled button'; return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + ); }; -const disabledControlsArgTypes = { - variant: { table: { disable: true } }, - size: { table: { disable: true } }, - disabled: { table: { disable: true } } + +const ColorTemplate = ({ label, icon, ...rest }) => { + const containedLabel = label ? label : 'Contained button'; + const outlinedLabel = label ? label : 'Outlined button'; + const textLabel = label ? label : 'Text button'; + + return ( + + + + + + ); }; -export const Default = PlaygroundTemplate.bind({}); -Default.args = { label: 'Button' }; +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { label: 'Button' }; -export const Contained = ButtonTemplate.bind({}); +export const Contained = VariantTemplate.bind({}); Contained.args = { variant: 'contained' }; -Contained.argTypes = disabledControlsArgTypes; -export const Outlined = ButtonTemplate.bind({}); +export const Outlined = VariantTemplate.bind({}); Outlined.args = { variant: 'outlined' }; -Outlined.argTypes = disabledControlsArgTypes; -export const Base = ButtonTemplate.bind({}); -Base.args = { variant: 'text' }; -Base.argTypes = disabledControlsArgTypes; +export const Text = VariantTemplate.bind({}); +Text.args = { variant: 'text' }; + +export const PrimaryColor = ColorTemplate.bind({}); +PrimaryColor.args = { color: 'primary' }; -export const ContainedPrimary = ButtonTemplate.bind({}); -ContainedPrimary.args = { variant: 'contained', color: 'primary' }; -ContainedPrimary.argTypes = disabledControlsArgTypes; +export const SecondaryColor = ColorTemplate.bind({}); +SecondaryColor.args = { color: 'secondary' }; -export const OutlinedPrimary = ButtonTemplate.bind({}); -OutlinedPrimary.args = { variant: 'outlined', color: 'primary' }; -OutlinedPrimary.argTypes = disabledControlsArgTypes; +export const ErrorColor = ColorTemplate.bind({}); +ErrorColor.args = { color: 'error' }; -export const BasePrimary = ButtonTemplate.bind({}); -BasePrimary.args = { variant: 'text', color: 'primary' }; -BasePrimary.argTypes = disabledControlsArgTypes; +export const DefaultColor = ColorTemplate.bind({}); +DefaultColor.args = { color: 'default' }; diff --git a/packages/react-ui/storybook/stories/common/Chip.stories.js b/packages/react-ui/storybook/stories/common/Chip.stories.js index 2e806dd96..5f6f7779e 100644 --- a/packages/react-ui/storybook/stories/common/Chip.stories.js +++ b/packages/react-ui/storybook/stories/common/Chip.stories.js @@ -60,11 +60,11 @@ const options = { } }, variant: { - defaultValue: 'default', + defaultValue: 'filled', description: 'The variant to use.', control: { type: 'select', - options: ['default', 'outlined'] + options: ['filled', 'outlined'] } } }, diff --git a/packages/react-ui/storybook/stories/common/IconButton.stories.js b/packages/react-ui/storybook/stories/common/IconButton.stories.js new file mode 100644 index 000000000..674ebb87c --- /dev/null +++ b/packages/react-ui/storybook/stories/common/IconButton.stories.js @@ -0,0 +1,92 @@ +import React from 'react'; +import { IconButton, Grid } from '@mui/material'; +import { Delete } from '@mui/icons-material'; + +const options = { + title: 'Atoms/IconButton', + component: IconButton, + argTypes: { + color: { + defaultValue: 'primary', + control: { + type: 'select', + options: ['default', 'primary', 'secondary'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1761%3A30090' + }, + status: { + type: 'inDevelopment' + } + } +}; +export default options; + +const IconButtons = ({ color, label, size, disabled, ...rest }) => ( + + + + + +); + +const PlaygroundTemplate = ({ label, size, color, ...rest }) => ( + + + +); + +const ButtonTemplate = ({ label, ...rest }) => { + const smallLabel = label ? label : 'Small icon button'; + const mediumLabel = label ? label : 'Medium icon button'; + const largeLabel = label ? label : 'Large icon button'; + const disabledLabel = label ? label : 'Disabled icon button'; + + return ( + + + + + + + ); +}; + +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { label: 'Icon Button' }; + +export const PrimaryColor = ButtonTemplate.bind({}); +PrimaryColor.args = { color: 'primary' }; + +export const SecondaryColor = ButtonTemplate.bind({}); +SecondaryColor.args = { color: 'secondary' }; + +export const DefaultColor = ButtonTemplate.bind({}); +DefaultColor.args = { color: 'default' }; From 3a4e932b9e4dcee60bfbcc6f596cfffcb8f7e92f Mon Sep 17 00:00:00 2001 From: vmilan Date: Thu, 3 Nov 2022 19:22:25 +0100 Subject: [PATCH 26/42] button and icon button styles --- .../src/theme/sections/components/buttons.js | 159 +++++++++--------- .../react-ui/src/theme/sections/typography.js | 65 ------- 2 files changed, 80 insertions(+), 144 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 7be93add4..ee8480760 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -1,5 +1,6 @@ -import { getPixelToRem, getSpacing } from '../../themeUtils'; +import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; +import { themeTypography } from '../typography'; export const buttonsOverrides = { // Button @@ -9,99 +10,94 @@ export const buttonsOverrides = { }, styleOverrides: { + root: { + padding: getSpacing(0, 2) + }, contained: { boxShadow: 'none' }, - outlined: { - border: `2px solid ${commonPalette.text.primary}`, - padding: '4px 14px', - '&:hover': { - borderWidth: '2px' - }, - '&.Mui-disabled': { - borderWidth: '2px' - } - }, - outlinedPrimary: { - border: `2px solid ${commonPalette.primary.main}`, - '&:hover': { - borderWidth: '2px' - } - }, - outlinedSecondary: { - border: `2px solid ${commonPalette.secondary.main}`, - '&:hover': { - borderWidth: '2px' - }, - '&.Mui-disabled': { - borderWidth: '2px' - } - }, - containedSizeSmall: { - padding: '2px 12px', - fontSize: getPixelToRem(12) - }, - outlinedSizeSmall: { - padding: '2px 12px', - fontSize: getPixelToRem(12) - }, - textSizeSmall: { - padding: '2px 12px', - fontSize: getPixelToRem(12) - }, - containedSizeLarge: { - padding: '16px 24px', - fontSize: getPixelToRem(16) - }, - containedSecondary: { - '&:hover': { - backgroundColor: commonPalette.secondary.light - } - }, - outlinedSizeLarge: { - padding: '16px 24px', - fontSize: getPixelToRem(16) - }, - textSizeLarge: { - padding: '16px 24px', - fontSize: getPixelToRem(16) - }, startIcon: { marginRight: 6, - marginLeft: -4, - '&.MuiButton-iconSizeSmall': { - marginLeft: -4 + + '& .MuiSvgIcon-root': { + fontSize: 18 }, - '&.MuiButton-iconSizeLarge': { - marginRight: 8 + '&.MuiButton-iconSizeSmall': { + marginRight: 4 } }, endIcon: { - marginRight: -4, marginLeft: 6, - '&.MuiButton-iconSizeSmall': { - marginRight: -4 + + '& .MuiSvgIcon-root': { + fontSize: 18 }, - '&.MuiButton-iconSizeLarge': { - marginLeft: 8 + '&.MuiButton-iconSizeSmall': { + marginLeft: 4 } }, - iconSizeSmall: { - '& > *:first-child': { - fontSize: 20 + sizeSmall: { + height: getSpacing(3), + ...themeTypography.caption, + fontWeight: 500, + letterSpacing: '0.4px' + }, + sizeMedium: { + height: getSpacing(4) + }, + sizeLarge: { + height: getSpacing(6), + ...themeTypography.body1, + fontWeight: 500, + letterSpacing: '0.25px' + } + }, + // Custom color + variants: [ + { + props: { variant: 'contained', color: 'default' }, + style: { + color: commonPalette.text.primary, + backgroundColor: commonPalette.default.main, + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + backgroundColor: commonPalette.action.disabledBackground + }, + '&:hover, &:focus': { + backgroundColor: commonPalette.default.dark + } } }, - iconSizeMedium: { - '& > *:first-child': { - fontSize: 24 + { + props: { variant: 'outlined', color: 'default' }, + style: { + color: commonPalette.text.primary, + borderColor: commonPalette.text.primary, + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + borderColor: commonPalette.default.outlinedBorder + }, + '&:hover, &:focus': { + backgroundColor: commonPalette.action.hover + } } }, - iconSizeLarge: { - '& > *:first-child': { - fontSize: 24 + { + props: { variant: 'text', color: 'default' }, + style: { + color: commonPalette.text.primary, + + '&.Mui-disabled': { + color: commonPalette.text.disabled + }, + '&:hover, &:focus': { + backgroundColor: commonPalette.action.hover + } } } - } + ] }, // Button Base @@ -114,11 +110,13 @@ export const buttonsOverrides = { // Icon Button MuiIconButton: { styleOverrides: { - root: { + root: ({ ownerState }) => ({ + ...(ownerState.color === 'default' && { + color: commonPalette.text.primary + }), padding: getSpacing(0.75), - borderRadius: getSpacing(0.5), - color: commonPalette.text.primary - }, + borderRadius: getSpacing(0.5) + }), sizeSmall: { padding: getSpacing(0.25) } @@ -134,9 +132,11 @@ export const buttonsOverrides = { border: 'none', borderRadius: getSpacing(0.5), color: commonPalette.grey[500], + '&.Mui-selected': { color: commonPalette.primary.main, backgroundColor: commonPalette.primary.background, + '&:hover': { backgroundColor: commonPalette.primary.background } @@ -145,6 +145,7 @@ export const buttonsOverrides = { sizeSmall: { width: getSpacing(3), height: getSpacing(3), + '& .MuiSvgIcon-root': { maxWidth: getSpacing(2.5), maxHeight: getSpacing(2.5) diff --git a/packages/react-ui/src/theme/sections/typography.js b/packages/react-ui/src/theme/sections/typography.js index 4801705ac..288e4c0df 100644 --- a/packages/react-ui/src/theme/sections/typography.js +++ b/packages/react-ui/src/theme/sections/typography.js @@ -106,55 +106,11 @@ const baseTypography = { }; const customTypography = { - // TODO: Create a wrapper for the Typography component to reduce the number of variants https://app.shortcut.com/cartoteam/story/265549/ - body1Italic: { - ...baseTypography.body1, - fontStyle: 'italic' - }, - body1Medium: { - ...baseTypography.body1, - fontWeight: 500 - }, - body1Strong: { - ...baseTypography.body1, - fontWeight: 600 - }, - body1StrongItalic: { - ...baseTypography.body1, - fontWeight: 600, - fontStyle: 'italic' - }, - body2Italic: { - ...baseTypography.body2, - fontStyle: 'italic' - }, - body2Strong: { - ...baseTypography.body2, - fontWeight: 600 - }, - body2StrongItalic: { - ...baseTypography.body2, - fontWeight: 600, - fontStyle: 'italic' - }, - captionItalic: { - ...baseTypography.caption, - fontStyle: 'italic' - }, captionMedium: { ...baseTypography.caption, fontWeight: 500, letterSpacing: '0.4px' }, - captionStrong: { - ...baseTypography.caption, - fontWeight: 500 - }, - captionStrongItalic: { - ...baseTypography.caption, - fontWeight: 500, - fontStyle: 'italic' - }, overlineDelicate: { ...baseTypography.overline, fontWeight: 400, @@ -167,13 +123,6 @@ const customTypography = { lineHeight: 1.5, letterSpacing: 0 }, - code1Strong: { - fontFamily: '"Overpass Mono", monospace', - fontWeight: 600, - fontSize: getPixelToRem(16), - lineHeight: 1.5, - letterSpacing: 0 - }, code2: { fontFamily: '"Overpass Mono", monospace', fontWeight: 400, @@ -181,26 +130,12 @@ const customTypography = { lineHeight: 1.428, letterSpacing: 0 }, - code2Strong: { - fontFamily: '"Overpass Mono", monospace', - fontWeight: 600, - fontSize: getPixelToRem(14), - lineHeight: 1.428, - letterSpacing: 0 - }, code3: { fontFamily: '"Overpass Mono", monospace', fontWeight: 400, fontSize: getPixelToRem(12), lineHeight: 1.333, letterSpacing: 0 - }, - code3Strong: { - fontFamily: '"Overpass Mono", monospace', - fontWeight: 600, - fontSize: getPixelToRem(12), - lineHeight: 1.333, - letterSpacing: 0 } }; From 1489ca6af38ccd720e99bba554a65eccbbc9f5f0 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 4 Nov 2022 11:05:11 +0100 Subject: [PATCH 27/42] Icon button --- .../src/theme/sections/components/buttons.js | 35 ++++++++++++++++--- .../{common => atoms}/IconButton.stories.js | 34 ++++++++++-------- 2 files changed, 50 insertions(+), 19 deletions(-) rename packages/react-ui/storybook/stories/{common => atoms}/IconButton.stories.js (68%) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index ee8480760..9b51b0a5e 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -111,14 +111,41 @@ export const buttonsOverrides = { MuiIconButton: { styleOverrides: { root: ({ ownerState }) => ({ + borderRadius: getSpacing(0.5), + + '& .MuiSvgIcon-root': { + fontSize: 18 + }, + ...(ownerState.color === 'default' && { - color: commonPalette.text.primary + color: commonPalette.text.primary, + + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.action.hover + } }), - padding: getSpacing(0.75), - borderRadius: getSpacing(0.5) + ...(ownerState.color === 'primary' && { + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.primary.background + } + }), + ...(ownerState.color === 'secondary' && { + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.secondary.background + } + }) }), sizeSmall: { - padding: getSpacing(0.25) + width: getSpacing(3), + height: getSpacing(3) + }, + sizeMedium: { + width: getSpacing(4), + height: getSpacing(4) + }, + sizeLarge: { + width: getSpacing(6), + height: getSpacing(6) } } }, diff --git a/packages/react-ui/storybook/stories/common/IconButton.stories.js b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js similarity index 68% rename from packages/react-ui/storybook/stories/common/IconButton.stories.js rename to packages/react-ui/storybook/stories/atoms/IconButton.stories.js index 674ebb87c..b1e6b1b99 100644 --- a/packages/react-ui/storybook/stories/common/IconButton.stories.js +++ b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js @@ -1,6 +1,7 @@ import React from 'react'; import { IconButton, Grid } from '@mui/material'; import { Delete } from '@mui/icons-material'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Atoms/IconButton', @@ -37,23 +38,26 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1761%3A30090' }, status: { - type: 'inDevelopment' + type: 'readyToReview' } } }; export default options; -const IconButtons = ({ color, label, size, disabled, ...rest }) => ( +const IconButtons = ({ color, label, size, disabled, title, ...rest }) => ( - - - + + {title && {title}} + + + + ); @@ -71,10 +75,10 @@ const ButtonTemplate = ({ label, ...rest }) => { return ( - - - - + + + + ); }; From 059166b9da9eb6cad0bb09f93ab5a6415fb82d43 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 4 Nov 2022 11:05:45 +0100 Subject: [PATCH 28/42] atomic design reorg --- packages/react-ui/src/{ => components}/atoms/Typography.js | 0 .../{custom-components => components/organisms}/InputFile.js | 0 packages/react-ui/src/index.d.ts | 2 +- packages/react-ui/src/index.js | 2 +- packages/react-ui/src/widgets/BarWidgetUI.js | 2 +- packages/react-ui/src/widgets/CategoryWidgetUI.js | 2 +- packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js | 2 +- .../src/widgets/HistogramWidgetUI/HistogramWidgetUI.js | 2 +- packages/react-ui/src/widgets/NoDataAlert.js | 2 +- .../src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js | 2 +- packages/react-ui/src/widgets/WrapperWidgetUI.js | 2 +- packages/react-ui/src/widgets/legend/LayerOptionWrapper.js | 2 +- packages/react-ui/src/widgets/legend/LegendCategories.js | 2 +- packages/react-ui/src/widgets/legend/LegendIcon.js | 2 +- packages/react-ui/src/widgets/legend/LegendProportion.js | 2 +- packages/react-ui/src/widgets/legend/LegendRamp.js | 2 +- packages/react-ui/src/widgets/legend/LegendWidgetUI.js | 2 +- packages/react-ui/src/widgets/legend/LegendWrapper.js | 2 +- packages/react-ui/src/widgets/legend/Note.js | 2 +- packages/react-ui/storybook/.storybook/preview.js | 5 +---- .../storybook/stories/{common => atoms}/Button.stories.js | 0 .../storybook/stories/{common => atoms}/Checkbox.stories.js | 2 +- .../storybook/stories/{common => atoms}/Divider.stories.js | 2 +- .../storybook/stories/{common => atoms}/Paper.stories.js | 4 ++-- .../storybook/stories/{common => atoms}/Progress.stories.js | 2 +- .../storybook/stories/{common => atoms}/Radio.stories.js | 2 +- .../storybook/stories/{common => atoms}/Select.stories.js | 4 ++-- .../storybook/stories/{common => atoms}/Slider.stories.js | 2 +- .../storybook/stories/{common => atoms}/Switch.stories.js | 2 +- .../stories/{common => atoms}/Text-field.stories.js | 4 ++-- .../storybook/stories/foundations/Borders.stories.js | 3 ++- .../storybook/stories/foundations/Breakpoints.stories.js | 3 ++- .../storybook/stories/foundations/Elevations.stories.js | 3 ++- .../storybook/stories/foundations/Palette.stories.js | 2 +- .../storybook/stories/foundations/Spacing.stories.js | 3 ++- .../storybook/stories/foundations/Typography.stories.js | 2 +- .../stories/{common => molecules}/Autocomplete.stories.js | 2 +- .../stories/{common => molecules}/Breadcrumb.stories.js | 4 ++-- .../stories/{common => molecules}/ButtonGroup.stories.js | 2 +- .../storybook/stories/{common => molecules}/Chip.stories.js | 2 +- .../stories/{common => molecules}/ToggleButton.stories.js | 2 +- .../stories/{common => molecules}/Tooltip.stories.js | 4 ++-- .../stories/{common => organisms}/Dialog.stories.js | 2 +- .../storybook/stories/organisms/InputFile.stories.js | 4 ++-- .../storybook/stories/{common => organisms}/List.stories.js | 2 +- .../storybook/stories/{common => organisms}/Tabs.stories.js | 2 +- .../storybook/stories/widgetsUI/BarWidgetUI.stories.js | 2 +- .../storybook/stories/widgetsUI/CategoryWidgetUI.stories.js | 2 +- .../stories/widgetsUI/FeatureSelectionWidgetUI.stories.js | 2 +- .../storybook/stories/widgetsUI/FormulaWidgetUI.stories.js | 2 +- .../storybook/stories/widgetsUI/HistogramWidgetUI.stories.js | 2 +- .../storybook/stories/widgetsUI/LegendWidgetUI.stories.js | 2 +- .../storybook/stories/widgetsUI/NoDataAlert.stories.js | 2 +- .../storybook/stories/widgetsUI/PieWidgetUI.stories.js | 2 +- .../storybook/stories/widgetsUI/RangeWidgetUI.stories.js | 2 +- .../stories/widgetsUI/ScatterPlotWidgetUI.stories.js | 2 +- .../storybook/stories/widgetsUI/TableWidgetUI.stories.js | 4 ++-- .../stories/widgetsUI/TimeSeriesWidgetUI.stories.js | 2 +- .../storybook/stories/widgetsUI/WrapperWidgetUI.stories.js | 2 +- .../stories/widgetsUI/legend/LegendCategories.stories.js | 2 +- .../storybook/stories/widgetsUI/legend/LegendIcon.stories.js | 2 +- .../stories/widgetsUI/legend/LegendProportion.stories.js | 2 +- .../storybook/stories/widgetsUI/legend/LegendRamp.stories.js | 2 +- 63 files changed, 71 insertions(+), 70 deletions(-) rename packages/react-ui/src/{ => components}/atoms/Typography.js (100%) rename packages/react-ui/src/{custom-components => components/organisms}/InputFile.js (100%) rename packages/react-ui/storybook/stories/{common => atoms}/Button.stories.js (100%) rename packages/react-ui/storybook/stories/{common => atoms}/Checkbox.stories.js (98%) rename packages/react-ui/storybook/stories/{common => atoms}/Divider.stories.js (98%) rename packages/react-ui/storybook/stories/{common => atoms}/Paper.stories.js (97%) rename packages/react-ui/storybook/stories/{common => atoms}/Progress.stories.js (99%) rename packages/react-ui/storybook/stories/{common => atoms}/Radio.stories.js (99%) rename packages/react-ui/storybook/stories/{common => atoms}/Select.stories.js (99%) rename packages/react-ui/storybook/stories/{common => atoms}/Slider.stories.js (99%) rename packages/react-ui/storybook/stories/{common => atoms}/Switch.stories.js (98%) rename packages/react-ui/storybook/stories/{common => atoms}/Text-field.stories.js (98%) rename packages/react-ui/storybook/stories/{common => molecules}/Autocomplete.stories.js (99%) rename packages/react-ui/storybook/stories/{common => molecules}/Breadcrumb.stories.js (94%) rename packages/react-ui/storybook/stories/{common => molecules}/ButtonGroup.stories.js (99%) rename packages/react-ui/storybook/stories/{common => molecules}/Chip.stories.js (99%) rename packages/react-ui/storybook/stories/{common => molecules}/ToggleButton.stories.js (98%) rename packages/react-ui/storybook/stories/{common => molecules}/Tooltip.stories.js (97%) rename packages/react-ui/storybook/stories/{common => organisms}/Dialog.stories.js (99%) rename packages/react-ui/storybook/stories/{common => organisms}/List.stories.js (99%) rename packages/react-ui/storybook/stories/{common => organisms}/Tabs.stories.js (98%) diff --git a/packages/react-ui/src/atoms/Typography.js b/packages/react-ui/src/components/atoms/Typography.js similarity index 100% rename from packages/react-ui/src/atoms/Typography.js rename to packages/react-ui/src/components/atoms/Typography.js diff --git a/packages/react-ui/src/custom-components/InputFile.js b/packages/react-ui/src/components/organisms/InputFile.js similarity index 100% rename from packages/react-ui/src/custom-components/InputFile.js rename to packages/react-ui/src/components/organisms/InputFile.js diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index b6faed108..2987dca9b 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -22,7 +22,7 @@ import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants'; import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI'; import NoDataAlert from './widgets/NoDataAlert'; import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI'; -import Typography from './atoms/Typography'; +import Typography from './components/atoms/Typography'; export { theme, diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index 0eb003dd7..423d747c2 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -22,7 +22,7 @@ import PolygonIcon from './assets/PolygonIcon'; import RectangleIcon from './assets/RectangleIcon'; import LassoIcon from './assets/LassoIcon'; import CircleIcon from './assets/CircleIcon'; -import Typography from './atoms/Typography'; +import Typography from './components/atoms/Typography'; const featureSelectionIcons = { CursorIcon, diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index dc5d344ce..d31c3cb10 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -5,7 +5,7 @@ import { Grid, Link, useTheme, darken } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import detectTouchScreen from './utils/detectTouchScreen'; import { processFormatterRes } from './utils/formatterUtils'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; const IS_TOUCH_SCREEN = detectTouchScreen(); diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index 554378546..1292bb160 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -15,7 +15,7 @@ import makeStyles from '@mui/styles/makeStyles'; import { Skeleton } from '@mui/material'; import { animateValues } from './utils/animations'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; const useStyles = makeStyles((theme) => ({ root: { diff --git a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js index d67f23561..23d27db96 100644 --- a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js +++ b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js @@ -14,7 +14,7 @@ import { import makeStyles from '@mui/styles/makeStyles'; import { ArrowDropDown } from '@mui/icons-material'; import PropTypes from 'prop-types'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; function FeatureSelectionWidgetUI({ className, diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index cdfef2f93..6aa463ccd 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -7,7 +7,7 @@ import makeStyles from '@mui/styles/makeStyles'; import { processFormatterRes } from '../utils/formatterUtils'; import detectTouchscreen from '../utils/detectTouchScreen'; import useHistogramInteractivity from './useHistogramInteractivity'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const IS_TOUCH_SCREEN = detectTouchscreen(); diff --git a/packages/react-ui/src/widgets/NoDataAlert.js b/packages/react-ui/src/widgets/NoDataAlert.js index 90fd96c4e..d8a9bacb8 100644 --- a/packages/react-ui/src/widgets/NoDataAlert.js +++ b/packages/react-ui/src/widgets/NoDataAlert.js @@ -1,7 +1,7 @@ import React from 'react'; import { Alert, AlertTitle } from '@mui/material'; import { Box } from '@mui/material'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; function AlertBody({ color = undefined, children }) { return children ? ( diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js index d961a5ace..5442713b9 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js @@ -15,7 +15,7 @@ import { TimeSeriesProvider, useTimeSeriesContext } from './hooks/TimeSeriesCont import { CHART_TYPES } from './utils/constants'; import { PropTypes } from 'prop-types'; import { GroupDateTypes, getMonday } from '@carto/react-core'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const FORMAT_DATE_BY_STEP_SIZE = { [GroupDateTypes.YEARS]: yearCurrentDateRange, diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index 5eba03158..84a42586a 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -14,7 +14,7 @@ import { Tooltip } from '@mui/material'; import { ExpandLess, ExpandMore, MoreVert } from '@mui/icons-material'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; /* Options props must have this format: diff --git a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js index 44602c430..36e4c5f58 100644 --- a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js +++ b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js @@ -1,6 +1,6 @@ import React from 'react'; import { Box } from '@mui/material'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; export default function LayerOptionWrapper({ className = '', label, children }) { return ( diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index f3e602e85..896efe457 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -3,7 +3,7 @@ import { Box, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; function LegendCategories({ legend }) { const { diff --git a/packages/react-ui/src/widgets/legend/LegendIcon.js b/packages/react-ui/src/widgets/legend/LegendIcon.js index 81842a85a..616570e05 100644 --- a/packages/react-ui/src/widgets/legend/LegendIcon.js +++ b/packages/react-ui/src/widgets/legend/LegendIcon.js @@ -1,7 +1,7 @@ import React from 'react'; import { Box, Grid } from '@mui/material'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const ICON_SIZE = 16; diff --git a/packages/react-ui/src/widgets/legend/LegendProportion.js b/packages/react-ui/src/widgets/legend/LegendProportion.js index 82c96a3af..b97982ff9 100644 --- a/packages/react-ui/src/widgets/legend/LegendProportion.js +++ b/packages/react-ui/src/widgets/legend/LegendProportion.js @@ -2,7 +2,7 @@ import React from 'react'; import { Box, Grid } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useStyles = makeStyles((theme) => ({ circles: { diff --git a/packages/react-ui/src/widgets/legend/LegendRamp.js b/packages/react-ui/src/widgets/legend/LegendRamp.js index a6b24fda9..d62e7afe3 100644 --- a/packages/react-ui/src/widgets/legend/LegendRamp.js +++ b/packages/react-ui/src/widgets/legend/LegendRamp.js @@ -5,7 +5,7 @@ import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; import { getMinMax } from './LegendProportion'; import LegendProportion from './LegendProportion'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useStyles = makeStyles(() => ({ errorContainer: { diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index 6b19ca8ce..6d2c42584 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -7,7 +7,7 @@ import LegendIcon from './LegendIcon'; import LegendRamp from './LegendRamp'; import LegendProportion from './LegendProportion'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const LayersIcon = () => ( diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js index 64c18a4f6..3457f1bd1 100644 --- a/packages/react-ui/src/widgets/legend/LegendWrapper.js +++ b/packages/react-ui/src/widgets/legend/LegendWrapper.js @@ -6,7 +6,7 @@ import Note from './Note'; import LayerIcon from '../../assets/LayerIcon'; import { ToggleButton } from '@mui/material'; import OpacityControl from '../OpacityControl'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useStyles = makeStyles((theme) => ({ legendWrapper: { diff --git a/packages/react-ui/src/widgets/legend/Note.js b/packages/react-ui/src/widgets/legend/Note.js index f937e1e7e..57b9e1fce 100644 --- a/packages/react-ui/src/widgets/legend/Note.js +++ b/packages/react-ui/src/widgets/legend/Note.js @@ -1,7 +1,7 @@ import { Box } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import React from 'react'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useNoteStyles = makeStyles(() => ({ note: { diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index 3919843a8..2af060c46 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -109,10 +109,7 @@ export const parameters = { ['Palette', 'Typography', 'Spacing', 'Borders', 'Elevations', 'Breakpoints'], 'Atoms', 'Molecules', - 'Organisms', - ['InputFile'], - 'Common', - 'Custom Components' + 'Organisms' ] } }, diff --git a/packages/react-ui/storybook/stories/common/Button.stories.js b/packages/react-ui/storybook/stories/atoms/Button.stories.js similarity index 100% rename from packages/react-ui/storybook/stories/common/Button.stories.js rename to packages/react-ui/storybook/stories/atoms/Button.stories.js diff --git a/packages/react-ui/storybook/stories/common/Checkbox.stories.js b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Checkbox.stories.js rename to packages/react-ui/storybook/stories/atoms/Checkbox.stories.js index 7b7046789..ac89b8a49 100644 --- a/packages/react-ui/storybook/stories/common/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { Checkbox, FormControlLabel, Grid } from '@mui/material'; const options = { - title: 'Common/Checkbox', + title: 'Atoms/Checkbox', component: Checkbox, argTypes: { color: { diff --git a/packages/react-ui/storybook/stories/common/Divider.stories.js b/packages/react-ui/storybook/stories/atoms/Divider.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Divider.stories.js rename to packages/react-ui/storybook/stories/atoms/Divider.stories.js index a95a72d74..d421b58e3 100644 --- a/packages/react-ui/storybook/stories/common/Divider.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Divider.stories.js @@ -10,7 +10,7 @@ import { } from '@mui/icons-material'; const options = { - title: 'Common/Divider', + title: 'Atoms/Divider', component: Divider, parameters: { design: { diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/atoms/Paper.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/Paper.stories.js rename to packages/react-ui/storybook/stories/atoms/Paper.stories.js index c59e22a46..f5a17be37 100644 --- a/packages/react-ui/storybook/stories/common/Paper.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Paper.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Grid, Paper } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Paper', + title: 'Atoms/Paper', component: Paper, argTypes: { elevation: { diff --git a/packages/react-ui/storybook/stories/common/Progress.stories.js b/packages/react-ui/storybook/stories/atoms/Progress.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/Progress.stories.js rename to packages/react-ui/storybook/stories/atoms/Progress.stories.js index 07fb3df10..f7510fd55 100644 --- a/packages/react-ui/storybook/stories/common/Progress.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Progress.stories.js @@ -3,7 +3,7 @@ import { Box, Button, CircularProgress, Grid, LinearProgress } from '@mui/materi import CheckIcon from '@mui/icons-material/Check'; const options = { - title: 'Common/Progress', + title: 'Atoms/Progress', component: CircularProgress, argTypes: { color: { diff --git a/packages/react-ui/storybook/stories/common/Radio.stories.js b/packages/react-ui/storybook/stories/atoms/Radio.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/Radio.stories.js rename to packages/react-ui/storybook/stories/atoms/Radio.stories.js index 95cb7e47e..a0496df47 100644 --- a/packages/react-ui/storybook/stories/common/Radio.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Radio.stories.js @@ -9,7 +9,7 @@ import { } from '@mui/material'; const options = { - title: 'Common/Radio', + title: 'Atoms/Radio', component: Radio, argTypes: { color: { diff --git a/packages/react-ui/storybook/stories/common/Select.stories.js b/packages/react-ui/storybook/stories/atoms/Select.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/Select.stories.js rename to packages/react-ui/storybook/stories/atoms/Select.stories.js index 9e3e44e00..8d9bed6ae 100644 --- a/packages/react-ui/storybook/stories/common/Select.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Select.stories.js @@ -9,10 +9,10 @@ import { Select } from '@mui/material'; import { Visibility } from '@mui/icons-material'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Select', + title: 'Atoms/Select', component: Select, argTypes: { variant: { diff --git a/packages/react-ui/storybook/stories/common/Slider.stories.js b/packages/react-ui/storybook/stories/atoms/Slider.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/Slider.stories.js rename to packages/react-ui/storybook/stories/atoms/Slider.stories.js index c299df73d..bf5501f52 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Slider.stories.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { Grid, Slider, TextField, Tooltip } from '@mui/material'; const options = { - title: 'Common/Slider', + title: 'Atoms/Slider', component: Slider, argTypes: { color: { diff --git a/packages/react-ui/storybook/stories/common/Switch.stories.js b/packages/react-ui/storybook/stories/atoms/Switch.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Switch.stories.js rename to packages/react-ui/storybook/stories/atoms/Switch.stories.js index 11f239f30..18d7c981f 100644 --- a/packages/react-ui/storybook/stories/common/Switch.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Switch.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { FormControlLabel, Grid, Switch } from '@mui/material'; const options = { - title: 'Common/Switch', + title: 'Atoms/Switch', component: Switch, argTypes: { color: { diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Text-field.stories.js rename to packages/react-ui/storybook/stories/atoms/Text-field.stories.js index 6cbc82000..6ba5b561f 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Grid, InputAdornment, TextField } from '@mui/material'; import { Visibility } from '@mui/icons-material'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Text Field', + title: 'Atoms/Text Field', component: TextField, argTypes: { variant: { diff --git a/packages/react-ui/storybook/stories/foundations/Borders.stories.js b/packages/react-ui/storybook/stories/foundations/Borders.stories.js index f5f3b691d..dda8e7b4e 100644 --- a/packages/react-ui/storybook/stories/foundations/Borders.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Borders.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Borders', diff --git a/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js b/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js index b106b5c23..6fbf1e598 100644 --- a/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Typography } from '@mui/material'; +import { Box } from '@mui/material'; import { makeStyles } from '@mui/styles'; import { BREAKPOINTS } from '../../../src/theme/themeConstants'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Breakpoints', diff --git a/packages/react-ui/storybook/stories/foundations/Elevations.stories.js b/packages/react-ui/storybook/stories/foundations/Elevations.stories.js index 83bd18ee8..91ab490cb 100644 --- a/packages/react-ui/storybook/stories/foundations/Elevations.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Elevations.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Elevations', diff --git a/packages/react-ui/storybook/stories/foundations/Palette.stories.js b/packages/react-ui/storybook/stories/foundations/Palette.stories.js index 7aa4db8bf..ddf7474ea 100644 --- a/packages/react-ui/storybook/stories/foundations/Palette.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Palette.stories.js @@ -2,7 +2,7 @@ import React, { useRef } from 'react'; import { Box, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { useTheme } from '@mui/material/styles'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Palette', diff --git a/packages/react-ui/storybook/stories/foundations/Spacing.stories.js b/packages/react-ui/storybook/stories/foundations/Spacing.stories.js index 67aba3802..de65a0cd1 100644 --- a/packages/react-ui/storybook/stories/foundations/Spacing.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Spacing.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Spacing', diff --git a/packages/react-ui/storybook/stories/foundations/Typography.stories.js b/packages/react-ui/storybook/stories/foundations/Typography.stories.js index 9e3927fe8..d3a1a114b 100644 --- a/packages/react-ui/storybook/stories/foundations/Typography.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Typography.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Typography', diff --git a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/Autocomplete.stories.js rename to packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js index e22ac0ac0..5dc00c6e7 100644 --- a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js @@ -3,7 +3,7 @@ import Autocomplete from '@mui/material/Autocomplete'; import { Grid, TextField } from '@mui/material'; const options = { - title: 'Common/Autocomplete', + title: 'Molecules/Autocomplete', component: Autocomplete, argTypes: { variant: { diff --git a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js b/packages/react-ui/storybook/stories/molecules/Breadcrumb.stories.js similarity index 94% rename from packages/react-ui/storybook/stories/common/Breadcrumb.stories.js rename to packages/react-ui/storybook/stories/molecules/Breadcrumb.stories.js index eab805bf7..6714da148 100644 --- a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Breadcrumb.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Breadcrumbs, Link } from '@mui/material'; import { NavigateNext, CloudCircle, Home, Style } from '@mui/icons-material'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Breadcrumbs', + title: 'Molecules/Breadcrumbs', component: Breadcrumbs, argTypes: { maxItems: { diff --git a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/ButtonGroup.stories.js rename to packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js index aa52e1bbc..bd85cbd20 100644 --- a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { Button, Grid, ButtonGroup } from '@mui/material'; const options = { - title: 'Common/Button Group', + title: 'Molecules/Button Group', component: ButtonGroup, argTypes: { variant: { diff --git a/packages/react-ui/storybook/stories/common/Chip.stories.js b/packages/react-ui/storybook/stories/molecules/Chip.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/Chip.stories.js rename to packages/react-ui/storybook/stories/molecules/Chip.stories.js index 5f6f7779e..d13dbd082 100644 --- a/packages/react-ui/storybook/stories/common/Chip.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Chip.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { Avatar, Chip, Grid } from '@mui/material'; const options = { - title: 'Common/Chip', + title: 'Molecules/Chip', component: Chip, argTypes: { avatar: { diff --git a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/ToggleButton.stories.js rename to packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index 8e4d8979d..bcbb87251 100644 --- a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -6,7 +6,7 @@ import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive'; import TrainIcon from '@mui/icons-material/Train'; const options = { - title: 'Common/Toggle Button', + title: 'Molecules/Toggle Button', component: ToggleButtonGroup, argTypes: { size: { diff --git a/packages/react-ui/storybook/stories/common/Tooltip.stories.js b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/Tooltip.stories.js rename to packages/react-ui/storybook/stories/molecules/Tooltip.stories.js index 8bfa089dc..8800348be 100644 --- a/packages/react-ui/storybook/stories/common/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Button, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Tooltip', + title: 'Molecules/Tooltip', component: Tooltip, argTypes: { title: { diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/organisms/Dialog.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/Dialog.stories.js rename to packages/react-ui/storybook/stories/organisms/Dialog.stories.js index a9e31ff52..46645f893 100644 --- a/packages/react-ui/storybook/stories/common/Dialog.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Dialog.stories.js @@ -13,7 +13,7 @@ import { } from '@mui/material'; const options = { - title: 'Common/Dialog', + title: 'Organisms/Dialog', component: Dialog, argTypes: { disableEscapeKeyDown: { diff --git a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js index 94e80796e..33456982c 100644 --- a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js +++ b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js @@ -1,9 +1,9 @@ import { Box, Button, CircularProgress, FormControl, InputLabel } from '@mui/material'; import React, { useState } from 'react'; -import InputFile from '../../../src/custom-components/InputFile'; +import InputFile from '../../../src/components/organisms/InputFile'; import { Alert } from '@mui/material'; import UploadIcon from '../../../src/assets/UploadIcon'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Organisms/InputFile', diff --git a/packages/react-ui/storybook/stories/common/List.stories.js b/packages/react-ui/storybook/stories/organisms/List.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/List.stories.js rename to packages/react-ui/storybook/stories/organisms/List.stories.js index 221155785..66e6240d6 100644 --- a/packages/react-ui/storybook/stories/common/List.stories.js +++ b/packages/react-ui/storybook/stories/organisms/List.stories.js @@ -29,7 +29,7 @@ import { } from '@mui/icons-material'; const options = { - title: 'Common/List', + title: 'Organisms/List', component: List, parameters: { design: { diff --git a/packages/react-ui/storybook/stories/common/Tabs.stories.js b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Tabs.stories.js rename to packages/react-ui/storybook/stories/organisms/Tabs.stories.js index 7a4dcc6fd..695097d55 100644 --- a/packages/react-ui/storybook/stories/common/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js @@ -3,7 +3,7 @@ import { Tab, Tabs } from '@mui/material'; import { Layers, LocalOffer, Map, Place, Store } from '@mui/icons-material'; const options = { - title: 'Common/Tabs', + title: 'Organisms/Tabs', component: Tabs, argTypes: { variant: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js index 39f657033..c0c95efa5 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js @@ -3,7 +3,7 @@ import BarWidgetUI from '../../../src/widgets/BarWidgetUI'; import { buildReactPropsAsString } from '../../utils'; const options = { - title: 'Custom Components/BarWidgetUI', + title: 'Organisms/Widgets/BarWidgetUI', component: BarWidgetUI }; diff --git a/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js index 8dfb4610b..f210a76b3 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import CategoryWidgetUI from '../../../src/widgets/CategoryWidgetUI'; const options = { - title: 'Custom Components/CategoryWidgetUI', + title: 'Organisms/Widgets/CategoryWidgetUI', component: CategoryWidgetUI, argTypes: { selectedCategories: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js index 79d9c0264..5fe81da5b 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js @@ -6,7 +6,7 @@ import PolygonIcon from '../../../src/assets/PolygonIcon'; import RectangleIcon from '../../../src/assets/RectangleIcon'; const options = { - title: 'Custom Components/FeatureSelectionWidgetUI', + title: 'Organisms/Widgets/FeatureSelectionWidgetUI', component: FeatureSelectionWidgetUI, argTypes: { enabled: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js index 5fe3d3e38..1a0a055d6 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import FormulaWidgetUI from '../../../src/widgets/FormulaWidgetUI'; const options = { - title: 'Custom Components/FormulaWidgetUI', + title: 'Organisms/Widgets/FormulaWidgetUI', component: FormulaWidgetUI, argTypes: { formatter: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js index 8c6b20475..cd352208a 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import HistogramWidgetUI from '../../../src/widgets/HistogramWidgetUI/HistogramWidgetUI'; const options = { - title: 'Custom Components/HistogramWidgetUI', + title: 'Organisms/Widgets/HistogramWidgetUI', component: HistogramWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js index 313c6b206..96c87ae36 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import LegendWidgetUI from '../../../src/widgets/legend/LegendWidgetUI'; const options = { - title: 'Custom Components/LegendWidgetUI', + title: 'Organisms/Widgets/LegendWidgetUI', component: LegendWidgetUI, argTypes: { className: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js b/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js index bb321efb2..ac68e74aa 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js @@ -3,7 +3,7 @@ import React from 'react'; import { buildReactPropsAsString } from '../../utils'; const options = { - title: 'Custom Components/NoDataAlert', + title: 'Organisms/Widgets/NoDataAlert', component: NoDataAlert, argTypes: { title: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js index 971783477..32e9ac671 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import PieWidgetUI from '../../../src/widgets/PieWidgetUI'; const options = { - title: 'Custom Components/PieWidgetUI', + title: 'Organisms/Widgets/PieWidgetUI', component: PieWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js index c128e9861..12cc7fd9c 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import RangeWidgetUI from '../../../src/widgets/RangeWidgetUI'; const options = { - title: 'Custom Components/RangeWidgetUI', + title: 'Organisms/Widgets/RangeWidgetUI', component: RangeWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js index d52df8a49..581d54588 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import ScatterPlotWidgetUI from '../../../src/widgets/ScatterPlotWidgetUI'; const options = { - title: 'Custom Components/ScatterPlotWidgetUI', + title: 'Organisms/Widgets/ScatterPlotWidgetUI', component: ScatterPlotWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js index 8ede930f0..521ad734a 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js @@ -3,10 +3,10 @@ import TableWidgetUI from '../../../src/widgets/TableWidgetUI/TableWidgetUI'; import { Box } from '@mui/material'; import LocationOnIcon from '@mui/icons-material/LocationOn'; import { columns, rows } from '../../../src/widgets/TableWidgetUI/mockData'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Custom Components/TableWidgetUI', + title: 'Organisms/Widgets/TableWidgetUI', component: TableWidgetUI, argTypes: {}, parameters: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js index ac88d7915..d2031a481 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js @@ -66,7 +66,7 @@ const data = [ ]; const options = { - title: 'Custom Components/TimeSeriesWidgetUI', + title: 'Organisms/Widgets/TimeSeriesWidgetUI', component: TimeSeriesWidgetUI, argTypes: { data: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js index 626d5231e..e09fd5eaf 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js @@ -5,7 +5,7 @@ import AddLocationIcon from '@mui/icons-material/AddLocation'; import WrapperWidgetUI from '.../../../src/widgets/WrapperWidgetUI'; const options = { - title: 'Custom Components/WrapperWidgetUI', + title: 'Organisms/Widgets/WrapperWidgetUI', component: WrapperWidgetUI, argTypes: { actions: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js index 92bb9da9c..ea331bd6a 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js @@ -9,7 +9,7 @@ const DEFAULT_LEGEND = { }; const options = { - title: 'Custom Components/Legends/LegendCategories', + title: 'Organisms/Widgets/Legends/LegendCategories', component: LegendCategories, argTypes: { legend: {} diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js index b70ad775d..f3daad7aa 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js @@ -11,7 +11,7 @@ const DEFAULT_LEGEND = { }; const options = { - title: 'Custom Components/Legends/LegendIcon', + title: 'Organisms/Widgets/Legends/LegendIcon', component: LegendIcon, argTypes: { legend: {} diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js index 9d97af797..74a87c7d2 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js @@ -8,7 +8,7 @@ const DEFAULT_LEGEND = { }; const options = { - title: 'Custom Components/Legends/LegendProportion', + title: 'Organisms/Widgets/Legends/LegendProportion', component: LegendProportion, argTypes: { legend: {} diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js index 95d8466c4..c46e5b996 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js @@ -20,7 +20,7 @@ const DEFAULT_LEGEND_WITH_FORMATTED_LABELS = { }; const options = { - title: 'Custom Components/Legends/LegendRamp', + title: 'Organisms/Widgets/Legends/LegendRamp', component: LegendRamp, argTypes: { legend: {} From 1f8f55deecb52234c9b53e96179d5b3e2348c306 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 4 Nov 2022 11:19:48 +0100 Subject: [PATCH 29/42] Icon button --- CHANGELOG.md | 1 + packages/react-ui/src/theme/carto-theme.d.ts | 1 - packages/react-ui/src/theme/sections/components/buttons.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 410554f95..d66eb62ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- New design system in priority 1 components [#523](https://github.com/CartoDB/carto-react/pull/523) - Breaking changes in Mui v5: components [#518](https://github.com/CartoDB/carto-react/pull/518) - Breaking changes in Mui v5: styles and theme [#514](https://github.com/CartoDB/carto-react/pull/514/) - Add final Figma links into Storybook [#515](https://github.com/CartoDB/carto-react/pull/515) diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index 1e9247d29..881935807 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -124,7 +124,6 @@ declare module '@mui/material/Typography' { } // Update the Buttons's color prop options - declare module '@mui/material/Button' { interface ButtonPropsColorOverrides { default: true; diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 9b51b0a5e..cb8b5b23e 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -118,7 +118,7 @@ export const buttonsOverrides = { }, ...(ownerState.color === 'default' && { - color: commonPalette.text.primary, + color: commonPalette.text.secondary, '&:hover, &:focus-visible': { backgroundColor: commonPalette.action.hover From bed20724434059d6e27c5a4cdc30db847de12b08 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 4 Nov 2022 18:26:43 +0100 Subject: [PATCH 30/42] New text button component --- .../react-ui/src/components/atoms/Button.js | 23 +++++++++++++++++++ packages/react-ui/src/index.d.ts | 4 +++- packages/react-ui/src/types.d.ts | 10 +++++++- 3 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 packages/react-ui/src/components/atoms/Button.js diff --git a/packages/react-ui/src/components/atoms/Button.js b/packages/react-ui/src/components/atoms/Button.js new file mode 100644 index 000000000..d8e02bdf0 --- /dev/null +++ b/packages/react-ui/src/components/atoms/Button.js @@ -0,0 +1,23 @@ +import React, { forwardRef } from 'react'; +import PropTypes from 'prop-types'; +import { Button as MuiButton } from '@mui/material'; +import Typography from './Typography'; + +const Button = forwardRef(({ style, children, ...otherProps }, ref) => { + // forwardRef needed to be able to hold a reference, in this way it can be a child for some Mui components, like Tooltip + // https://mui.com/material-ui/guides/composition/#caveat-with-refs + + return ( + + + {children} + + + ); +}); + +Button.propTypes = { + style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]) +}; + +export default Button; diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index 2987dca9b..993a2220e 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -23,6 +23,7 @@ import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI'; import NoDataAlert from './widgets/NoDataAlert'; import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI'; import Typography from './components/atoms/Typography'; +import Button from './components/atoms/Button'; export { theme, @@ -50,5 +51,6 @@ export { LegendIcon, LegendProportion, LegendRamp, - Typography + Typography, + Button }; diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index 0b7ed4283..f055f9848 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -1,5 +1,8 @@ import { GroupDateTypes } from '@carto/react-core'; -import { TypographyProps as MuiTypographyProps } from '@mui/material'; +import { + ButtonProps as MuiButtonProps, + TypographyProps as MuiTypographyProps +} from '@mui/material'; import { CSSProperties } from 'react'; export type WrapperWidgetUI = { @@ -197,3 +200,8 @@ export interface TypographyProps extends MuiTypographyProps { italic?: boolean; style?: CSSProperties; } + +// Button +export interface ButtonProps extends MuiButtonProps { + style?: CSSProperties; +} From 3da3fcdbff0e200fee135c0a6d7ad2103b5a315e Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 4 Nov 2022 18:27:25 +0100 Subject: [PATCH 31/42] styles --- .../src/theme/sections/components/buttons.js | 123 ++++++++++++++---- .../storybook/stories/atoms/Button.stories.js | 75 ++++++++++- .../stories/molecules/ButtonGroup.stories.js | 16 +-- 3 files changed, 176 insertions(+), 38 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index cb8b5b23e..fb3258023 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -1,8 +1,20 @@ import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; import { themeTypography } from '../typography'; +import { themeShadows } from '../shadows'; + +const sizeSmall = getSpacing(3); +const sizeMedium = getSpacing(4); +const sizeLarge = getSpacing(6); export const buttonsOverrides = { + // Button Base + MuiButtonBase: { + defaultProps: { + disableRipple: true + } + }, + // Button MuiButton: { defaultProps: { @@ -10,12 +22,48 @@ export const buttonsOverrides = { }, styleOverrides: { - root: { - padding: getSpacing(0, 2) - }, + root: ({ ownerState }) => ({ + '&:hover, &:focus-visible': { + ...(ownerState.color === 'primary' && + ownerState.variant !== 'contained' && { + backgroundColor: commonPalette.primary.background + }), + ...(ownerState.color === 'secondary' && + ownerState.variant !== 'contained' && { + backgroundColor: commonPalette.secondary.background + }), + ...(ownerState.color === 'error' && + ownerState.variant !== 'contained' && + { + // background: commonPalette.error.relatedLight // TODO discuss with design the linear-gradient issue + }) + } + }), + contained: { - boxShadow: 'none' + boxShadow: 'none', + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + backgroundColor: commonPalette.action.disabledBackground + } + }, + outlined: { + '&.Mui-disabled': { + color: commonPalette.text.disabled, + borderColor: commonPalette.default.outlinedBorder + } + }, + outlinedPrimary: { + borderColor: commonPalette.primary.main + }, + outlinedSecondary: { + borderColor: commonPalette.secondary.main + }, + outlinedError: { + borderColor: commonPalette.error.main }, + startIcon: { marginRight: 6, @@ -23,7 +71,8 @@ export const buttonsOverrides = { fontSize: 18 }, '&.MuiButton-iconSizeSmall': { - marginRight: 4 + marginRight: 4, + marginLeft: -4 } }, endIcon: { @@ -33,38 +82,48 @@ export const buttonsOverrides = { fontSize: 18 }, '&.MuiButton-iconSizeSmall': { - marginLeft: 4 + marginLeft: 4, + marginRight: -4 } }, + sizeSmall: { - height: getSpacing(3), + height: sizeSmall, + padding: getSpacing(0, 1.5), ...themeTypography.caption, + lineHeight: sizeSmall, fontWeight: 500, letterSpacing: '0.4px' }, sizeMedium: { - height: getSpacing(4) + height: sizeMedium, + padding: getSpacing(0, 2), + lineHeight: sizeMedium }, sizeLarge: { - height: getSpacing(6), + height: sizeLarge, + padding: getSpacing(0, 2.5), ...themeTypography.body1, + lineHeight: sizeLarge, fontWeight: 500, letterSpacing: '0.25px' } }, - // Custom color + variants: [ + // Custom color and its variants { props: { variant: 'contained', color: 'default' }, style: { color: commonPalette.text.primary, backgroundColor: commonPalette.default.main, + border: `1px solid ${commonPalette.text.primary}`, '&.Mui-disabled': { color: commonPalette.text.disabled, backgroundColor: commonPalette.action.disabledBackground }, - '&:hover, &:focus': { + '&:hover, &:focus-visible': { backgroundColor: commonPalette.default.dark } } @@ -79,8 +138,9 @@ export const buttonsOverrides = { color: commonPalette.text.disabled, borderColor: commonPalette.default.outlinedBorder }, - '&:hover, &:focus': { - backgroundColor: commonPalette.action.hover + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.action.hover, + borderColor: commonPalette.text.primary } } }, @@ -92,7 +152,7 @@ export const buttonsOverrides = { '&.Mui-disabled': { color: commonPalette.text.disabled }, - '&:hover, &:focus': { + '&:hover, &:focus-visible': { backgroundColor: commonPalette.action.hover } } @@ -100,10 +160,24 @@ export const buttonsOverrides = { ] }, - // Button Base - MuiButtonBase: { - defaultProps: { - disableRipple: true + // Mui Button Group + MuiButtonGroup: { + styleOverrides: { + root: ({ ownerState }) => ({ + boxShadow: themeShadows[0], + + ...(ownerState.variant === 'text' && { + boxShadow: themeShadows[1], + '& .MuiButtonGroup-grouped:not(:last-of-type)': { + borderColor: commonPalette.default.dark + } + }), + ...(ownerState.variant === 'outlined' && { + '& .MuiButtonBase-root.Mui-disabled': { + borderColor: 'inherit' + } + }) + }) } }, @@ -135,17 +209,18 @@ export const buttonsOverrides = { } }) }), + sizeSmall: { - width: getSpacing(3), - height: getSpacing(3) + width: sizeSmall, + height: sizeSmall }, sizeMedium: { - width: getSpacing(4), - height: getSpacing(4) + width: sizeMedium, + height: sizeMedium }, sizeLarge: { - width: getSpacing(6), - height: getSpacing(6) + width: sizeLarge, + height: sizeLarge } } }, diff --git a/packages/react-ui/storybook/stories/atoms/Button.stories.js b/packages/react-ui/storybook/stories/atoms/Button.stories.js index e556a8ac4..f3bd94955 100644 --- a/packages/react-ui/storybook/stories/atoms/Button.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Button.stories.js @@ -1,6 +1,9 @@ import React from 'react'; -import { Button, Grid } from '@mui/material'; +import { Grid, Tooltip } from '@mui/material'; import { Add, Close } from '@mui/icons-material'; +import LoadingButton from '@mui/lab/LoadingButton'; +import Typography from '../../../src/components/atoms/Typography'; +import Button from '../../../src/components/atoms/Button'; const options = { title: 'Atoms/Button', @@ -44,7 +47,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26509' }, status: { - type: 'inDevelopment' + type: 'readyToReview' } } }; @@ -118,6 +121,72 @@ const ColorTemplate = ({ label, icon, ...rest }) => { ); }; +const BehaviorTemplate = ({ label, icon, ...rest }) => { + const overflowLabel = 'TextButton with overflow'; + + return ( + + + + {'Overflow + optional tooltip'} + + + + + + + + + + + + + + + + + + + {'Loading'} + + + + + {'Disabled'} + + + + } + > + {'Import data'} + + + + } + > + {'Send email'} + + + + + + ); +}; + export const Playground = PlaygroundTemplate.bind({}); Playground.args = { label: 'Button' }; @@ -141,3 +210,5 @@ ErrorColor.args = { color: 'error' }; export const DefaultColor = ColorTemplate.bind({}); DefaultColor.args = { color: 'default' }; + +export const Behavior = BehaviorTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js index bd85cbd20..f265d3a31 100644 --- a/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js @@ -46,7 +46,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A27945' }, status: { - type: 'needUpdate' + type: 'readyToReview' } } }; @@ -100,35 +100,27 @@ const ButtonTemplate = ({ label, icon, ...rest }) => { ); }; -const disabledControlsArgTypes = { - variant: { table: { disable: true } }, - size: { table: { disable: true } }, - disabled: { table: { disable: true } } -}; export const Default = PlaygroundTemplate.bind({}); Default.args = { label: 'Button' }; export const Contained = ButtonTemplate.bind({}); Contained.args = { variant: 'contained' }; -Contained.argTypes = disabledControlsArgTypes; export const Outlined = ButtonTemplate.bind({}); Outlined.args = { variant: 'outlined' }; -Outlined.argTypes = disabledControlsArgTypes; export const Base = ButtonTemplate.bind({}); Base.args = { variant: 'text' }; -Base.argTypes = disabledControlsArgTypes; export const ContainedPrimary = ButtonTemplate.bind({}); ContainedPrimary.args = { variant: 'contained', color: 'primary' }; -ContainedPrimary.argTypes = disabledControlsArgTypes; export const OutlinedPrimary = ButtonTemplate.bind({}); OutlinedPrimary.args = { variant: 'outlined', color: 'primary' }; -OutlinedPrimary.argTypes = disabledControlsArgTypes; export const BasePrimary = ButtonTemplate.bind({}); BasePrimary.args = { variant: 'text', color: 'primary' }; -BasePrimary.argTypes = disabledControlsArgTypes; + +export const Vertical = ButtonTemplate.bind({}); +Vertical.args = { variant: 'text', color: 'primary', orientation: 'vertical' }; From 32f19de2b1c349b972cd23f4e2bae2008b25f517 Mon Sep 17 00:00:00 2001 From: vmilan Date: Fri, 4 Nov 2022 18:27:44 +0100 Subject: [PATCH 32/42] add CssBaseline to Storybook ThemeProvider --- packages/react-ui/storybook/.storybook/preview.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index 2af060c46..edef164fb 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -4,18 +4,12 @@ import { createTheme, responsiveFontSizes, ThemeProvider, - StyledEngineProvider + StyledEngineProvider, + CssBaseline } from '@mui/material'; -import { cartoThemeOptions } from '../../src/theme/carto-theme'; +import { cartoThemeOptions, theme } from '../../src/theme/carto-theme'; import { BREAKPOINTS } from '../../src/theme/themeConstants'; -let theme = createTheme(cartoThemeOptions); -theme = responsiveFontSizes(theme, { - breakpoints: ['sm'], - disableAlign: false, - factor: 2 -}); - const customViewports = { xs: { name: 'xs', @@ -86,6 +80,7 @@ export const decorators = [ (Story) => ( + From 5c47bd882a7ea2a3831d24c1bc8b4241d9b6284e Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 7 Nov 2022 11:38:05 +0100 Subject: [PATCH 33/42] Button pairing styles --- packages/react-ui/src/components/atoms/Button.js | 2 +- .../src/theme/sections/components/buttons.js | 7 +++++++ .../storybook/stories/atoms/Button.stories.js | 14 ++++++++++++++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/react-ui/src/components/atoms/Button.js b/packages/react-ui/src/components/atoms/Button.js index d8e02bdf0..af4b56f29 100644 --- a/packages/react-ui/src/components/atoms/Button.js +++ b/packages/react-ui/src/components/atoms/Button.js @@ -9,7 +9,7 @@ const Button = forwardRef(({ style, children, ...otherProps }, ref) => { return ( - + {children} diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index fb3258023..fc0450634 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -32,11 +32,18 @@ export const buttonsOverrides = { ownerState.variant !== 'contained' && { backgroundColor: commonPalette.secondary.background }), + ...(ownerState.color === 'secondary' && + ownerState.variant === 'contained' && { + backgroundColor: commonPalette.secondary.light + }), ...(ownerState.color === 'error' && ownerState.variant !== 'contained' && { // background: commonPalette.error.relatedLight // TODO discuss with design the linear-gradient issue }) + }, + '& + &': { + marginLeft: getSpacing(1) } }), diff --git a/packages/react-ui/storybook/stories/atoms/Button.stories.js b/packages/react-ui/storybook/stories/atoms/Button.stories.js index f3bd94955..511d337e1 100644 --- a/packages/react-ui/storybook/stories/atoms/Button.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Button.stories.js @@ -151,6 +151,20 @@ const BehaviorTemplate = ({ label, icon, ...rest }) => { + + + {'Pairing buttons'} + + + + + + + + + {'Loading'} From 8c8285161e756fedcd063d7cf82dbddbef03b268 Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 7 Nov 2022 12:00:21 +0100 Subject: [PATCH 34/42] simplify some colors --- .../src/theme/sections/components/buttons.js | 5 ++--- .../react-ui/src/theme/sections/palette.js | 21 +++++++++---------- packages/react-ui/src/theme/themeUtils.js | 13 ------------ 3 files changed, 12 insertions(+), 27 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index fc0450634..92d15d30b 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -37,9 +37,8 @@ export const buttonsOverrides = { backgroundColor: commonPalette.secondary.light }), ...(ownerState.color === 'error' && - ownerState.variant !== 'contained' && - { - // background: commonPalette.error.relatedLight // TODO discuss with design the linear-gradient issue + ownerState.variant !== 'contained' && { + background: commonPalette.error.relatedLight }) }, '& + &': { diff --git a/packages/react-ui/src/theme/sections/palette.js b/packages/react-ui/src/theme/sections/palette.js index 18bfbfe37..ee1c94f79 100644 --- a/packages/react-ui/src/theme/sections/palette.js +++ b/packages/react-ui/src/theme/sections/palette.js @@ -1,5 +1,4 @@ import { alpha } from '@mui/material'; -import { getMixedColor } from '../themeUtils'; const COLOR_BLACK = '#2C3032'; const COLOR_WHITE = '#FFFFFF'; @@ -105,7 +104,7 @@ export const commonPalette = { light: baseColors.blue[300], contrastText: baseColors.common.white, background: alpha(baseColors.blue[400], 0.08), - relatedLight: getMixedColor(baseColors.blue[400], baseColors.common.white, 0.9) + relatedLight: '#EAF2FC' }, secondary: { main: baseColors.green[400], @@ -113,7 +112,7 @@ export const commonPalette = { light: baseColors.green[300], contrastText: baseColors.common.black, background: alpha(baseColors.green[400], 0.08), - relatedLight: getMixedColor(baseColors.green[400], baseColors.common.white, 0.9) + relatedLight: '#EFFCF5' }, text: { primary: baseColors.common.black, @@ -138,32 +137,32 @@ export const commonPalette = { dark: baseColors.indigo[500], light: baseColors.indigo[300], contrastText: baseColors.common.white, - relatedDark: getMixedColor(baseColors.indigo[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.indigo[400], baseColors.common.white, 0.9) + relatedDark: '#0d2b4a', + relatedLight: '#E9EEF4' }, success: { main: baseColors.lightGreen[400], dark: baseColors.lightGreen[500], light: baseColors.lightGreen[300], contrastText: baseColors.common.white, - relatedDark: getMixedColor(baseColors.lightGreen[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.lightGreen[400], baseColors.common.white, 0.9) + relatedDark: '#3D541A', + relatedLight: '#F2F5EB' }, warning: { main: baseColors.orange[400], dark: baseColors.orange[500], light: baseColors.orange[300], contrastText: baseColors.common.black, - relatedDark: getMixedColor(baseColors.orange[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.orange[400], baseColors.common.white, 0.9) + relatedDark: '#78540F', + relatedLight: '#FEF6EA' }, error: { main: baseColors.red[400], light: baseColors.red[300], dark: baseColors.red[500], contrastText: baseColors.common.white, - relatedDark: getMixedColor(baseColors.red[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.red[400], baseColors.common.white, 0.9) + relatedDark: '#622215', + relatedLight: '#F9EDEA' }, grey: { ...baseColors.neutral diff --git a/packages/react-ui/src/theme/themeUtils.js b/packages/react-ui/src/theme/themeUtils.js index dc7b64cca..9675338ff 100644 --- a/packages/react-ui/src/theme/themeUtils.js +++ b/packages/react-ui/src/theme/themeUtils.js @@ -11,16 +11,3 @@ export function getPixelToRem(px) { return rem; } - -// Lighten and darken color design formula. -// The Mui lighten / darken function doesn't get the same color as designers use -export function getMixedColor(color, baseColor, alpha) { - const getRgbaBaseColor = (baseColor, alpha = 1) => { - const [r, g, b] = baseColor.match(/\w\w/g).map((x) => parseInt(x, 16)); - return `rgba(${r},${g},${b},${alpha})`; - }; - const rgbaBaseColorValue = getRgbaBaseColor(baseColor, alpha); - const colorResult = `linear-gradient(0deg, ${rgbaBaseColorValue}, ${rgbaBaseColorValue}), ${color}`; - - return colorResult; -} From 7842ed21f9a928c9c80aef8cd9fdcc7472031540 Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 7 Nov 2022 19:01:57 +0100 Subject: [PATCH 35/42] button group styles --- packages/react-ui/src/index.js | 4 +- .../src/theme/sections/components/buttons.js | 58 +++++++++- .../storybook/stories/atoms/Button.stories.js | 10 +- .../stories/molecules/ButtonGroup.stories.js | 108 +++++++++++++++--- 4 files changed, 153 insertions(+), 27 deletions(-) diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index 423d747c2..c82ab0ca1 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -23,6 +23,7 @@ import RectangleIcon from './assets/RectangleIcon'; import LassoIcon from './assets/LassoIcon'; import CircleIcon from './assets/CircleIcon'; import Typography from './components/atoms/Typography'; +import Button from './components/atoms/Button'; const featureSelectionIcons = { CursorIcon, @@ -55,5 +56,6 @@ export { LegendIcon, LegendProportion, LegendRamp, - Typography + Typography, + Button }; diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 92d15d30b..ebc2bf4e8 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -1,3 +1,4 @@ +// salto de borde y colores ok import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; import { themeTypography } from '../typography'; @@ -23,6 +24,8 @@ export const buttonsOverrides = { styleOverrides: { root: ({ ownerState }) => ({ + maxWidth: '192px', + '&:hover, &:focus-visible': { ...(ownerState.color === 'primary' && ownerState.variant !== 'contained' && { @@ -43,6 +46,9 @@ export const buttonsOverrides = { }, '& + &': { marginLeft: getSpacing(1) + }, + '& .MuiSvgIcon-root': { + fontSize: 18 } }), @@ -168,23 +174,67 @@ export const buttonsOverrides = { // Mui Button Group MuiButtonGroup: { + defaultProps: { + disableRipple: true + }, + styleOverrides: { root: ({ ownerState }) => ({ boxShadow: themeShadows[0], + '& .MuiButton-root + .MuiButton-root': { + marginLeft: 0 + }, + ...(ownerState.variant === 'text' && { boxShadow: themeShadows[1], + borderColor: commonPalette.default.dark, + '& .MuiButtonGroup-grouped:not(:last-of-type)': { borderColor: commonPalette.default.dark } }), ...(ownerState.variant === 'outlined' && { - '& .MuiButtonBase-root.Mui-disabled': { - borderColor: 'inherit' - } + ...(ownerState.color === 'default' && { + '& .MuiButtonBase-root.Mui-disabled': { + borderColor: commonPalette.text.primary + } + }), + ...(ownerState.color === 'primary' && { + '& .MuiButtonBase-root.Mui-disabled': { + borderColor: commonPalette.primary.main + } + }), + ...(ownerState.color === 'secondary' && { + '& .MuiButtonBase-root.Mui-disabled': { + borderColor: commonPalette.secondary.main + } + }), + '& .MuiButtonGroup-grouped:not(:last-of-type):hover, & .Mui-disabled:not(:last-of-type)': + { + borderRightColor: 'transparent' + } }) }) - } + }, + variants: [ + // Custom color and its variants + { + props: { variant: 'contained', color: 'default' }, + style: { + '& .MuiButton-root': { + borderColor: commonPalette.default.main + }, + '& .MuiButtonGroup-grouped:not(:last-of-type)': { + borderColor: commonPalette.default.main, + borderRightColor: commonPalette.default.dark + }, + '& .MuiButtonGroup-grouped:hover, & .MuiButtonGroup-grouped:focus-visible': { + borderColor: commonPalette.default.dark + } + } + } + ] }, // Icon Button diff --git a/packages/react-ui/storybook/stories/atoms/Button.stories.js b/packages/react-ui/storybook/stories/atoms/Button.stories.js index 511d337e1..b85f58c55 100644 --- a/packages/react-ui/storybook/stories/atoms/Button.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Button.stories.js @@ -122,7 +122,7 @@ const ColorTemplate = ({ label, icon, ...rest }) => { }; const BehaviorTemplate = ({ label, icon, ...rest }) => { - const overflowLabel = 'TextButton with overflow'; + const overflowLabel = 'Text Button with overflow'; return ( @@ -132,19 +132,17 @@ const BehaviorTemplate = ({ label, icon, ...rest }) => { - + - - diff --git a/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js index f265d3a31..20e972697 100644 --- a/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js @@ -1,5 +1,6 @@ import React from 'react'; import { Button, Grid, ButtonGroup } from '@mui/material'; +import { Close } from '@mui/icons-material'; const options = { title: 'Molecules/Button Group', @@ -30,6 +31,7 @@ const options = { } }, disabled: { + defaultValue: false, control: { type: 'boolean' } @@ -61,6 +63,7 @@ const PlaygroundTemplate = ({ label, icon, ...rest }) => ( ); + const ButtonTemplate = ({ label, icon, ...rest }) => { const smallLabel = label ? label : 'Small button'; const mediumLabel = label ? label : 'Normal button'; @@ -69,40 +72,110 @@ const ButtonTemplate = ({ label, icon, ...rest }) => { return ( - + - + - + - - - + + + - + ); }; -export const Default = PlaygroundTemplate.bind({}); -Default.args = { label: 'Button' }; +const ColorTemplate = ({ label, icon, ...rest }) => { + const containedLabel = label ? label : 'Contained button'; + const outlinedLabel = label ? label : 'Outlined button'; + const textLabel = label ? label : 'Text button'; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const SplitTemplate = ({ ...rest }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { label: 'Button' }; export const Contained = ButtonTemplate.bind({}); Contained.args = { variant: 'contained' }; @@ -113,14 +186,17 @@ Outlined.args = { variant: 'outlined' }; export const Base = ButtonTemplate.bind({}); Base.args = { variant: 'text' }; -export const ContainedPrimary = ButtonTemplate.bind({}); -ContainedPrimary.args = { variant: 'contained', color: 'primary' }; +export const Primary = ColorTemplate.bind({}); +Primary.args = { color: 'primary' }; -export const OutlinedPrimary = ButtonTemplate.bind({}); -OutlinedPrimary.args = { variant: 'outlined', color: 'primary' }; +export const Secondary = ColorTemplate.bind({}); +Secondary.args = { color: 'secondary' }; -export const BasePrimary = ButtonTemplate.bind({}); -BasePrimary.args = { variant: 'text', color: 'primary' }; +export const Default = ColorTemplate.bind({}); +Default.args = { color: 'default' }; export const Vertical = ButtonTemplate.bind({}); -Vertical.args = { variant: 'text', color: 'primary', orientation: 'vertical' }; +Vertical.args = { variant: 'outlined', color: 'primary', orientation: 'vertical' }; + +export const Split = SplitTemplate.bind({}); +Split.args = { variant: 'outlined', color: 'primary' }; From bf60e09aac76401647ae69d0db393ab7373dbbd8 Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 7 Nov 2022 19:14:55 +0100 Subject: [PATCH 36/42] fab button --- .../src/theme/sections/components/buttons.js | 30 +++++++ .../storybook/stories/atoms/FAB.stories.js | 90 +++++++++++++++++++ 2 files changed, 120 insertions(+) create mode 100644 packages/react-ui/storybook/stories/atoms/FAB.stories.js diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index ebc2bf4e8..41f87e113 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -349,5 +349,35 @@ export const buttonsOverrides = { } } } + }, + + // FAB button + MuiFab: { + styleOverrides: { + root: { + '& .MuiSvgIcon-root': { + width: 24, + height: 24 + } + }, + sizeSmall: { + width: 32, + height: 32, + minHeight: 32, + + '& .MuiSvgIcon-root': { + width: 18, + height: 18 + }, + '&.MuiFab-extended': { + width: 'auto' + } + }, + secondary: { + '&:hover': { + backgroundColor: commonPalette.secondary.light + } + } + } } }; diff --git a/packages/react-ui/storybook/stories/atoms/FAB.stories.js b/packages/react-ui/storybook/stories/atoms/FAB.stories.js new file mode 100644 index 000000000..afefc1862 --- /dev/null +++ b/packages/react-ui/storybook/stories/atoms/FAB.stories.js @@ -0,0 +1,90 @@ +import React from 'react'; +import { Fab, Grid } from '@mui/material'; +import { Add, Close, Edit } from '@mui/icons-material'; + +const options = { + title: 'Atoms/FAB Button', + component: Fab, + argTypes: { + variant: { + defaultValue: 'contained', + control: { + type: 'select', + options: ['default', 'extended'] + } + }, + color: { + defaultValue: 'primary', + control: { + type: 'select', + options: ['primary', 'secondary'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26509' + }, + status: { + type: 'readyToReview' + } + } +}; +export default options; + +const FABButtons = ({ label, size, disabled, variant, ...rest }) => { + const customLabel = label ? label : 'Label'; + + return ( + + + + + + + + + + + + + + + {customLabel} + + + + ); +}; + +export const Playground = FABButtons.bind({}); + +export const PrimaryColor = FABButtons.bind({}); +PrimaryColor.args = { color: 'primary' }; + +export const SecondaryColor = FABButtons.bind({}); +SecondaryColor.args = { color: 'secondary' }; From 1eac14c690920135469ead457d495b34658e3e21 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 8 Nov 2022 09:17:44 +0100 Subject: [PATCH 37/42] fab button --- .../src/theme/sections/components/buttons.js | 54 ++++++++++++++----- .../storybook/stories/atoms/FAB.stories.js | 52 +++++++++++++++--- 2 files changed, 88 insertions(+), 18 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 41f87e113..73191f9b8 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -7,6 +7,7 @@ import { themeShadows } from '../shadows'; const sizeSmall = getSpacing(3); const sizeMedium = getSpacing(4); const sizeLarge = getSpacing(6); +const iconSize = getSpacing(2.25); export const buttonsOverrides = { // Button Base @@ -48,7 +49,7 @@ export const buttonsOverrides = { marginLeft: getSpacing(1) }, '& .MuiSvgIcon-root': { - fontSize: 18 + fontSize: iconSize } }), @@ -80,7 +81,7 @@ export const buttonsOverrides = { marginRight: 6, '& .MuiSvgIcon-root': { - fontSize: 18 + fontSize: iconSize }, '&.MuiButton-iconSizeSmall': { marginRight: 4, @@ -91,7 +92,7 @@ export const buttonsOverrides = { marginLeft: 6, '& .MuiSvgIcon-root': { - fontSize: 18 + fontSize: iconSize }, '&.MuiButton-iconSizeSmall': { marginLeft: 4, @@ -244,7 +245,7 @@ export const buttonsOverrides = { borderRadius: getSpacing(0.5), '& .MuiSvgIcon-root': { - fontSize: 18 + fontSize: iconSize }, ...(ownerState.color === 'default' && { @@ -356,23 +357,52 @@ export const buttonsOverrides = { styleOverrides: { root: { '& .MuiSvgIcon-root': { - width: 24, - height: 24 + width: getSpacing(3), + height: getSpacing(3) + }, + '&.MuiFab-extended': { + ...themeTypography.body1, + fontWeight: 500, + width: 'auto', + height: getSpacing(7), + paddingRight: getSpacing(3), + borderRadius: getSpacing(8), + + '& .MuiSvgIcon-root': { + marginRight: getSpacing(1.5) + } } }, + sizeSmall: { - width: 32, - height: 32, - minHeight: 32, + width: getSpacing(4), + height: getSpacing(4), + minHeight: getSpacing(4), '& .MuiSvgIcon-root': { - width: 18, - height: 18 + width: iconSize, + height: iconSize }, '&.MuiFab-extended': { - width: 'auto' + ...themeTypography.body2, + fontWeight: 600, + width: 'auto', + height: getSpacing(4), + paddingRight: getSpacing(2), + + '& .MuiSvgIcon-root': { + marginRight: getSpacing(1) + } + } + }, + sizeMedium: { + '&.MuiFab-extended': { + ...themeTypography.body2, + fontWeight: 600, + height: getSpacing(6) } }, + secondary: { '&:hover': { backgroundColor: commonPalette.secondary.light diff --git a/packages/react-ui/storybook/stories/atoms/FAB.stories.js b/packages/react-ui/storybook/stories/atoms/FAB.stories.js index afefc1862..7205fcdd7 100644 --- a/packages/react-ui/storybook/stories/atoms/FAB.stories.js +++ b/packages/react-ui/storybook/stories/atoms/FAB.stories.js @@ -41,7 +41,7 @@ const options = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26509' + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28899' }, status: { type: 'readyToReview' @@ -54,7 +54,7 @@ const FABButtons = ({ label, size, disabled, variant, ...rest }) => { const customLabel = label ? label : 'Label'; return ( - + <> @@ -77,14 +77,54 @@ const FABButtons = ({ label, size, disabled, variant, ...rest }) => { {customLabel} - + + + + + + + + + + + + + + {customLabel} + + + ); }; -export const Playground = FABButtons.bind({}); +const Template = ({ label, size, color, ...rest }) => ( + + + +); -export const PrimaryColor = FABButtons.bind({}); +const SizeTemplate = ({ label, color, ...rest }) => ( + + + + + + + + + + + + + +); + +export const Playground = Template.bind({}); + +export const PrimaryColor = Template.bind({}); PrimaryColor.args = { color: 'primary' }; -export const SecondaryColor = FABButtons.bind({}); +export const SecondaryColor = Template.bind({}); SecondaryColor.args = { color: 'secondary' }; + +export const Sizes = SizeTemplate.bind({}); From 56e6d26fa5abaa76b5f7e560b3af5d201f530067 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 8 Nov 2022 09:21:12 +0100 Subject: [PATCH 38/42] fab button --- .../storybook/stories/{atoms => molecules}/FAB.stories.js | 2 +- .../storybook/stories/molecules/ToggleButton.stories.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename packages/react-ui/storybook/stories/{atoms => molecules}/FAB.stories.js (98%) diff --git a/packages/react-ui/storybook/stories/atoms/FAB.stories.js b/packages/react-ui/storybook/stories/molecules/FAB.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/atoms/FAB.stories.js rename to packages/react-ui/storybook/stories/molecules/FAB.stories.js index 7205fcdd7..1b87e34d4 100644 --- a/packages/react-ui/storybook/stories/atoms/FAB.stories.js +++ b/packages/react-ui/storybook/stories/molecules/FAB.stories.js @@ -3,7 +3,7 @@ import { Fab, Grid } from '@mui/material'; import { Add, Close, Edit } from '@mui/icons-material'; const options = { - title: 'Atoms/FAB Button', + title: 'Molecules/FAB Button', component: Fab, argTypes: { variant: { diff --git a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index bcbb87251..289e6ff9c 100644 --- a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -36,7 +36,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36258' }, status: { - type: 'needUpdate' + type: 'inDevelopment' } } }; From 1f0ca2e58233fdc609445d93bde8fdf9b3411a15 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 8 Nov 2022 10:28:23 +0100 Subject: [PATCH 39/42] upgrade notes --- UPGRADE.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/UPGRADE.md b/UPGRADE.md index e01485a7f..2ed6297e2 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -1,13 +1,13 @@ # Upgrade to the new design system -## Breaking changes in Mui v5 +# Breaking changes in Mui v5 Please, follow the Mui guides related to breaking changes in components and styles: - [Styles](https://mui.com/material-ui/migration/v5-style-changes/) - [Components](https://mui.com/material-ui/migration/v5-component-changes/) -## MUI theme +# MUI theme [carto-theme.js](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/src/theme/carto-theme.js) file splitted in sections: @@ -36,7 +36,7 @@ Added a few custom variants to the typography set: - code2 - code3 -`Open Sans` and `Montserrat` families have been replaced by `Inter` and `Overpass Mono`, you have an example of this in the [`preview-head.html`](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/storybook/.storybook/preview-head.html) file. +For external use: `Open Sans` and `Montserrat` families have been replaced by `Inter` and `Overpass Mono`, you have an example of this in the [`preview-head.html`](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/storybook/.storybook/preview-head.html) file. We have a `Typography` component that uses `Mui Typography` and extends it with some useful props: @@ -48,7 +48,7 @@ This way we can be more flexible regarding text styles without adding too many v In short, instead of Mui Typography, the component you should use to add text is this one: `react-ui/src/atoms/Typography` -So `import { Typography } from '@carto/react-ui';`. +For external use: `import { Typography } from '@carto/react-ui';`. ## Colors @@ -93,3 +93,14 @@ Use: `borderRadius: theme.spacing(x)` Design is restringed to a few specific values for shadows, which are: `0, 1, 2, 4, 6, 8, 16, 24`. + +# Components + +## Button + +We have a `Button` component that uses `Mui Button` and wraps its children in `Typography` to meet with the designed behavior (text overflow case). + +So, instead of Mui Button, the component you should use to create buttons is this one: +`react-ui/src/atoms/Button` + +For external use: `import { Button } from '@carto/react-ui';`. From 45f5ec36e8fb325cb7d04a2907086d17b5ab6b88 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 8 Nov 2022 12:44:29 +0100 Subject: [PATCH 40/42] fix test --- packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js index 2f619e61f..ca2a0e7ec 100644 --- a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import Typography from '../../src/atoms/Typography'; +import Typography from '../../src/components/atoms/Typography'; import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI'; import { fireEvent, render, screen } from '../widgets/utils/testUtils'; From 177295e9a42bb0c0a10c66797c4f58603f5bf139 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 8 Nov 2022 17:51:09 +0100 Subject: [PATCH 41/42] buttons review --- .../src/theme/sections/components/buttons.js | 77 ++++++------ .../stories/molecules/ButtonGroup.stories.js | 118 ++++++++---------- 2 files changed, 94 insertions(+), 101 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 73191f9b8..51304a32e 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -28,27 +28,28 @@ export const buttonsOverrides = { maxWidth: '192px', '&:hover, &:focus-visible': { - ...(ownerState.color === 'primary' && - ownerState.variant !== 'contained' && { + ...(ownerState.variant !== 'contained' && { + ...(ownerState.color === 'primary' && { backgroundColor: commonPalette.primary.background }), - ...(ownerState.color === 'secondary' && - ownerState.variant !== 'contained' && { + ...(ownerState.color === 'secondary' && { backgroundColor: commonPalette.secondary.background }), + + ...(ownerState.color === 'error' && { + background: commonPalette.error.relatedLight + }) + }), ...(ownerState.color === 'secondary' && ownerState.variant === 'contained' && { backgroundColor: commonPalette.secondary.light - }), - ...(ownerState.color === 'error' && - ownerState.variant !== 'contained' && { - background: commonPalette.error.relatedLight }) }, '& + &': { marginLeft: getSpacing(1) }, '& .MuiSvgIcon-root': { + display: 'flex', fontSize: iconSize } }), @@ -78,25 +79,25 @@ export const buttonsOverrides = { }, startIcon: { - marginRight: 6, + marginRight: getSpacing(0.75), '& .MuiSvgIcon-root': { fontSize: iconSize }, '&.MuiButton-iconSizeSmall': { - marginRight: 4, - marginLeft: -4 + marginRight: getSpacing(0.5), + marginLeft: getSpacing(-0.5) } }, endIcon: { - marginLeft: 6, + marginLeft: getSpacing(0.75), '& .MuiSvgIcon-root': { fontSize: iconSize }, '&.MuiButton-iconSizeSmall': { - marginLeft: 4, - marginRight: -4 + marginLeft: getSpacing(0.5), + marginRight: getSpacing(-0.5) } }, @@ -130,7 +131,7 @@ export const buttonsOverrides = { style: { color: commonPalette.text.primary, backgroundColor: commonPalette.default.main, - border: `1px solid ${commonPalette.text.primary}`, + borderColor: commonPalette.text.primary, '&.Mui-disabled': { color: commonPalette.text.disabled, @@ -211,31 +212,33 @@ export const buttonsOverrides = { borderColor: commonPalette.secondary.main } }), - '& .MuiButtonGroup-grouped:not(:last-of-type):hover, & .Mui-disabled:not(:last-of-type)': - { - borderRightColor: 'transparent' + ...(ownerState.orientation !== 'vertical' && { + '& .MuiButtonGroup-grouped:not(:last-of-type):hover, & .Mui-disabled:not(:last-of-type)': + { + borderRightColor: 'transparent' + } + }) + }), + ...(ownerState.variant === 'contained' && { + ...(ownerState.color === 'default' && { + '& .MuiButtonGroup-grouped:not(:last-of-type)': { + borderRightColor: commonPalette.default.dark } + }), + '& .MuiButtonGroup-grouped:not(:last-of-type).Mui-disabled': { + ...(ownerState.color === 'default' && { + borderColor: commonPalette.default.dark + }), + ...(ownerState.color === 'primary' && { + borderColor: commonPalette.primary.dark + }), + ...(ownerState.color === 'secondary' && { + borderColor: commonPalette.secondary.dark + }) + } }) }) - }, - variants: [ - // Custom color and its variants - { - props: { variant: 'contained', color: 'default' }, - style: { - '& .MuiButton-root': { - borderColor: commonPalette.default.main - }, - '& .MuiButtonGroup-grouped:not(:last-of-type)': { - borderColor: commonPalette.default.main, - borderRightColor: commonPalette.default.dark - }, - '& .MuiButtonGroup-grouped:hover, & .MuiButtonGroup-grouped:focus-visible': { - borderColor: commonPalette.default.dark - } - } - } - ] + } }, // Icon Button diff --git a/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js index 20e972697..a05880d04 100644 --- a/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js @@ -1,6 +1,7 @@ import React from 'react'; -import { Button, Grid, ButtonGroup } from '@mui/material'; -import { Close } from '@mui/icons-material'; +import { Grid, ButtonGroup } from '@mui/material'; +import { ArrowDropDown } from '@mui/icons-material'; +import Button from '../../../src/components/atoms/Button'; const options = { title: 'Molecules/Button Group', @@ -54,6 +55,18 @@ const options = { }; export default options; +const ButtonRow = ({ label, icon, size, disabled, variant, ...rest }) => { + return ( + + + + + + + + ); +}; + const PlaygroundTemplate = ({ label, icon, ...rest }) => ( @@ -71,35 +84,11 @@ const ButtonTemplate = ({ label, icon, ...rest }) => { const disabledLabel = label ? label : 'Disabled button'; return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + ); }; @@ -110,28 +99,10 @@ const ColorTemplate = ({ label, icon, ...rest }) => { const textLabel = label ? label : 'Text button'; return ( - - - - - - - - - - - - - - - - - - - - - - + + + + ); }; @@ -140,10 +111,10 @@ const SplitTemplate = ({ ...rest }) => { return ( - + @@ -151,29 +122,48 @@ const SplitTemplate = ({ ...rest }) => { - + - + + + + + + + + + ); +}; + +const VerticalTemplate = ({ ...rest }) => { + return ( + + + + ); }; + export const Playground = PlaygroundTemplate.bind({}); Playground.args = { label: 'Button' }; @@ -183,8 +173,8 @@ Contained.args = { variant: 'contained' }; export const Outlined = ButtonTemplate.bind({}); Outlined.args = { variant: 'outlined' }; -export const Base = ButtonTemplate.bind({}); -Base.args = { variant: 'text' }; +export const Text = ButtonTemplate.bind({}); +Text.args = { variant: 'text' }; export const Primary = ColorTemplate.bind({}); Primary.args = { color: 'primary' }; @@ -195,8 +185,8 @@ Secondary.args = { color: 'secondary' }; export const Default = ColorTemplate.bind({}); Default.args = { color: 'default' }; -export const Vertical = ButtonTemplate.bind({}); -Vertical.args = { variant: 'outlined', color: 'primary', orientation: 'vertical' }; +export const Vertical = VerticalTemplate.bind({}); +Vertical.args = { color: 'primary', orientation: 'vertical' }; export const Split = SplitTemplate.bind({}); Split.args = { variant: 'outlined', color: 'primary' }; From 183446e48c32aa45cceb9b9aa698f37791cf7e87 Mon Sep 17 00:00:00 2001 From: vmilan Date: Tue, 8 Nov 2022 18:37:04 +0100 Subject: [PATCH 42/42] clean up --- .../src/theme/sections/components/buttons.js | 71 +++++++++---------- 1 file changed, 32 insertions(+), 39 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 51304a32e..48988ab03 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -1,4 +1,3 @@ -// salto de borde y colores ok import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; import { themeTypography } from '../typography'; @@ -13,16 +12,13 @@ export const buttonsOverrides = { // Button Base MuiButtonBase: { defaultProps: { - disableRipple: true + disableRipple: true, + disableElevation: true } }, // Button MuiButton: { - defaultProps: { - disableElevation: true - }, - styleOverrides: { root: ({ ownerState }) => ({ maxWidth: '192px', @@ -40,11 +36,12 @@ export const buttonsOverrides = { background: commonPalette.error.relatedLight }) }), - ...(ownerState.color === 'secondary' && - ownerState.variant === 'contained' && { + ...(ownerState.variant === 'contained' && + ownerState.color === 'secondary' && { backgroundColor: commonPalette.secondary.light }) }, + // Pairing buttons separation '& + &': { marginLeft: getSpacing(1) }, @@ -177,13 +174,12 @@ export const buttonsOverrides = { // Mui Button Group MuiButtonGroup: { defaultProps: { - disableRipple: true + disableRipple: true, + disableElevation: true }, styleOverrides: { root: ({ ownerState }) => ({ - boxShadow: themeShadows[0], - '& .MuiButton-root + .MuiButton-root': { marginLeft: 0 }, @@ -222,20 +218,21 @@ export const buttonsOverrides = { ...(ownerState.variant === 'contained' && { ...(ownerState.color === 'default' && { '& .MuiButtonGroup-grouped:not(:last-of-type)': { - borderRightColor: commonPalette.default.dark + borderRightColor: commonPalette.default.dark, + + '&.Mui-disabled': { + ...(ownerState.color === 'default' && { + borderColor: commonPalette.default.dark + }), + ...(ownerState.color === 'primary' && { + borderColor: commonPalette.primary.dark + }), + ...(ownerState.color === 'secondary' && { + borderColor: commonPalette.secondary.dark + }) + } } - }), - '& .MuiButtonGroup-grouped:not(:last-of-type).Mui-disabled': { - ...(ownerState.color === 'default' && { - borderColor: commonPalette.default.dark - }), - ...(ownerState.color === 'primary' && { - borderColor: commonPalette.primary.dark - }), - ...(ownerState.color === 'secondary' && { - borderColor: commonPalette.secondary.dark - }) - } + }) }) }) } @@ -247,27 +244,23 @@ export const buttonsOverrides = { root: ({ ownerState }) => ({ borderRadius: getSpacing(0.5), + ...(ownerState.color === 'default' && { + color: commonPalette.text.secondary + }), '& .MuiSvgIcon-root': { fontSize: iconSize }, - - ...(ownerState.color === 'default' && { - color: commonPalette.text.secondary, - - '&:hover, &:focus-visible': { + '&:hover, &:focus-visible': { + ...(ownerState.color === 'default' && { backgroundColor: commonPalette.action.hover - } - }), - ...(ownerState.color === 'primary' && { - '&:hover, &:focus-visible': { + }), + ...(ownerState.color === 'primary' && { backgroundColor: commonPalette.primary.background - } - }), - ...(ownerState.color === 'secondary' && { - '&:hover, &:focus-visible': { + }), + ...(ownerState.color === 'secondary' && { backgroundColor: commonPalette.secondary.background - } - }) + }) + } }), sizeSmall: {