diff --git a/guidelines.md b/guidelines.md index 15592a173..ee8d28586 100644 --- a/guidelines.md +++ b/guidelines.md @@ -154,16 +154,16 @@ To help with this, there's a `build` helper function in the `ui-lib` repo [here] If your component(s) require a lot of CSS, create a separate `styles` file to keep things minimal. Example file [here](/src/data/listing/styles.js). -For utilizing styles, use `makeStyles` from `@material-ui/core` as a hook. Here's a small example of using `makeStyles`: +For utilizing styles, use `makeStyles` from `tss-react/mui"` as a hook. Here's a small example of using `makeStyles`: ``` -import { makeStyles } from "@material-ui/core"; +import { makeStyles } from "tss-react/mui""; import myStylesFile from "./styles"; -const useStyles = makeStyles(myStylesFile); +const useStyles = makeStyles()(myStylesFile); function myComponent(props) { - const classes = useStyles(); + const { classes } = useStyles(); return (
diff --git a/package-lock.json b/package-lock.json index 58771745e..b07ac7d0b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,11 +16,11 @@ "@codemirror/view": "^6.7.2", "@date-fns/upgrade": "^1.0.3", "@emotion/react": "^11.11.1", + "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.9", "@mui/lab": "^5.0.0-alpha.152", "@mui/material": "^5.14.9", - "@mui/styles": "^5.14.9", "@next/bundle-analyzer": "^12.3.4", "@opentelemetry/api": "^1.0.4", "@opentelemetry/exporter-jaeger": "^1.0.1", @@ -37,8 +37,6 @@ "camelcase": "^5.3.1", "chart.js": "^3.6.0", "chartjs-plugin-datalabels": "^2.0.0", - "classnames": "^2.2.6", - "clsx": "^1.1.0", "codemirror": "^6.0.1", "compression": "^1.7.4", "config": "^3.3.1", @@ -2391,6 +2389,25 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" }, + "node_modules/@emotion/server": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/server/-/server-11.11.0.tgz", + "integrity": "sha512-6q89fj2z8VBTx9w93kJ5n51hsmtYuFPtZgnc1L8VzRx9ti4EU6EyvF6Nn1H1x3vcCQCF7u2dB2lY4AYJwUW4PA==", + "dependencies": { + "@emotion/utils": "^1.2.1", + "html-tokenize": "^2.0.0", + "multipipe": "^1.0.2", + "through": "^2.3.8" + }, + "peerDependencies": { + "@emotion/css": "^11.0.0-rc.0" + }, + "peerDependenciesMeta": { + "@emotion/css": { + "optional": true + } + } + }, "node_modules/@emotion/sheet": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", @@ -3741,59 +3758,6 @@ } } }, - "node_modules/@mui/styles": { - "version": "5.14.9", - "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.14.9.tgz", - "integrity": "sha512-pd308euoTj6t5bMnIS/FKNoPTzbZMk238FHnWfDIl0KLGw95Xrc6JPNCmrwfP1jCm++xXqcbSL11JGPf2OeQXA==", - "dependencies": { - "@babel/runtime": "^7.22.15", - "@emotion/hash": "^0.9.1", - "@mui/private-theming": "^5.14.9", - "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.9", - "clsx": "^2.0.0", - "csstype": "^3.1.2", - "hoist-non-react-statics": "^3.3.2", - "jss": "^10.10.0", - "jss-plugin-camel-case": "^10.10.0", - "jss-plugin-default-unit": "^10.10.0", - "jss-plugin-global": "^10.10.0", - "jss-plugin-nested": "^10.10.0", - "jss-plugin-props-sort": "^10.10.0", - "jss-plugin-rule-value-function": "^10.10.0", - "jss-plugin-vendor-prefixer": "^10.10.0", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/styles/node_modules/@emotion/hash": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", - "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" - }, - "node_modules/@mui/styles/node_modules/clsx": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", - "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", - "engines": { - "node": ">=6" - } - }, "node_modules/@mui/system": { "version": "5.14.17", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.17.tgz", @@ -13724,11 +13688,6 @@ "node": ">=0.10.0" } }, - "node_modules/classnames": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", - "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" - }, "node_modules/clean-css": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", @@ -13918,14 +13877,6 @@ "node": ">=0.10.0" } }, - "node_modules/clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "engines": { - "node": ">=6" - } - }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -14943,15 +14894,6 @@ "url": "https://github.com/sponsors/fb55" } }, - "node_modules/css-vendor": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", - "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", - "dependencies": { - "@babel/runtime": "^7.8.3", - "is-in-browser": "^1.0.2" - } - }, "node_modules/css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -15522,6 +15464,46 @@ "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==" }, + "node_modules/duplexer2": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz", + "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==", + "dependencies": { + "readable-stream": "^2.0.2" + } + }, + "node_modules/duplexer2/node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==" + }, + "node_modules/duplexer2/node_modules/readable-stream": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", + "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/duplexer2/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, + "node_modules/duplexer2/node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, "node_modules/duplexify": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz", @@ -18715,6 +18697,67 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/html-tokenize": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.1.tgz", + "integrity": "sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==", + "dependencies": { + "buffer-from": "~0.1.1", + "inherits": "~2.0.1", + "minimist": "~1.2.5", + "readable-stream": "~1.0.27-1", + "through2": "~0.4.1" + }, + "bin": { + "html-tokenize": "bin/cmd.js" + } + }, + "node_modules/html-tokenize/node_modules/buffer-from": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz", + "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==" + }, + "node_modules/html-tokenize/node_modules/isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" + }, + "node_modules/html-tokenize/node_modules/object-keys": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz", + "integrity": "sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==" + }, + "node_modules/html-tokenize/node_modules/readable-stream": { + "version": "1.0.34", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", + "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "node_modules/html-tokenize/node_modules/through2": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz", + "integrity": "sha512-45Llu+EwHKtAZYTPPVn3XZHBgakWMN3rokhEv5hu596XP+cNgplMg+Gj+1nmAvj+L0K7+N49zBKx5rah5u0QIQ==", + "dependencies": { + "readable-stream": "~1.0.17", + "xtend": "~2.1.1" + } + }, + "node_modules/html-tokenize/node_modules/xtend": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz", + "integrity": "sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==", + "dependencies": { + "object-keys": "~0.4.0" + }, + "engines": { + "node": ">=0.4" + } + }, "node_modules/html-void-elements": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz", @@ -18984,11 +19027,6 @@ "node": ">=8" } }, - "node_modules/hyphenate-style-name": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", - "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" - }, "node_modules/i18next": { "version": "22.4.9", "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.9.tgz", @@ -19733,11 +19771,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/is-in-browser": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", - "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==" - }, "node_modules/is-lambda": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz", @@ -22207,88 +22240,6 @@ "verror": "1.10.0" } }, - "node_modules/jss": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz", - "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==", - "dependencies": { - "@babel/runtime": "^7.3.1", - "csstype": "^3.0.2", - "is-in-browser": "^1.1.3", - "tiny-warning": "^1.0.2" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/jss" - } - }, - "node_modules/jss-plugin-camel-case": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz", - "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==", - "dependencies": { - "@babel/runtime": "^7.3.1", - "hyphenate-style-name": "^1.0.3", - "jss": "10.10.0" - } - }, - "node_modules/jss-plugin-default-unit": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz", - "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==", - "dependencies": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0" - } - }, - "node_modules/jss-plugin-global": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz", - "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==", - "dependencies": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0" - } - }, - "node_modules/jss-plugin-nested": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz", - "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==", - "dependencies": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0", - "tiny-warning": "^1.0.2" - } - }, - "node_modules/jss-plugin-props-sort": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz", - "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==", - "dependencies": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0" - } - }, - "node_modules/jss-plugin-rule-value-function": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz", - "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==", - "dependencies": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0", - "tiny-warning": "^1.0.2" - } - }, - "node_modules/jss-plugin-vendor-prefixer": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz", - "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==", - "dependencies": { - "@babel/runtime": "^7.3.1", - "css-vendor": "^2.0.8", - "jss": "10.10.0" - } - }, "node_modules/jsx-ast-utils": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz", @@ -24097,6 +24048,15 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, + "node_modules/multipipe": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-1.0.2.tgz", + "integrity": "sha512-6uiC9OvY71vzSGX8lZvSqscE7ft9nPupJ8fMjrCNRAUy2LREUW42UL+V/NTrogr6rFgRydUrCX4ZitfpSNkSCQ==", + "dependencies": { + "duplexer2": "^0.1.2", + "object-assign": "^4.1.0" + } + }, "node_modules/murmurhash3js": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/murmurhash3js/-/murmurhash3js-3.0.1.tgz", @@ -26150,8 +26110,7 @@ "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", - "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", - "dev": true + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" }, "node_modules/progress": { "version": "2.0.3", @@ -30245,8 +30204,7 @@ "node_modules/through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", - "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==", - "dev": true + "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==" }, "node_modules/through2": { "version": "2.0.5", @@ -34458,6 +34416,17 @@ } } }, + "@emotion/server": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/server/-/server-11.11.0.tgz", + "integrity": "sha512-6q89fj2z8VBTx9w93kJ5n51hsmtYuFPtZgnc1L8VzRx9ti4EU6EyvF6Nn1H1x3vcCQCF7u2dB2lY4AYJwUW4PA==", + "requires": { + "@emotion/utils": "^1.2.1", + "html-tokenize": "^2.0.0", + "multipipe": "^1.0.2", + "through": "^2.3.8" + } + }, "@emotion/sheet": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", @@ -35441,42 +35410,6 @@ "prop-types": "^15.8.1" } }, - "@mui/styles": { - "version": "5.14.9", - "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.14.9.tgz", - "integrity": "sha512-pd308euoTj6t5bMnIS/FKNoPTzbZMk238FHnWfDIl0KLGw95Xrc6JPNCmrwfP1jCm++xXqcbSL11JGPf2OeQXA==", - "requires": { - "@babel/runtime": "^7.22.15", - "@emotion/hash": "^0.9.1", - "@mui/private-theming": "^5.14.9", - "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.9", - "clsx": "^2.0.0", - "csstype": "^3.1.2", - "hoist-non-react-statics": "^3.3.2", - "jss": "^10.10.0", - "jss-plugin-camel-case": "^10.10.0", - "jss-plugin-default-unit": "^10.10.0", - "jss-plugin-global": "^10.10.0", - "jss-plugin-nested": "^10.10.0", - "jss-plugin-props-sort": "^10.10.0", - "jss-plugin-rule-value-function": "^10.10.0", - "jss-plugin-vendor-prefixer": "^10.10.0", - "prop-types": "^15.8.1" - }, - "dependencies": { - "@emotion/hash": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", - "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" - }, - "clsx": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", - "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==" - } - } - }, "@mui/system": { "version": "5.14.17", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.17.tgz", @@ -43069,11 +43002,6 @@ } } }, - "classnames": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", - "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" - }, "clean-css": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz", @@ -43214,11 +43142,6 @@ } } }, - "clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" - }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -44069,15 +43992,6 @@ "nth-check": "^2.0.1" } }, - "css-vendor": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", - "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", - "requires": { - "@babel/runtime": "^7.8.3", - "is-in-browser": "^1.0.2" - } - }, "css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -44514,6 +44428,48 @@ "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==" }, + "duplexer2": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz", + "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==", + "requires": { + "readable-stream": "^2.0.2" + }, + "dependencies": { + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==" + }, + "readable-stream": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", + "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "requires": { + "safe-buffer": "~5.1.0" + } + } + } + }, "duplexify": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz", @@ -47038,6 +46994,63 @@ "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==", "dev": true }, + "html-tokenize": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.1.tgz", + "integrity": "sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==", + "requires": { + "buffer-from": "~0.1.1", + "inherits": "~2.0.1", + "minimist": "~1.2.5", + "readable-stream": "~1.0.27-1", + "through2": "~0.4.1" + }, + "dependencies": { + "buffer-from": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz", + "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==" + }, + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" + }, + "object-keys": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz", + "integrity": "sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==" + }, + "readable-stream": { + "version": "1.0.34", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", + "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==", + "requires": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "through2": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz", + "integrity": "sha512-45Llu+EwHKtAZYTPPVn3XZHBgakWMN3rokhEv5hu596XP+cNgplMg+Gj+1nmAvj+L0K7+N49zBKx5rah5u0QIQ==", + "requires": { + "readable-stream": "~1.0.17", + "xtend": "~2.1.1" + } + }, + "xtend": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz", + "integrity": "sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==", + "requires": { + "object-keys": "~0.4.0" + } + } + } + }, "html-void-elements": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz", @@ -47237,11 +47250,6 @@ } } }, - "hyphenate-style-name": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", - "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" - }, "i18next": { "version": "22.4.9", "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.9.tgz", @@ -47759,11 +47767,6 @@ "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", "dev": true }, - "is-in-browser": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", - "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==" - }, "is-lambda": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz", @@ -49601,84 +49604,6 @@ "verror": "1.10.0" } }, - "jss": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz", - "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==", - "requires": { - "@babel/runtime": "^7.3.1", - "csstype": "^3.0.2", - "is-in-browser": "^1.1.3", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-camel-case": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz", - "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==", - "requires": { - "@babel/runtime": "^7.3.1", - "hyphenate-style-name": "^1.0.3", - "jss": "10.10.0" - } - }, - "jss-plugin-default-unit": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz", - "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0" - } - }, - "jss-plugin-global": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz", - "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0" - } - }, - "jss-plugin-nested": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz", - "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-props-sort": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz", - "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0" - } - }, - "jss-plugin-rule-value-function": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz", - "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==", - "requires": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0", - "tiny-warning": "^1.0.2" - } - }, - "jss-plugin-vendor-prefixer": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz", - "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==", - "requires": { - "@babel/runtime": "^7.3.1", - "css-vendor": "^2.0.8", - "jss": "10.10.0" - } - }, "jsx-ast-utils": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz", @@ -51104,6 +51029,15 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, + "multipipe": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-1.0.2.tgz", + "integrity": "sha512-6uiC9OvY71vzSGX8lZvSqscE7ft9nPupJ8fMjrCNRAUy2LREUW42UL+V/NTrogr6rFgRydUrCX4ZitfpSNkSCQ==", + "requires": { + "duplexer2": "^0.1.2", + "object-assign": "^4.1.0" + } + }, "murmurhash3js": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/murmurhash3js/-/murmurhash3js-3.0.1.tgz", @@ -52672,8 +52606,7 @@ "process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", - "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", - "dev": true + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" }, "progress": { "version": "2.0.3", @@ -55879,8 +55812,7 @@ "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", - "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==", - "dev": true + "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==" }, "through2": { "version": "2.0.5", diff --git a/package.json b/package.json index 97df122cf..f5d4d7bd1 100644 --- a/package.json +++ b/package.json @@ -60,11 +60,11 @@ "@codemirror/view": "^6.7.2", "@date-fns/upgrade": "^1.0.3", "@emotion/react": "^11.11.1", + "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.9", "@mui/lab": "^5.0.0-alpha.152", "@mui/material": "^5.14.9", - "@mui/styles": "^5.14.9", "@next/bundle-analyzer": "^12.3.4", "@opentelemetry/api": "^1.0.4", "@opentelemetry/exporter-jaeger": "^1.0.1", @@ -81,8 +81,6 @@ "camelcase": "^5.3.1", "chart.js": "^3.6.0", "chartjs-plugin-datalabels": "^2.0.0", - "classnames": "^2.2.6", - "clsx": "^1.1.0", "codemirror": "^6.0.1", "compression": "^1.7.4", "config": "^3.3.1", diff --git a/src/components/dashboard/DashboardSection.js b/src/components/dashboard/DashboardSection.js index 384fb3dd2..b4a041489 100644 --- a/src/components/dashboard/DashboardSection.js +++ b/src/components/dashboard/DashboardSection.js @@ -1,5 +1,4 @@ import React, { useState } from "react"; -import clsx from "clsx"; import { Typography, Collapse, Button, Divider } from "@mui/material"; @@ -29,7 +28,7 @@ const DashboardSection = ({ setTerminateAnalysis, computeLimitExceeded, }) => { - const classes = useStyles(); + const { classes, cx } = useStyles(); const [expanded, setExpanded] = useState(false); const isNewsSection = section === constants.SECTION_NEWS; @@ -64,7 +63,7 @@ const DashboardSection = ({ return (
{ const DashboardItem = ({ item }) => { const theme = useTheme(); const color = getSectionColor(item.section, theme); - const classes = useStyles({ + const { classes } = useStyles({ width: item.width, height: item.height, color, @@ -157,7 +157,10 @@ const DashboardItem = ({ item }) => { }; export const DashboardFeedItem = ({ item }) => { - const classes = useStyles({ width: item.width, height: item.height }); + const { classes, cx } = useStyles({ + width: item.width, + height: item.height, + }); const { t } = useTranslation(["dashboard", "apps"]); const [origination, date] = item.getOrigination(t); @@ -166,7 +169,7 @@ export const DashboardFeedItem = ({ item }) => { return (
{ }; export const DashboardVideoItem = ({ item }) => { - const classes = useStyles(item); + const { classes } = useStyles(item); return (
({ +export default makeStyles()((theme, props) => ({ tripleDotMenu: { marginLeft: "auto", }, avatar: { - background: (props) => props.color, + background: props?.color, height: theme.spacing(3), width: theme.spacing(3), }, @@ -13,8 +13,8 @@ export default makeStyles()((theme) => ({ background: theme.palette.white, }, avatarIcon: { - color: (props) => theme.palette.white, - backgroundColor: (props) => props.color, + color: theme.palette.white, + backgroundColor: props?.color, height: theme.spacing(2), width: theme.spacing(2), }, @@ -29,8 +29,8 @@ export default makeStyles()((theme) => ({ flexDirection: "column", marginTop: theme.spacing(2), - width: (props) => props.width, - height: (props) => props.height, + width: props?.width, + height: props?.height, [theme.breakpoints.up("xs")]: { marginRight: theme.spacing(0), @@ -45,8 +45,8 @@ export default makeStyles()((theme) => ({ }, }, dashboardVideo: { - width: (props) => props.width, - height: (props) => props.height, + width: props?.width, + height: props?.height, float: "none", clear: "both", marginRight: theme.spacing(2), diff --git a/src/components/dashboard/index.js b/src/components/dashboard/index.js index 7f2836902..992cb2391 100644 --- a/src/components/dashboard/index.js +++ b/src/components/dashboard/index.js @@ -7,7 +7,6 @@ */ import React, { useRef, useState } from "react"; import dynamic from "next/dynamic"; -import clsx from "clsx"; import { useQueryClient, useQuery, useMutation } from "react-query"; import { useTranslation } from "i18n"; @@ -69,7 +68,7 @@ const PendingTerminationDlg = dynamic(() => ); const DashboardSkeleton = () => { - const classes = useStyles(); + const { classes, cx } = useStyles(); const [userProfile] = useUserProfile(); let skellyTypes = [classes.sectionNews, classes.sectionEvents, "", ""]; @@ -87,7 +86,7 @@ const DashboardSkeleton = () => { } const skellies = skellyTypes.map((extraClass, index) => ( -
+
{ const Dashboard = (props) => { const { showErrorAnnouncer } = props; - const classes = useStyles(); + const { classes } = useStyles(); const { t } = useTranslation(["dashboard", "common"]); const { t: i18nPref } = useTranslation("preferences"); const { t: i18nIntro } = useTranslation("intro"); diff --git a/src/components/layout/DrawerItem.js b/src/components/layout/DrawerItem.js index fcee189e4..a8d925b42 100644 --- a/src/components/layout/DrawerItem.js +++ b/src/components/layout/DrawerItem.js @@ -22,7 +22,7 @@ const DrawerItem = (props) => { activeView, thisView, toggleDrawer, - clsxBase, + cxBase, open, onClick, nested = false, @@ -47,9 +47,7 @@ const DrawerItem = (props) => { )} { - const { isMobile, handleClose, href, onClick } = props; - const { t } = useTranslation("common"); - const buttonId = buildID( - ids.BASE_DEBUG_ID, - ids.NOTIFICATIONS_MENU, - ids.VIEW_ALL_NOTIFICATIONS - ); +const NotificationsListingButton = React.forwardRef((props, ref) => { + const { isMobile, handleClose, href, onClick } = props; + const { t } = useTranslation("common"); + const buttonId = buildID( + ids.BASE_DEBUG_ID, + ids.NOTIFICATIONS_MENU, + ids.VIEW_ALL_NOTIFICATIONS + ); + + const { classes } = useStyles(); - return isMobile ? ( - { - onClick(event); - handleClose(); - }} - size="large" - > - - - ) : ( - - ); - } -); + return isMobile ? ( + { + onClick(event); + handleClose(); + }} + size="large" + > + + + ) : ( + + ); +}); function NotificationsListingLink(props) { const href = `/${NavigationConstants.NOTIFICATIONS}`; @@ -88,7 +88,7 @@ function NotificationsTab(props) { errorObject, } = props; - const { classes } = useStyles(); + const { classes, cx } = useStyles(); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down("sm")); const { t } = useTranslation("common"); diff --git a/src/components/vice/admin/filter/index.js b/src/components/vice/admin/filter/index.js index 0130640ec..cee222bfd 100644 --- a/src/components/vice/admin/filter/index.js +++ b/src/components/vice/admin/filter/index.js @@ -1,8 +1,6 @@ import React, { useState } from "react"; import { useTranslation } from "i18n"; -import classnames from "classnames"; - import { Card, CardActions, @@ -29,7 +27,7 @@ import { const FilterChip = ({ label, handleDelete }) => { const [deleted, setDeleted] = useState(false); - const classes = useStyles(); + const { classes } = useStyles(); const fixedLabel = label.startsWith("$.") ? label.slice(2) : label; @@ -53,7 +51,7 @@ const FilterChip = ({ label, handleDelete }) => { }; const AnalysesFilter = ({ filters, addToFilters, deleteFromFilters }) => { - const classes = useStyles(); + const { classes, cx } = useStyles(); const { t } = useTranslation("vice-admin"); const [isExpanded, setIsExpanded] = useState(false); @@ -84,7 +82,7 @@ const AnalysesFilter = ({ filters, addToFilters, deleteFromFilters }) => { setIsExpanded(!isExpanded)} diff --git a/src/components/vice/admin/filter/sections.js b/src/components/vice/admin/filter/sections.js index 6df3e17de..3858d1f16 100644 --- a/src/components/vice/admin/filter/sections.js +++ b/src/components/vice/admin/filter/sections.js @@ -24,7 +24,7 @@ const FilterSection = ({ kind, addToFilters, }) => { - const classes = useStyles(); + const { classes } = useStyles(); const { t } = useTranslation("vice-admin"); const [field, setField] = useState(""); const [value, setValue] = useState(""); diff --git a/src/components/vice/admin/filter/selects.js b/src/components/vice/admin/filter/selects.js index b77a5d36a..f4bf2efeb 100644 --- a/src/components/vice/admin/filter/selects.js +++ b/src/components/vice/admin/filter/selects.js @@ -13,7 +13,7 @@ export const FieldSelect = ({ value, handleChange, }) => { - const classes = useStyles(); + const { classes } = useStyles(); const { t } = useTranslation("vice-admin"); const inputLabelID = `${kind}-field-select-label`; return ( diff --git a/src/components/vice/admin/table/actionButtons.js b/src/components/vice/admin/table/actionButtons.js index e1c7963ca..ee3cf4b8c 100644 --- a/src/components/vice/admin/table/actionButtons.js +++ b/src/components/vice/admin/table/actionButtons.js @@ -25,7 +25,7 @@ const ActionButtonsSkeleton = () => { }; const ActionButton = ({ externalID, name, handler, onClick, popperMsgKey }) => { - const classes = useStyles(); + const { classes } = useStyles(); const { t } = useTranslation("vice-admin"); return ( @@ -53,7 +53,7 @@ const ActionButtons = ({ handleExit = (_) => {}, handleSaveAndExit = (_) => {}, }) => { - const classes = useStyles(); + const { classes } = useStyles(); const { t } = useTranslation("vice-admin"); const externalID = row.original.externalID; diff --git a/src/components/vice/admin/table/index.js b/src/components/vice/admin/table/index.js index cc0ef04f0..9efc0b952 100644 --- a/src/components/vice/admin/table/index.js +++ b/src/components/vice/admin/table/index.js @@ -39,7 +39,7 @@ const ExtendedDataCard = ({ handleUploadOutputs, handleDownloadInputs, }) => { - const classes = useStyles(); + const { classes } = useStyles(); // These should be the column IDs of the columns displayed in the // ExtendedDataCard, which currently corresponds to the hidden columns. @@ -97,7 +97,7 @@ const CollapsibleTableRow = ({ handleDownloadInputs, isMobile = false, }) => { - const classes = useStyles(); + const { classes } = useStyles(); const rowID = id(baseID, "row"); const collapseID = id(rowID, "collapse"); @@ -214,7 +214,7 @@ const CollapsibleTable = ({ handleDownloadInputs, handleUploadOutputs, }) => { - const classes = useStyles(); + const { classes } = useStyles(); const theme = useTheme(); const isXL = useMediaQuery(theme.breakpoints.up("xl")); diff --git a/src/components/vice/admin/tabs/index.js b/src/components/vice/admin/tabs/index.js index 738b29153..55895af42 100644 --- a/src/components/vice/admin/tabs/index.js +++ b/src/components/vice/admin/tabs/index.js @@ -9,7 +9,7 @@ import { AppBar, Tab } from "@mui/material"; import { TabContext, TabList, TabPanel } from "@mui/lab"; import { makeStyles } from "tss-react/mui"; -import { useTheme } from "@mui/styles"; +import { useTheme } from "@mui/material"; import buildID from "components/utils/DebugIDUtil"; diff --git a/src/pages/_app.js b/src/pages/_app.js index f13d78964..4976f343c 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -37,6 +37,7 @@ import { QueryClient, QueryClientProvider } from "react-query"; import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles"; import CssBaseline from "@mui/material/CssBaseline"; +import { createEmotionSsrAdvancedApproach } from "tss-react/next/pagesDir"; const setupIntercom = (intercomAppId) => { window.intercomSettings = { @@ -306,4 +307,9 @@ function MyApp({ Component, pageProps }) { ); } -export default appWithTranslation(MyApp); +const { augmentDocumentWithEmotionCache, withAppEmotionCache } = + createEmotionSsrAdvancedApproach({ key: "css" }); + +export { augmentDocumentWithEmotionCache }; + +export default appWithTranslation(withAppEmotionCache(MyApp)); diff --git a/src/pages/_document.js b/src/pages/_document.js index ccb089793..0b7b5ced7 100644 --- a/src/pages/_document.js +++ b/src/pages/_document.js @@ -1,10 +1,10 @@ import React from "react"; import getConfig from "next/config"; import Document, { Html, Head, Main, NextScript } from "next/document"; -import ServerStyleSheets from "@mui/styles/ServerStyleSheets"; +import { augmentDocumentWithEmotionCache } from "./_app"; import theme from "../components/theme/default"; -export default class MyDocument extends Document { +class MyDocument extends Document { render() { const { publicRuntimeConfig = {} } = getConfig() || {}; const analyticsEnabled = publicRuntimeConfig.ANALYTICS_ENABLED; @@ -57,46 +57,6 @@ export default class MyDocument extends Document { } } -MyDocument.getInitialProps = async (ctx) => { - // Resolution order - // - // On the server: - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. document.getInitialProps - // 4. app.render - // 5. page.render - // 6. document.render - // - // On the server with error: - // 1. document.getInitialProps - // 2. app.render - // 3. page.render - // 4. document.render - // - // On the client - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. app.render - // 4. page.render +augmentDocumentWithEmotionCache(MyDocument); - // Render app and page and get the context of the page with collected side effects. - const sheets = new ServerStyleSheets(); - const originalRenderPage = ctx.renderPage; - - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: (App) => (props) => sheets.collect(), - }); - - const initialProps = await Document.getInitialProps(ctx); - - return { - ...initialProps, - // Styles fragment is rendered after the app and page rendering finish. - styles: [ - ...React.Children.toArray(initialProps.styles), - sheets.getStyleElement(), - ], - }; -}; +export default MyDocument; diff --git a/src/pages/admin/vice.js b/src/pages/admin/vice.js index 87182d0e3..1e7c23f8e 100644 --- a/src/pages/admin/vice.js +++ b/src/pages/admin/vice.js @@ -9,7 +9,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { useQuery } from "react-query"; -import { makeStyles } from "@mui/styles"; +import { makeStyles } from "tss-react/mui"; import WrappedErrorHandler from "components/error/WrappedErrorHandler"; @@ -43,7 +43,7 @@ const TABS = { }; const VICEAdminSkeleton = () => { - const classes = useStyles(); + const { classes } = useStyles(); return ( <> { ); }; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles()((theme) => ({ root: { paddingLeft: theme.spacing(3), paddingRight: theme.spacing(3), @@ -87,7 +87,7 @@ const useStyles = makeStyles((theme) => ({ })); export const VICEAdmin = () => { - const classes = useStyles(); + const { classes } = useStyles(); const [selectedTab, setSelectedTab] = useState(TABS.quotaRequests); const { t } = useTranslation("vice-admin");