0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[web] Fix and standardize MUI / emotion imports (#1277)

Browse source 
- Always import from `@mui/material`
- Component selector API doesn't work, live with it and document it
This commit is contained in:
Manav Rathi 2024-04-01 17:18:05 +05:30 • committed by GitHub
commit 7f1730b56c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 60 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/apps/cast/src/components/LargeType.tsx
View file

@ -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;

12
web/apps/payments/src/components/Container.tsx
View file

@ -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<React.PropsWithChildren> = ({ children }) => (
<div className="container">{children}</div>
);

0
web/apps/payments/src/components/EnteSpinner.tsx → web/apps/payments/src/components/Spinner.tsx
View file

4
web/apps/payments/src/pages/desktop-redirect.tsx
View file

@ -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 (
<Container>
<EnteSpinner />
<Spinner />
</Container>
);
}

2
web/apps/payments/src/pages/index.tsx
View file

@ -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";

8
web/apps/payments/src/styles/globals.css
View file

@ -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;

3
web/apps/photos/src/components/PhotoViewer/FileInfo/ExifData.tsx
View file

@ -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 ".";

3
web/apps/photos/src/components/Search/SearchBar/searchInput/MenuWithPeople.tsx
View file

@ -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";

34
web/docs/dependencies.md
View file

@ -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

1
web/package.json
View file

@ -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",

12
web/packages/next/next.config.base.js
View file

@ -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.

1
web/packages/ui/package.json
View file

@ -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",

112
web/yarn.lock
View file

@ -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"