Move the UI dependencies down to the ui package from the top level

apps/photos/package.json

@@ -37,8 +37,6 @@
         "get-user-locale": "^2.1.3",
         "hdbscan": "0.0.1-alpha.5",
         "heic-convert": "^2.0.0",
-        "i18next": "^23.4.1",
-        "i18next-http-backend": "^2.1.1",
         "idb": "^7.1.1",
         "is-electron": "^2.2.2",
         "jszip": "3.10.1",
@@ -56,7 +54,6 @@
         "react-bootstrap": "^1.3.0",
         "react-datepicker": "^4.16.0",
         "react-dropzone": "^11.2.4",
-        "react-i18next": "^13.0.2",
         "react-otp-input": "^2.3.1",
         "react-select": "^4.3.1",
         "react-top-loading-bar": "^2.0.1",

docs/dependencies.md

@@ -14,3 +14,24 @@ They also need some support packages:
 * "@typescript-eslint/parser" - Tells ESLint how to read TypeScript syntax
 * "@typescript-eslint/eslint-plugin" - Provides TypeScript rules and presets
 
+## Utils
+
+## 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.
+
+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).
+
+Emotion itself comes in many parts, of which we need the following three:
+
+* "@emotion/react" - React interface to Emotion. In particular, we set this as
+  the package that handles the transformation of JSX into JS (via the
+  `jsxImportSource` property in `tsconfig.json`).
+* "@emotion/styled"
+* "@emotion/server"

package.json

@@ -22,18 +22,11 @@
         "lint-fix": "yarn prettier --write . && yarn workspaces run eslint --fix ."
     },
     "dependencies": {
-        "@emotion/react": "^11.11",
-        "@emotion/server": "^11.11",
-        "@emotion/styled": "^11.11",
         "@ente/accounts": "*",
         "@ente/shared": "*",
-        "@mui/icons-material": "^5.15",
-        "@mui/material": "^5.15",
         "axios": "^1.6.0",
         "is-electron": "^2.2.2",
-        "next": "^14.1",
-        "react": "18.2.0",
-        "react-dom": "18.2.0"
+        "next": "^14.1"
     },
     "devDependencies": {
         "@ente/eslint-config": "*",

packages/shared/i18n/index.ts

@@ -2,7 +2,7 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
 import { getBestPossibleUserLocale } from './utils';
-import { isDevBuild } from '../network/api';
+import { isDevBuild } from '@/utils/env';
 
 /**
  * Load translations.

packages/shared/package.json

@@ -3,6 +3,7 @@
     "version": "0.0.0",
     "private": true,
     "dependencies": {
+        "@/ui": "*",
         "@/utils": "*",
         "@sentry/nextjs": "7.77.0"
     }

packages/shared/sentry/config/sentry.config.base.ts

@@ -2,7 +2,7 @@ import * as Sentry from '@sentry/nextjs';
 import { getSentryUserID } from '@ente/shared/sentry/utils';
 import { runningInBrowser } from '@ente/shared/platform';
 import { getHasOptedOutOfCrashReports } from '@ente/shared/storage/localStorage/helpers';
-import { isDevBuild } from '@ente/shared/network/api';
+import { isDevBuild } from '@/utils/env';
 
 export const initSentry = async (dsn: string) => {
     // Don't initialize Sentry for dev builds

packages/ui/package.json

@@ -4,5 +4,17 @@
     "private": true,
     "devDependencies": {
         "@/build-config": "*"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.11",
+        "@emotion/server": "^11.11",
+        "@emotion/styled": "^11.11",
+        "@mui/icons-material": "^5.15",
+        "@mui/material": "^5.15",
+        "i18next": "^23.10.0",
+        "i18next-http-backend": "^2.5.0",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-i18next": "^14"
     }
 }

yarn.lock

@@ -41,7 +41,7 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.14.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.14.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
   integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
@@ -579,7 +579,7 @@
     "@sentry/types" "7.77.0"
     "@sentry/utils" "7.77.0"
 
-"@sentry/cli@^1.74.6":
+"@sentry/cli@1.75.0", "@sentry/cli@^1.74.6":
   version "1.75.0"
   resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-1.75.0.tgz#4a5e71b5619cd4e9e6238cc77857c66f6b38d86a"
   integrity sha512-vT8NurHy00GcN8dNqur4CMIYvFH3PaKdkX3qllVvi4syybKqjwoz+aWRCvprbYv0knweneFkLt1SmBWqazUMfA==
@@ -2535,17 +2535,17 @@ https-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
-i18next-http-backend@^2.1.1:
+i18next-http-backend@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.5.0.tgz#8396a7df30bfe722eff7a65f629df32a61720414"
   integrity sha512-Z/aQsGZk1gSxt2/DztXk92DuDD20J+rNudT7ZCdTrNOiK8uQppfvdjq9+DFQfpAnFPn3VZS+KQIr1S/W1KxhpQ==
   dependencies:
     cross-fetch "4.0.0"
 
-i18next@^23.4.1:
-  version "23.9.0"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.9.0.tgz#659cfcbf51a20158bb094d17a85f3c583d473901"
-  integrity sha512-f3MUciKqwzNV//mHG6EtdSlC65+nqH/3zK8sOSWqNV6FVu2tmHhF/rFOp9UF8S4m1odojtuipKaKJrP0Loh60g==
+i18next@^23.10.0:
+  version "23.10.0"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.10.0.tgz#fb328794ae692e6fdde0564259e421f4203c4a2c"
+  integrity sha512-/TgHOqsa7/9abUKJjdPeydoyDc0oTi/7u9F8lMSj6ufg4cbC1Oj3f/Jja7zj7WRIhEQKB7Q4eN6y68I9RDxxGQ==
   dependencies:
     "@babel/runtime" "^7.23.2"
 
@@ -3609,12 +3609,12 @@ react-fast-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
-react-i18next@^13.0.2:
-  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.5.0.tgz#44198f747628267a115c565f0c736a50a76b1ab0"
-  integrity sha512-CFJ5NDGJ2MUyBohEHxljOq/39NQ972rh1ajnadG9BjTk+UXbHLq4z5DKEbEQBDoIhUmmbuS/fIMJKo6VOax1HA==
+react-i18next@^14:
+  version "14.0.5"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-14.0.5.tgz#5df7b88a3ac8afbef8089ed0d0c27e12b9a1acac"
+  integrity sha512-5+bQSeEtgJrMBABBL5lO7jPdSNAbeAZ+MlFWDw//7FnVacuVu3l9EeWFzBQvZsKy+cihkbThWOAThEdH8YjGEw==
   dependencies:
-    "@babel/runtime" "^7.22.5"
+    "@babel/runtime" "^7.23.9"
     html-parse-stringify "^3.0.1"
 
 react-input-autosize@^3.0.0: