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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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/31] 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 d0103e8aa3622955f67e02e6fc5511479d476452 Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 31 Oct 2022 16:52:31 +0100 Subject: [PATCH 23/31] button: Remove span and label --- UPGRADE.md | 2 +- packages/react-ui/src/widgets/BarWidgetUI.js | 4 ---- packages/react-ui/src/widgets/CategoryWidgetUI.js | 4 ---- .../src/widgets/HistogramWidgetUI/HistogramWidgetUI.js | 4 ---- packages/react-ui/src/widgets/WrapperWidgetUI.js | 7 ++----- packages/react-ui/src/widgets/legend/LegendWidgetUI.js | 5 +---- packages/react-ui/src/widgets/legend/LegendWrapper.js | 7 ++----- 7 files changed, 6 insertions(+), 27 deletions(-) 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/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..c2dfaab23 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -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/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index c1f309626..5eba03158 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -63,12 +63,9 @@ const useStyles = makeStyles((theme) => ({ 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' From 3c325e8d432e49d77ecc46a5de2e5eeb7861b08b Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 31 Oct 2022 16:57:28 +0100 Subject: [PATCH 24/31] checkbox: Set to primary by default --- packages/react-ui/src/theme/sections/components/forms.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index f92f21517..7b2c63cac 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -238,8 +238,7 @@ export const formsOverrides = { // Checkbox MuiCheckbox: { defaultProps: { - size: 'small', - color: 'primary' + size: 'small' }, styleOverrides: { root: { From 7bb4ec8f38a42de6edfc0eddb6be56ed4b5bf794 Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 31 Oct 2022 17:01:29 +0100 Subject: [PATCH 25/31] CssBaseline: Update styled-engine --- .../src/theme/sections/cssBaseline.js | 134 +++++++++--------- 1 file changed, 66 insertions(+), 68 deletions(-) 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 } } } From ff7e4d7d408aa4857feeb4b190ea6839c0645f32 Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 31 Oct 2022 17:05:03 +0100 Subject: [PATCH 26/31] Divider: Replace background-color with border-color --- .../react-ui/src/theme/sections/components/dataDisplay.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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] } } }, From 85978531428c9ead899661e955cbf761ea5f844c Mon Sep 17 00:00:00 2001 From: vmilan Date: Mon, 31 Oct 2022 18:30:22 +0100 Subject: [PATCH 27/31] small changes --- packages/react-ui/src/theme/sections/components/forms.js | 4 +--- packages/react-ui/src/widgets/CategoryWidgetUI.js | 2 +- packages/react-ui/storybook/stories/common/Paper.stories.js | 6 ++++++ .../react-ui/storybook/stories/common/Slider.stories.js | 6 ++++-- 4 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 7b2c63cac..875dd36b2 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' @@ -262,8 +261,7 @@ export const formsOverrides = { // Radio Button MuiRadio: { defaultProps: { - size: 'small', - color: 'primary' + size: 'small' }, styleOverrides: { root: { diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index c2dfaab23..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 } }, 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/Slider.stories.js b/packages/react-ui/storybook/stories/common/Slider.stories.js index fec2d1587..e99074561 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/common/Slider.stories.js @@ -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 ( ); From acf672bda899f497ac02bc8eda2d370f6ebc5e64 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 2 Nov 2022 11:17:59 +0100 Subject: [PATCH 28/31] Switch: Update default color prop --- packages/react-ui/src/theme/sections/components/forms.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js index 875dd36b2..c5f6aa795 100644 --- a/packages/react-ui/src/theme/sections/components/forms.js +++ b/packages/react-ui/src/theme/sections/components/forms.js @@ -284,9 +284,6 @@ export const formsOverrides = { // Switch MuiSwitch: { - defaultProps: { - color: 'primary' - }, styleOverrides: { root: { height: getSpacing(4.5), From 43029ba219d4d615df218f3d5b3f87475f0672b4 Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 2 Nov 2022 11:56:39 +0100 Subject: [PATCH 29/31] Table and Tabs --- packages/react-ui/src/theme/sections/components/navigation.js | 4 ++-- packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) 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/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 && ( Date: Wed, 2 Nov 2022 12:02:37 +0100 Subject: [PATCH 30/31] TextField: Rename marginDense and inputMarginDense classes --- packages/react-ui/src/widgets/OpacityControl.js | 2 +- packages/react-ui/src/widgets/RangeWidgetUI.js | 4 ++-- packages/react-ui/storybook/stories/common/Slider.stories.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) 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/storybook/stories/common/Slider.stories.js b/packages/react-ui/storybook/stories/common/Slider.stories.js index e99074561..350d1c80c 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/common/Slider.stories.js @@ -185,7 +185,7 @@ const SliderWithInputTemplate = ({ ...args }) => { value={value} onChange={handleInputChange} onBlur={handleBlur} - margin='dense' + size='small' inputProps={{ step: 10, min: 0, From 2388e671364739eb4a955889db3f80c88131048b Mon Sep 17 00:00:00 2001 From: vmilan Date: Wed, 2 Nov 2022 13:10:29 +0100 Subject: [PATCH 31/31] changelog note --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b81ee0a4..410554f95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## 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/)