Packaging related cleanup (#1657)

.prettierrc.json

@@ -1,4 +1,7 @@
 {
     "tabWidth": 4,
-    "plugins": ["prettier-plugin-organize-imports"]
+    "plugins": [
+        "prettier-plugin-organize-imports",
+        "prettier-plugin-packagejson"
+    ]
 }

apps/accounts/package.json

@@ -7,9 +7,5 @@
         "@ente/accounts": "*",
         "@ente/eslint-config": "*",
         "@ente/shared": "*"
-    },
-    "devDependencies": {
-        "@types/node": "^14.6.4",
-        "@types/react": "^18"
     }
 }

apps/photos/package.json

@@ -66,9 +66,7 @@
         "@next/bundle-analyzer": "^14.1",
         "@types/bs58": "^4.0.1",
         "@types/leaflet": "^1.9.3",
-        "@types/node": "^14.6.4",
         "@types/photoswipe": "^4.1.1",
-        "@types/react": "^18",
         "@types/react-collapse": "^5.0.1",
         "@types/react-datepicker": "^4.15.0",
         "@types/react-select": "^4.0.15",

docs/deploy.md

@@ -32,11 +32,32 @@ see the Cloudflare dashboard for the latest:
 - _testing.ente.io_: `main`
 - _web.ente.io_: `photos-release`
 - _auth.ente.io_: `auth-release`
+- _accounts.ente.io_: `accounts-release`
+- _cast.ente.io_: `cast-release`
 
 Thus to trigger a, say, production deployment of the photos app, we can open and
 merge a PR into the `photos-release` branch. Cloudflare will then build and
 deploy the code to _web.ente.io_.
 
+Apart from this, there are also some subdomains:
+
+- `albums.ente.io` is a CNAME alias to the production deployment
+  (`web.ente.io`). However, when the code detects that it is being served from
+  `albums.ente.io`, it redirects to the `/shared-albums` page (Enhancement:
+  serve it as a separate app with a smaller bundle size).
+
+- `payments.ente.io` and `family.ente.io` are currently in a separate
+  repositories (Enhancement: bring them in here).
+
+In Cloudflare Pages setting the following environment variables are defined:
+
+- `NODE_VERSION`: Determines which version of Node is used when we do `yarn
+  build:foo`. Currently this is set to `20.11.1`. The major version here should
+  match that of `@types/node` in our dev dependencies.
+
+- `SENTRY_AUTH_TOKEN`: An encrypted environment variable that is used by the
+  Sentry Webpack Plugin to upload sourcemaps during the build.
+
 ## Adding a new app
 
 1. Add a mapping in `scripts/deploy.sh`.

package.json

@@ -14,20 +14,20 @@
         "build:photos": "yarn workspace photos next build",
         "dev": "yarn dev:photos",
         "dev:accounts": "yarn workspace accounts next dev",
+        "dev:albums": "yarn workspace photos next dev -p 3002",
         "dev:auth": "yarn workspace auth next dev",
         "dev:cast": "yarn workspace cast next dev",
         "dev:photos": "yarn workspace photos next dev",
-        "dev:albums": "yarn workspace photos next dev -p 3002",
         "lint": "yarn prettier --check . && yarn workspaces run eslint .",
         "lint-fix": "yarn prettier --write . && yarn workspaces run eslint --fix ."
     },
+    "resolutions": {
+        "@sentry/cli": "1.75.0",
+        "libsodium": "0.7.9"
+    },
     "devDependencies": {
         "eslint": "^8",
         "prettier": "^3",
         "typescript": "^5"
-    },
-    "resolutions": {
-        "@sentry/cli": "1.75.0",
-        "libsodium": "0.7.9"
     }
 }

packages/accounts/package.json

@@ -2,10 +2,6 @@
     "name": "@ente/accounts",
     "version": "0.0.0",
     "private": true,
-    "scripts": {
-        "lint": "eslint .",
-        "build": "yarn lint && tsc"
-    },
     "dependencies": {
         "@/next": "*",
         "@ente/eslint-config": "*",

packages/build-config/eslintrc-typescript-react.js

@@ -0,0 +1,24 @@
+/* eslint-env node */
+module.exports = {
+    extends: [
+        "eslint:recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:@typescript-eslint/strict-type-checked",
+        "plugin:@typescript-eslint/stylistic-type-checked",
+    ],
+    plugins: ["@typescript-eslint", "react-namespace-import"],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        project: true,
+    },
+    root: true,
+    ignorePatterns: [".eslintrc.js"],
+    rules: {
+        // The recommended way to import React is:
+        //
+        //     import * as React from "react";
+        //
+        // This rule enforces that.
+        "react-namespace-import/no-namespace-import": "error",
+    },
+};

packages/build-config/eslintrc-typescript.js

@@ -10,6 +10,6 @@ module.exports = {
     parserOptions: {
         project: true,
     },
-    ignorePatterns: [".eslintrc.js"],
     root: true,
+    ignorePatterns: [".eslintrc.js"],
 };

packages/build-config/package.json

@@ -5,6 +5,9 @@
     "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^7",
         "@typescript-eslint/parser": "^7",
-        "prettier-plugin-organize-imports": "^3.2.4"
+        "eslint-plugin-react-hooks": "^4.6",
+        "eslint-plugin-react-namespace-import": "^1.0",
+        "prettier-plugin-organize-imports": "^3.2",
+        "prettier-plugin-packagejson": "^2.4"
     }
 }

packages/eslint-config/package.json

@@ -1,17 +1,17 @@
 {
     "name": "@ente/eslint-config",
-    "main": "index.js",
     "version": "1.0.0",
+    "main": "index.js",
     "dependencies": {},
-    "standard": {
-        "parser": "babel-eslint"
-    },
     "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^7",
         "@typescript-eslint/parser": "^7",
         "eslint": "^8",
         "eslint-config-next": "latest",
         "eslint-config-prettier": "latest",
         "eslint-plugin-react": "latest"
+    },
+    "standard": {
+        "parser": "babel-eslint"
     }
 }

packages/next/.eslintrc.js

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

packages/next/package.json

@@ -2,11 +2,12 @@
     "name": "@/next",
     "version": "0.0.0",
     "private": true,
-    "devDependencies": {
-        "@/build-config": "*"
-    },
     "dependencies": {
         "@/ui": "*",
         "next": "^14.1"
+    },
+    "devDependencies": {
+        "@/build-config": "*",
+        "@types/node": "^20"
     }
 }

packages/ui/.eslintrc.js

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

packages/ui/components/Card.tsx

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 export const Card: React.FC = () => {
     return <div>Hello</div>;
 };

packages/ui/package.json

@@ -11,11 +11,13 @@
         "get-user-locale": "^2.3",
         "i18next": "^23.10",
         "i18next-http-backend": "^2.5",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
+        "react": "^18",
+        "react-dom": "^18",
         "react-i18next": "^14"
     },
     "devDependencies": {
-        "@/build-config": "*"
+        "@/build-config": "*",
+        "@types/react": "^18",
+        "@types/react-dom": "^18"
     }
 }

packages/utils/package.json

@@ -5,7 +5,7 @@
     "dependencies": {
         "is-electron": "^2.2",
         "libsodium-wrappers": "0.7.9",
-        "yup": "^1.3.3"
+        "yup": "^1.3"
     },
     "devDependencies": {
         "@/build-config": "*",