diff --git a/web/apps/cast/src/components/LargeType.tsx b/web/apps/cast/src/components/LargeType.tsx index 61d31e409..ecf7a201b 100644 --- a/web/apps/cast/src/components/LargeType.tsx +++ b/web/apps/cast/src/components/LargeType.tsx @@ -1,4 +1,4 @@ -import styled from "@emotion/styled"; +import { styled } from "@mui/material"; const colourPool = [ "#87CEFA", // Light Blue @@ -43,7 +43,7 @@ export default function LargeType({ chars }: { chars: string[] }) { ); } -const Container = styled.div` +const Container = styled("div")` font-size: 4rem; font-weight: bold; font-family: monospace; diff --git a/web/apps/payments/src/components/Container.tsx b/web/apps/payments/src/components/Container.tsx index 33ab44a6b..da03388ea 100644 --- a/web/apps/payments/src/components/Container.tsx +++ b/web/apps/payments/src/components/Container.tsx @@ -1,9 +1,5 @@ -import styled from "@emotion/styled"; +import * as React from "react"; -export const Container = styled.div` - display: flex; - flex: 1; - flex-direction: column; - justify-content: center; - align-items: center; -`; +export const Container: React.FC = ({ children }) => ( +
{children}
+); diff --git a/web/apps/payments/src/components/EnteSpinner.tsx b/web/apps/payments/src/components/Spinner.tsx similarity index 100% rename from web/apps/payments/src/components/EnteSpinner.tsx rename to web/apps/payments/src/components/Spinner.tsx diff --git a/web/apps/payments/src/pages/desktop-redirect.tsx b/web/apps/payments/src/pages/desktop-redirect.tsx index 2bccc7a0a..89df55bb6 100644 --- a/web/apps/payments/src/pages/desktop-redirect.tsx +++ b/web/apps/payments/src/pages/desktop-redirect.tsx @@ -1,5 +1,5 @@ import { Container } from "components/Container"; -import { EnteSpinner } from "components/EnteSpinner"; +import { Spinner } from "components/Spinner"; import * as React from "react"; export default function DesktopRedirect() { @@ -12,7 +12,7 @@ export default function DesktopRedirect() { return ( - + ); } diff --git a/web/apps/payments/src/pages/index.tsx b/web/apps/payments/src/pages/index.tsx index 93535f9c5..64c8b96a7 100644 --- a/web/apps/payments/src/pages/index.tsx +++ b/web/apps/payments/src/pages/index.tsx @@ -1,5 +1,5 @@ import { Container } from "components/Container"; -import { Spinner } from "components/EnteSpinner"; +import { Spinner } from "components/Spinner"; import * as React from "react"; import { parseAndHandleRequest } from "services/billingService"; import { CUSTOM_ERROR } from "utils/error"; diff --git a/web/apps/payments/src/styles/globals.css b/web/apps/payments/src/styles/globals.css index e75d7598d..c1a7f539d 100644 --- a/web/apps/payments/src/styles/globals.css +++ b/web/apps/payments/src/styles/globals.css @@ -21,6 +21,14 @@ body { flex-direction: column; } +.container { + display: flex; + flex: 1; + flex-direction: column; + justify-content: center; + align-items: center; +} + .loading-spinner { color: #28a745; width: 2rem; diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/ExifData.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/ExifData.tsx index ee45df5d0..3e1a3f49b 100644 --- a/web/apps/photos/src/components/PhotoViewer/FileInfo/ExifData.tsx +++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/ExifData.tsx @@ -1,7 +1,6 @@ import CopyButton from "@ente/shared/components/CodeBlock/CopyButton"; import { formatDateTimeFull } from "@ente/shared/time/format"; -import { Stack, styled, Typography } from "@mui/material"; -import { Box } from "@mui/system"; +import { Box, Stack, styled, Typography } from "@mui/material"; import Titlebar from "components/Titlebar"; import { t } from "i18next"; import { FileInfoSidebar } from "."; diff --git a/web/apps/photos/src/components/Search/SearchBar/searchInput/MenuWithPeople.tsx b/web/apps/photos/src/components/Search/SearchBar/searchInput/MenuWithPeople.tsx index 1151e202f..f57ce85cf 100644 --- a/web/apps/photos/src/components/Search/SearchBar/searchInput/MenuWithPeople.tsx +++ b/web/apps/photos/src/components/Search/SearchBar/searchInput/MenuWithPeople.tsx @@ -1,6 +1,5 @@ import { Row } from "@ente/shared/components/Container"; -import { Box } from "@mui/material"; -import styled from "@mui/styled-engine"; +import { Box, styled } from "@mui/material"; import { PeopleList } from "components/MachineLearning/PeopleList"; import { t } from "i18next"; import { AppContext } from "pages/_app"; diff --git a/web/docs/dependencies.md b/web/docs/dependencies.md index 07ca1fc82..a1daaf0b2 100644 --- a/web/docs/dependencies.md +++ b/web/docs/dependencies.md @@ -47,19 +47,20 @@ bit more exhaustively when changing the crypto layer. ## UI -The UI package uses "react". This is our core framework. We do use layers on top -of React, but those are contingent and can be replaced, or even removed. But the -usage of React is deep rooted. React also has a sibling "react-dom" package that -renders "React" interfaces to the DOM. +The UI package uses "react". This is our core framework. + +React also has a sibling "react-dom" package that renders "React" interfaces to +the DOM. ### MUI and Emotion -Currently, we use MUI ("@mui/material"), which is a React component library, to -get a base set of components. MUI uses Emotion (a styled-component variant) as -its preferred CSS-in-JS library and to keep things simple, that's also what we -use to write CSS in our own JS (TS). +We use [MUI](https://mui.com) ("@mui/material"), which is a React component +library, to get a base set of components. -Emotion itself comes in many parts, of which we need the following three: +MUI uses [Emotion](https://emotion.sh/) (a styled-component variant) as its +preferred CSS-in-JS library. + +Emotion itself comes in many parts, of which we need the following: * "@emotion/react" - React interface to Emotion. In particular, we set this as the package that handles the transformation of JSX into JS (via the @@ -74,7 +75,20 @@ Emotion itself comes in many parts, of which we need the following three: > Keep `@emotion/styled` as a dependency of your project. Even if you never > use it explicitly, it's a peer dependency of `@mui/material`. -* "@emotion/server" +Note that currently the SWC plugin doesn't allow the use of the component +selectors API (i.e using `styled.div` instead of `styled("div")`). + +> I think the transform for component selectors is not implemented in the swc +> plugin. +> +> https://github.com/vercel/next.js/issues/46973 + +There is a way of enabling it by installing the `@emotion/babel-plugin` and +specifying the import map as mentioned +[here](https://mui.com/system/styled/#how-to-use-components-selector-api) ([full +example](https://github.com/mui/material-ui/issues/27380#issuecomment-928973157)), +but that disables the SWC integration altogether, so we live with this +infelicity for now. ### Translations diff --git a/web/package.json b/web/package.json index 58515a959..59afa68b6 100644 --- a/web/package.json +++ b/web/package.json @@ -27,6 +27,7 @@ "dev:photos": "yarn workspace photos next dev", "lint": "yarn prettier --check . && yarn workspaces run eslint .", "lint-fix": "yarn prettier --write . && yarn workspaces run eslint --fix .", + "preview": "yarn preview:photos", "preview:accounts": "yarn build:accounts && python3 -m http.server -d apps/accounts/out 3001", "preview:auth": "yarn build:auth && python3 -m http.server -d apps/auth/out 3000", "preview:cast": "yarn build:cast && python3 -m http.server -d apps/accounts/out 3001", diff --git a/web/packages/next/next.config.base.js b/web/packages/next/next.config.base.js index 187019b81..89b745638 100644 --- a/web/packages/next/next.config.base.js +++ b/web/packages/next/next.config.base.js @@ -45,19 +45,13 @@ const gitSHA = () => { * @type {import("next").NextConfig} */ const nextConfig = { - /* generate a static export when we run `next build` */ + // Generate a static export when we run `next build`. output: "export", compiler: { emotion: true, }, - transpilePackages: [ - "@/next", - "@/ui", - "@/utils", - "@mui/material", - "@mui/system", - "@mui/icons-material", - ], + // Use Next.js to transpile our internal packages before bundling them. + transpilePackages: ["@/next", "@/ui", "@/utils"], // Add environment variables to the JavaScript bundle. They will be // available as `process.env.VAR_NAME` to our code. diff --git a/web/packages/ui/package.json b/web/packages/ui/package.json index 756d1158a..125b8de7c 100644 --- a/web/packages/ui/package.json +++ b/web/packages/ui/package.json @@ -4,7 +4,6 @@ "private": true, "dependencies": { "@emotion/react": "^11.11", - "@emotion/server": "^11.11", "@emotion/styled": "^11.11", "@mui/icons-material": "^5.15", "@mui/material": "^5.15", diff --git a/web/yarn.lock b/web/yarn.lock index 73439bc03..a6e1a900c 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -165,16 +165,6 @@ "@emotion/utils" "^1.2.1" csstype "^3.0.2" -"@emotion/server@^11.11": - version "11.11.0" - resolved "https://registry.yarnpkg.com/@emotion/server/-/server-11.11.0.tgz#35537176a2a5ed8aed7801f254828e636ec3bd6e" - integrity sha512-6q89fj2z8VBTx9w93kJ5n51hsmtYuFPtZgnc1L8VzRx9ti4EU6EyvF6Nn1H1x3vcCQCF7u2dB2lY4AYJwUW4PA== - dependencies: - "@emotion/utils" "^1.2.1" - html-tokenize "^2.0.0" - multipipe "^1.0.2" - through "^2.3.8" - "@emotion/sheet@^1.2.2": version "1.2.2" resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec" @@ -1212,11 +1202,6 @@ bs58@^5.0.0: dependencies: base-x "^4.0.0" -buffer-from@~0.1.1: - version "0.1.2" - resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-0.1.2.tgz#15f4b9bcef012044df31142c14333caf6e0260d0" - integrity sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg== - busboy@1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893" @@ -1520,13 +1505,6 @@ dom-helpers@^5.0.1: "@babel/runtime" "^7.8.7" csstype "^3.0.2" -duplexer2@^0.1.2: - version "0.1.4" - resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1" - integrity sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA== - dependencies: - readable-stream "^2.0.2" - duplexer@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" @@ -2326,17 +2304,6 @@ html-parse-stringify@^3.0.1: dependencies: void-elements "3.1.0" -html-tokenize@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/html-tokenize/-/html-tokenize-2.0.1.tgz#c3b2ea6e2837d4f8c06693393e9d2a12c960be5f" - 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" - i18next-http-backend@^2.5: version "2.5.0" resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.5.0.tgz#8396a7df30bfe722eff7a65f629df32a61720414" @@ -2397,7 +2364,7 @@ inflight@^1.0.4: once "^1.3.0" wrappy "1" -inherits@2, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3: +inherits@2, inherits@^2.0.3, inherits@~2.0.3: version "2.0.4" resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== @@ -2616,11 +2583,6 @@ is-weakset@^2.0.1: call-bind "^1.0.2" get-intrinsic "^1.1.1" -isarray@0.0.1: - version "0.0.1" - resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" - integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ== - isarray@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723" @@ -2915,7 +2877,7 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2: dependencies: brace-expansion "^1.1.7" -minimist@^1.2.0, minimist@^1.2.6, minimist@~1.2.5: +minimist@^1.2.0, minimist@^1.2.6: version "1.2.8" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c" integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA== @@ -2971,14 +2933,6 @@ ms@^2.1.1: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== -multipipe@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-1.0.2.tgz#cc13efd833c9cda99f224f868461b8e1a3fd939d" - integrity sha512-6uiC9OvY71vzSGX8lZvSqscE7ft9nPupJ8fMjrCNRAUy2LREUW42UL+V/NTrogr6rFgRydUrCX4ZitfpSNkSCQ== - dependencies: - duplexer2 "^0.1.2" - object-assign "^4.1.0" - nanoid@^3.3.6: version "3.3.7" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" @@ -3031,7 +2985,7 @@ normalize-path@^3.0.0, normalize-path@~3.0.0: resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== -object-assign@^4.1.0, object-assign@^4.1.1: +object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== @@ -3046,11 +3000,6 @@ object-keys@^1.1.1: resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e" integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA== -object-keys@~0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336" - integrity sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw== - object.assign@^4.1.4, object.assign@^4.1.5: version "4.1.5" resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0" @@ -3465,7 +3414,16 @@ react@^18: dependencies: loose-envify "^1.1.0" -readable-stream@^2.0.2, readable-stream@~2.3.6: +readable-stream@^3.6.0: + version "3.6.2" + resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967" + integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA== + dependencies: + inherits "^2.0.3" + string_decoder "^1.1.1" + util-deprecate "^1.0.1" + +readable-stream@~2.3.6: version "2.3.8" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b" integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA== @@ -3478,25 +3436,6 @@ readable-stream@^2.0.2, readable-stream@~2.3.6: string_decoder "~1.1.1" util-deprecate "~1.0.1" -readable-stream@^3.6.0: - version "3.6.2" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967" - integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA== - dependencies: - inherits "^2.0.3" - string_decoder "^1.1.1" - util-deprecate "^1.0.1" - -readable-stream@~1.0.17, readable-stream@~1.0.27-1: - version "1.0.34" - resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c" - 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" - readable-web-to-node-stream@^3.0.0: version "3.0.2" resolved "https://registry.yarnpkg.com/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.2.tgz#5d52bb5df7b54861fd48d015e93a2cb87b3ee0bb" @@ -3849,11 +3788,6 @@ string_decoder@^1.1.1: dependencies: safe-buffer "~5.2.0" -string_decoder@~0.10.x: - version "0.10.31" - resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94" - integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ== - string_decoder@~1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8" @@ -3942,19 +3876,6 @@ text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== -through2@~0.4.1: - version "0.4.2" - resolved "https://registry.yarnpkg.com/through2/-/through2-0.4.2.tgz#dbf5866031151ec8352bb6c4db64a2292a840b9b" - integrity sha512-45Llu+EwHKtAZYTPPVn3XZHBgakWMN3rokhEv5hu596XP+cNgplMg+Gj+1nmAvj+L0K7+N49zBKx5rah5u0QIQ== - dependencies: - readable-stream "~1.0.17" - xtend "~2.1.1" - -through@^2.3.8: - version "2.3.8" - resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" - integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg== - tiny-case@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03" @@ -4276,13 +4197,6 @@ xml-js@^1.6.11: dependencies: sax "^1.2.4" -xtend@~2.1.1: - version "2.1.2" - resolved "https://registry.yarnpkg.com/xtend/-/xtend-2.1.2.tgz#6efecc2a4dad8e6962c4901b337ce7ba87b5d28b" - integrity sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ== - dependencies: - object-keys "~0.4.0" - yallist@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"