Merge @/ui into @/next

web/apps/accounts/src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { setupI18n } from "@/ui/i18n";
+import { setupI18n } from "@/next/i18n";
 import { APPS, APP_TITLES } from "@ente/shared/apps/constants";
 import { Overlay } from "@ente/shared/components/Container";
 import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";

web/apps/auth/src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { setupI18n } from "@/ui/i18n";
+import { setupI18n } from "@/next/i18n";
 import {
     APPS,
     APP_TITLES,

web/apps/photos/src/components/Sidebar/Preferences/LanguageSelector.tsx

@@ -3,7 +3,7 @@ import {
     setLocaleInUse,
     supportedLocales,
     type SupportedLocale,
-} from "@/ui/i18n";
+} from "@/next/i18n";
 import DropdownInput, { DropdownOption } from "components/DropdownInput";
 import { t } from "i18next";
 import { useRouter } from "next/router";

web/apps/photos/src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { setupI18n } from "@/ui/i18n";
+import { setupI18n } from "@/next/i18n";
 import {
     APPS,
     APP_TITLES,

web/docs/dependencies.md

@@ -47,10 +47,10 @@ bit more exhaustively when changing the crypto layer.
 
 ## UI
 
-The UI package uses "react". This is our core framework.
+### React
 
-React also has a sibling "react-dom" package that renders "React" interfaces to
-the DOM.
+[React](https://react.dev) ("react") is our core framework. It also has a
+sibling "react-dom" package that renders JSX to the DOM.
 
 ### MUI and Emotion
 
@@ -75,6 +75,8 @@ Emotion itself comes in many parts, of which we need the following:
   > Keep `@emotion/styled` as a dependency of your project. Even if you never
   > use it explicitly, it's a peer dependency of `@mui/material`.
 
+#### Component selectors
+
 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")`).
 
@@ -104,3 +106,18 @@ Note that inspite of the "next" in the name of the library, it has nothing to do
 with Next.js.
 
 For more details, see [translations.md](translations.md).
+
+## Meta Frameworks
+
+### Next.js
+
+[Next.js](https://nextjs.org) ("next") provides the meta framework for both the
+Photos and the Auth app, and also for some of the sidecar apps like accounts and
+cast.
+
+We use a limited subset of Next. The main thing we get out of it is a reasonable
+set of defaults for bundling our app into a static export which we can then
+deploy to our webserver. In addition, the Next.js page router is convenient.
+Apart from this, while we use a few tidbits from Next.js here and there, overall
+our apps are regular React SPAs, and are not particularly tied to Next.
+

web/packages/next/README.md

@@ -1,8 +1,9 @@
 ## @/next
 
-Like [@/ui](../ui/README.md), but for things that require Next.
+A base package for our UI layer code, for sharing ode between our Next.js apps.
 
 ### Packaging
 
 This (internal) package exports a React TypeScript library. We rely on the
 importing project to transpile and bundle it.
+

web/packages/next/next.config.base.js

@@ -51,7 +51,7 @@ const nextConfig = {
         emotion: true,
     },
     // Use Next.js to transpile our internal packages before bundling them.
-    transpilePackages: ["@/next", "@/ui", "@/utils"],
+    transpilePackages: ["@/next", "@/utils"],
 
     // Add environment variables to the JavaScript bundle. They will be
     // available as `process.env.VAR_NAME` to our code.

web/packages/next/package.json

@@ -3,11 +3,21 @@
     "version": "0.0.0",
     "private": true,
     "dependencies": {
-        "@/ui": "*",
-        "next": "^14.1"
+        "@emotion/react": "^11.11",
+        "@emotion/styled": "^11.11",
+        "@mui/icons-material": "^5.15",
+        "@mui/material": "^5.15",
+        "get-user-locale": "^2.3",
+        "i18next": "^23.10",
+        "i18next-http-backend": "^2.5",
+        "next": "^14.1",
+        "react": "^18",
+        "react-dom": "^18",
+        "react-i18next": "^14"
     },
     "devDependencies": {
         "@/build-config": "*",
-        "@types/node": "^20"
+        "@types/react": "^18",
+        "@types/react-dom": "^18"
     }
 }

web/packages/shared/README.md

@@ -1,3 +1,3 @@
 Deprecated in favor of [@/utils](../utils/README.md) and
-[@/ui](../ui/README.md). Don't add new code here - we'll slowly be migrating
+[@/next](../next/README.md). Don't add new code here - we'll slowly be migrating
 existing code from here to those two packages.

web/packages/ui/.eslintrc.js

@@ -1,6 +0,0 @@
-module.exports = {
-    extends: ["@/build-config/eslintrc-typescript-react"],
-    parserOptions: {
-        tsconfigRootDir: __dirname,
-    },
-};

web/packages/ui/README.md

@@ -1,8 +0,0 @@
-## @/ui
-
-Like [@/utils](../utils/README.md), but for things that require React.
-
-### Packaging
-
-This (internal) package exports a React TypeScript library. We rely on the
-importing project to transpile and bundle it.

web/packages/ui/package.json

@@ -1,22 +0,0 @@
-{
-    "name": "@/ui",
-    "version": "0.0.0",
-    "private": true,
-    "dependencies": {
-        "@emotion/react": "^11.11",
-        "@emotion/styled": "^11.11",
-        "@mui/icons-material": "^5.15",
-        "@mui/material": "^5.15",
-        "get-user-locale": "^2.3",
-        "i18next": "^23.10",
-        "i18next-http-backend": "^2.5",
-        "react": "^18",
-        "react-dom": "^18",
-        "react-i18next": "^14"
-    },
-    "devDependencies": {
-        "@/build-config": "*",
-        "@types/react": "^18",
-        "@types/react-dom": "^18"
-    }
-}

web/packages/ui/tsconfig.json

@@ -1,5 +0,0 @@
-{
-    "extends": "@/build-config/tsconfig.transpile.json",
-    /* Typecheck all files with the given extensions (here or in subfolders) */
-    "include": ["**/*.ts", "**/*.tsx"]
-}