diff --git a/next.config.js b/next.config.js index 5c0010786..230c75536 100644 --- a/next.config.js +++ b/next.config.js @@ -6,6 +6,11 @@ const withWorkbox = require('@ente-io/next-with-workbox'); const { withSentryConfig } = require('@sentry/nextjs'); const { PHASE_DEVELOPMENT_SERVER } = require('next/constants'); +const withTM = require('next-transpile-modules')([ + '@mui/material', + '@mui/system', +]); + const { getGitSha, convertToNextHeaderFormat, @@ -25,37 +30,40 @@ const IS_SENTRY_ENABLED = getIsSentryEnabled(); module.exports = (phase) => withSentryConfig( withWorkbox( - withBundleAnalyzer({ - env: { - SENTRY_RELEASE: GIT_SHA, - NEXT_PUBLIC_LATEST_COMMIT_HASH: GIT_SHA, - }, - workbox: WORKBOX_CONFIG, + withBundleAnalyzer( + withTM({ + env: { + SENTRY_RELEASE: GIT_SHA, + NEXT_PUBLIC_LATEST_COMMIT_HASH: GIT_SHA, + }, + workbox: WORKBOX_CONFIG, - headers() { - return [ - { - // Apply these headers to all routes in your application.... - source: ALL_ROUTES, - headers: convertToNextHeaderFormat({ - ...COOP_COEP_HEADERS, - ...WEB_SECURITY_HEADERS, - ...buildCSPHeader(CSP_DIRECTIVES), - }), - }, - ]; - }, - // https://dev.to/marcinwosinek/how-to-add-resolve-fallback-to-webpack-5-in-nextjs-10-i6j - webpack: (config, { isServer }) => { - if (!isServer) { - config.resolve.fallback.fs = false; - } - return config; - }, - }) - ), - { - release: GIT_SHA, - dryRun: phase === PHASE_DEVELOPMENT_SERVER || !IS_SENTRY_ENABLED, - } + headers() { + return [ + { + // Apply these headers to all routes in your application.... + source: ALL_ROUTES, + headers: convertToNextHeaderFormat({ + ...COOP_COEP_HEADERS, + ...WEB_SECURITY_HEADERS, + ...buildCSPHeader(CSP_DIRECTIVES), + }), + }, + ]; + }, + // https://dev.to/marcinwosinek/how-to-add-resolve-fallback-to-webpack-5-in-nextjs-10-i6j + webpack: (config, { isServer }) => { + if (!isServer) { + config.resolve.fallback.fs = false; + } + return config; + }, + }) + ), + { + release: GIT_SHA, + dryRun: + phase === PHASE_DEVELOPMENT_SERVER || !IS_SENTRY_ENABLED, + } + ) ); diff --git a/package.json b/package.json index 231de2ad8..35968a513 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,9 @@ }, "dependencies": { "@ente-io/next-with-workbox": "^1.0.3", + "@mui/material": "^5.6.2", + "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest", + "@mui/styled-engine-sc": "^5.6.1", "@sentry/nextjs": "^6.7.1", "@stripe/stripe-js": "^1.13.2", "@typescript-eslint/eslint-plugin": "^4.25.0", @@ -40,6 +43,7 @@ "libsodium-wrappers": "^0.7.8", "localforage": "^1.9.0", "next": "^12.1.0", + "next-transpile-modules": "^9.0.0", "photoswipe": "file:./thirdparty/photoswipe", "piexifjs": "^1.0.6", "react": "^17.0.2", @@ -55,7 +59,7 @@ "react-window": "^1.8.6", "react-window-infinite-loader": "^1.0.5", "scrypt-js": "^3.0.1", - "styled-components": "^5.2.0", + "styled-components": "^5.3.5", "workbox-precaching": "^6.1.5", "workbox-recipes": "^6.1.5", "workbox-routing": "^6.1.5", @@ -97,5 +101,8 @@ "eslint --fix", "prettier --write --ignore-unknown" ] + }, + "resolutions": { + "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest" } } diff --git a/tsconfig.json b/tsconfig.json index 551e9a3fe..dce11bcd5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,8 @@ { "compilerOptions": { + "paths": { + "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"] + }, "target": "es5", "lib": ["dom", "dom.iterable", "esnext", "webworker"], "allowJs": true, diff --git a/yarn.lock b/yarn.lock index f9f50df95..b4e043bf5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -865,6 +865,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.17.2": + version "7.17.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72" + integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.15.4": version "7.15.4" resolved "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz" @@ -913,17 +920,12 @@ resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@emotion/is-prop-valid@^0.8.8": - version "0.8.8" - resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz" - integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== +"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95" + integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ== dependencies: - "@emotion/memoize" "0.7.4" - -"@emotion/memoize@0.7.4": - version "0.7.4" - resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz" - integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + "@emotion/memoize" "^0.7.4" "@emotion/memoize@^0.7.4": version "0.7.5" @@ -1049,6 +1051,84 @@ resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz" integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w== +"@mui/base@5.0.0-alpha.77": + version "5.0.0-alpha.77" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.77.tgz#a88985597708c354520579e4f76e617b29f8f593" + integrity sha512-Zqm3qlczGViD3lJSYo8ZnQLHJ3PwGYftbDfVuh2Rq5OD88F7H6oDILlqknzty59NDkeSVO2qlymYmHOY1nLodg== + dependencies: + "@babel/runtime" "^7.17.2" + "@emotion/is-prop-valid" "^1.1.2" + "@mui/types" "^7.1.3" + "@mui/utils" "^5.6.1" + "@popperjs/core" "^2.11.5" + clsx "^1.1.1" + prop-types "^15.7.2" + react-is "^17.0.2" + +"@mui/material@^5.6.2": + version "5.6.2" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.6.2.tgz#bcd0ecdb265aca1bfee11773f6561aeedaa25b45" + integrity sha512-bwMvroBrMgUTwUh/BcjhtcJwEw9uH4chV3+ZSj6RckOJtMj8U4yEeD7S4NgHE8Ioj5eObKFzHpih/cTD1sDRpg== + dependencies: + "@babel/runtime" "^7.17.2" + "@mui/base" "5.0.0-alpha.77" + "@mui/system" "^5.6.2" + "@mui/types" "^7.1.3" + "@mui/utils" "^5.6.1" + "@types/react-transition-group" "^4.4.4" + clsx "^1.1.1" + csstype "^3.0.11" + hoist-non-react-statics "^3.3.2" + prop-types "^15.7.2" + react-is "^17.0.2" + react-transition-group "^4.4.2" + +"@mui/private-theming@^5.6.2": + version "5.6.2" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.6.2.tgz#c42da32f8b9481ba12885176c0168a355727c189" + integrity sha512-IbrSfFXfiZdyhRMC2bgGTFtb16RBQ5mccmjeh3MtAERWuepiCK7gkW5D9WhEsfTu6iez+TEjeUKSgmMHlsM2mg== + dependencies: + "@babel/runtime" "^7.17.2" + "@mui/utils" "^5.6.1" + prop-types "^15.7.2" + +"@mui/styled-engine-sc@^5.6.1", "@mui/styled-engine@^5.6.1", "@mui/styled-engine@npm:@mui/styled-engine-sc@latest": + version "5.6.1" + resolved "https://registry.yarnpkg.com/@mui/styled-engine-sc/-/styled-engine-sc-5.6.1.tgz#d9505c005eeefa5c7d7ef9c03e63324db889ee09" + integrity sha512-BMY5Pb8YgOxvvwg9s6mPeDgzha4244/KgRmHvTVPBmvqypbiLPApR6SNyYON+1/3kLHt3TpmxrlRY3jPiZF2QQ== + dependencies: + prop-types "^15.7.2" + +"@mui/system@^5.6.2": + version "5.6.2" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.6.2.tgz#04687d60d6a1f0f9df2c9d817b4942dac6b44aac" + integrity sha512-Wg9TRbvavSwEYk6UdpnoDx+CqJfaAN7AzlmwEx7DtGmx0snFVBST8FVb1Ev1vXosxEnq6/fe7ZDRobFVewvEPQ== + dependencies: + "@babel/runtime" "^7.17.2" + "@mui/private-theming" "^5.6.2" + "@mui/styled-engine" "^5.6.1" + "@mui/types" "^7.1.3" + "@mui/utils" "^5.6.1" + clsx "^1.1.1" + csstype "^3.0.11" + prop-types "^15.7.2" + +"@mui/types@^7.1.3": + version "7.1.3" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.3.tgz#d7636f3046110bcccc63e6acfd100e2ad9ca712a" + integrity sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA== + +"@mui/utils@^5.6.1": + version "5.6.1" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.6.1.tgz#4ab79a21bd481555d9a588f4b18061b3c28ea5db" + integrity sha512-CPrzrkiBusCZBLWu0Sg5MJvR3fKJyK3gKecLVX012LULyqg2U64Oz04BKhfkbtBrPBbSQxM+DWW9B1c9hmV9nQ== + dependencies: + "@babel/runtime" "^7.17.2" + "@types/prop-types" "^15.7.4" + "@types/react-is" "^16.7.1 || ^17.0.0" + prop-types "^15.7.2" + react-is "^17.0.2" + "@next/bundle-analyzer@^9.5.3": version "9.5.5" resolved "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-9.5.5.tgz" @@ -1137,6 +1217,11 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@popperjs/core@^2.11.5": + version "2.11.5" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64" + integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw== + "@popperjs/core@^2.8.6": version "2.10.1" resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz" @@ -1431,6 +1516,11 @@ resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== +"@types/prop-types@^15.7.4": + 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/react-collapse@^5.0.1": version "5.0.1" resolved "https://registry.npmjs.org/@types/react-collapse/-/react-collapse-5.0.1.tgz" @@ -1455,6 +1545,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-select@^4.0.15": version "4.0.17" resolved "https://registry.npmjs.org/@types/react-select/-/react-select-4.0.17.tgz" @@ -1472,6 +1569,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.4": + 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-window-infinite-loader@^1.0.3": version "1.0.5" resolved "https://registry.npmjs.org/@types/react-window-infinite-loader/-/react-window-infinite-loader-1.0.5.tgz" @@ -2190,6 +2294,11 @@ cli-truncate@^2.1.0: slice-ansi "^3.0.0" string-width "^4.2.0" +clsx@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" + integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== + code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz" @@ -2378,6 +2487,11 @@ css-to-react-native@^3.0.0: css-color-keywords "^1.0.0" postcss-value-parser "^4.0.2" +csstype@^3.0.11: + version "3.0.11" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33" + integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw== + csstype@^3.0.2: version "3.0.8" resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz" @@ -2538,6 +2652,14 @@ encodeurl@~1.0.2: resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz" integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k= +enhanced-resolve@^5.7.0: + version "5.9.3" + resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88" + integrity sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow== + dependencies: + graceful-fs "^4.2.4" + tapable "^2.2.0" + enquirer@^2.3.5, enquirer@^2.3.6: version "2.3.6" resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz" @@ -3211,6 +3333,11 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0: resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz" integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg== +graceful-fs@^4.2.4: + version "4.2.10" + resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" + integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA== + gzip-size@^5.0.0: version "5.1.1" resolved "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz" @@ -4070,6 +4197,14 @@ negotiator@0.6.2: resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz" integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw== +next-transpile-modules@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/next-transpile-modules/-/next-transpile-modules-9.0.0.tgz#133b1742af082e61cc76b02a0f12ffd40ce2bf90" + integrity sha512-VCNFOazIAnXn1hvgYYSTYMnoWgKgwlYh4lm1pKbSfiB3kj5ZYLcKVhfh3jkPOg1cnd9DP+pte9yCUocdPEUBTQ== + dependencies: + enhanced-resolve "^5.7.0" + escalade "^3.1.1" + next@^12.1.0: version "12.1.0" resolved "https://registry.npmjs.org/next/-/next-12.1.0.tgz" @@ -4640,6 +4775,11 @@ react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1: resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +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== + react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz" @@ -4695,7 +4835,7 @@ react-top-loading-bar@^2.0.1: resolved "https://registry.npmjs.org/react-top-loading-bar/-/react-top-loading-bar-2.0.1.tgz" integrity sha512-wkRlK9Rte4TU817GDcjlsCoDOxrrnvsNvK609FKyio0EIrmmqjQDz5DB8HbN88CHNZBy5Lh/OBALc03ioWFPuQ== -react-transition-group@^4.3.0, react-transition-group@^4.4.1: +react-transition-group@^4.3.0, react-transition-group@^4.4.1, react-transition-group@^4.4.2: version "4.4.2" resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz" integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== @@ -5372,14 +5512,14 @@ strtok3@^6.2.4: "@tokenizer/token" "^0.3.0" peek-readable "^4.0.1" -styled-components@^5.2.0: - version "5.3.1" - resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.3.1.tgz" - integrity sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ== +styled-components@^5.3.5: + version "5.3.5" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4" + integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg== dependencies: "@babel/helper-module-imports" "^7.0.0" "@babel/traverse" "^7.4.5" - "@emotion/is-prop-valid" "^0.8.8" + "@emotion/is-prop-valid" "^1.1.0" "@emotion/stylis" "^0.8.4" "@emotion/unitless" "^0.7.4" babel-plugin-styled-components ">= 1.12.0" @@ -5436,6 +5576,11 @@ table@^6.0.9: string-width "^4.2.0" strip-ansi "^6.0.0" +tapable@^2.2.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0" + integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ== + temp-dir@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz"