refactor: Integrate Joy UI and Jotai (#2059)

env/.local.env → .env

@@ -1,11 +1,13 @@
-# Environment variables for the local development and testing
+# Environment variables
+# https://vitejs.dev/guide/env-and-mode.html#env-files
 #
-# NOTE: You can place secrets and local overrides into the
-# ".local.override.env" file which is excluded from this Git repo
+# TIP: Feel free to personalize these settings in your `.env.local` file that
+#      is not tracked by source control, giving you the liberty to tweak
+#      settings in your local environment worry-free! Happy coding! 🚀
 
 # Web application settings
 APP_ENV=local
-APP_NAME=React App
+APP_NAME=Acme Co.
 APP_HOSTNAME=localhost
 APP_ORIGIN=http://localhost:5173
 API_ORIGIN=https://api-mcfytwakla-uc.a.run.app

.github/workflows/main.yml

@@ -43,8 +43,10 @@ jobs:
       - run: yarn lint
         if: ${{ github.event_name == 'pull_request' }}
       - run: yarn tsc --build
-      - run: yarn test
+      - run: yarn workspace app test
         if: ${{ github.event_name == 'pull_request' }}
+      # - run: yarn workspace edge test
+      #   if: ${{ github.event_name == 'pull_request' }}
 
       # Compile and save build artifacts
       - run: yarn build

.gitignore

@@ -28,7 +28,8 @@ yarn-error.log*
 *.lcov
 
 # Environment variables
-*.override.env
+.env.*.local
+.env.local
 
 # Visual Studio Code
 # https://github.com/github/gitignore/blob/master/Global/VisualStudioCode.gitignore

.vscode/extensions.json

@@ -6,6 +6,7 @@
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
     "github.copilot",
+    "github.vscode-github-actions",
     "graphql.vscode-graphql",
     "mikestead.dotenv",
     "streetsidesoftware.code-spell-checker",

.vscode/react.code-snippets

@@ -3,28 +3,34 @@
     "scope": "javascriptreact,typescriptreact",
     "prefix": "react",
     "body": [
-      "import { ${1:import}, ${1:import}Props } from \"@mui/material\";",
-      "import * as React from \"react\";",
+      "import { ${2:Box}, ${2}Props } from \"@mui/joy\";",
       "",
-      "function ${TM_FILENAME_BASE}(props: ${TM_FILENAME_BASE}Props): JSX.Element {",
-      "  const { ...other } = props;",
+      "export function ${1:${TM_FILENAME_BASE/(^|-)(.)/${2:/upcase}/g}}(props: ${1}Props): JSX.Element {",
+      "  const { sx, ...other } = props;",
       "",
       "  return (",
-      "    <${1:import} {...other}>$0</${1:import}>",
+      "    <${2} sx={{ ...sx }} {...other}>$0</${2}>",
       "  );",
       "}",
       "",
-      "type ${TM_FILENAME_BASE}Props = Omit<${1:import}Props, \"children\">;",
-      "",
-      "export { ${TM_FILENAME_BASE} };",
+      "export type ${1}Props = Omit<${2}Props, \"children\">;",
       ""
     ],
     "description": "React Component"
   },
-  "Import": {
+  "ReactRoute": {
     "scope": "javascriptreact,typescriptreact",
-    "prefix": "imp",
-    "body": ["import { ${0} } from \"${1:@material-ui/icons}\";"],
-    "description": "Import"
+    "prefix": "route",
+    "body": [
+      "import { ${2:Box}, ${2}Props } from \"@mui/joy\";",
+      "",
+      "export const Component = function ${1:${TM_FILENAME_BASE/(^|-)(.)/${2:/upcase}/g}}(): JSX.Element {",
+      "  return (",
+      "    <${2}>$0</${2}>",
+      "  );",
+      "}",
+      ""
+    ],
+    "description": "React Route Component"
   }
 }

.vscode/settings.json

@@ -7,10 +7,14 @@
   "editor.tabSize": 2,
   "eslint.nodePath": ".yarn/sdks",
   "eslint.runtime": "node",
-  "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
+  "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "vitest.commandLine": "yarn vitest",
+  "files.associations": {
+    ".env.*.local": "properties",
+    ".env.*": "properties"
+  },
   "files.exclude": {
     "**/.cache": true,
     "**/.DS_Store": true,
@@ -44,6 +48,7 @@
     "browserslist",
     "cloudfunctions",
     "corejs",
+    "corepack",
     "endregion",
     "entrypoint",
     "envalid",

.yarn/sdks/eslint/lib/unsupported-api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/use-at-your-own-risk
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/use-at-your-own-risk your application uses
+module.exports = absRequire(`eslint/use-at-your-own-risk`);

.yarn/sdks/eslint/package.json

@@ -1,6 +1,14 @@
 {
   "name": "eslint",
-  "version": "8.48.0-sdk",
+  "version": "8.55.0-sdk",
   "main": "./lib/api.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "eslint": "./bin/eslint.js"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./lib/api.js",
+    "./use-at-your-own-risk": "./lib/unsupported-api.js"
+  }
 }

.yarn/sdks/prettier/bin/prettier.cjs

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/bin/prettier.cjs
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real prettier/bin/prettier.cjs your application uses
+module.exports = absRequire(`prettier/bin/prettier.cjs`);

.yarn/sdks/prettier/package.json

@@ -1,6 +1,7 @@
 {
   "name": "prettier",
-  "version": "3.0.3-sdk",
-  "main": "./index.js",
-  "type": "commonjs"
+  "version": "3.1.0-sdk",
+  "main": "./index.cjs",
+  "type": "commonjs",
+  "bin": "./bin/prettier.cjs"
 }

.yarn/sdks/typescript/lib/typescript.js

@@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/typescript.js
+    // Setup the environment to be able to require typescript
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real typescript/lib/typescript.js your application uses
-module.exports = absRequire(`typescript/lib/typescript.js`);
+// Defer to the real typescript your application uses
+module.exports = absRequire(`typescript`);

.yarn/sdks/typescript/package.json

@@ -1,6 +1,10 @@
 {
   "name": "typescript",
-  "version": "5.2.2-sdk",
+  "version": "5.3.2-sdk",
   "main": "./lib/typescript.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "tsc": "./bin/tsc",
+    "tsserver": "./bin/tsserver"
+  }
 }

.yarnrc.yml

@@ -9,4 +9,4 @@ packageExtensions:
     dependencies:
       happy-dom: ^10.11.2
 
-yarnPath: .yarn/releases/yarn-4.0.0-rc.50.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

README.md

@@ -30,7 +30,7 @@ Be sure to join our [Discord channel](https://discord.com/invite/2nKEnKq) for as
 
 `├──`[`.github`](.github) — GitHub configuration including CI/CD workflows<br>
 `├──`[`.vscode`](.vscode) — VSCode settings including code snippets, recommended extensions etc.<br>
-`├──`[`app`](./app) — Web application front-end built with [React](https://react.dev/) and [Material UI](https://mui.com/core/)<br>
+`├──`[`app`](./app) — Web application front-end built with [React](https://react.dev/) and [Joy UI](https://mui.com/joy-ui/getting-started/)<br>
 `├──`[`edge`](./edge) — Cloudflare Workers (CDN) edge endpoint<br>
 `├──`[`env`](./env) — Application settings, API keys, etc.<br>
 `├──`[`scripts`](./scripts) — Automation scripts such as `yarn deploy`<br>
@@ -39,7 +39,7 @@ Be sure to join our [Discord channel](https://discord.com/invite/2nKEnKq) for as
 
 ## Tech Stack
 
-- [React](https://react.dev/), [React Router](https://reactrouter.com/), [Recoil](https://recoiljs.org/), [Emotion](https://emotion.sh/), [Material UI](https://next.material-ui.com/), [Firebase Authentication](https://firebase.google.com/docs/auth)
+- [React](https://react.dev/), [React Router](https://reactrouter.com/), [Jotai](https://jotai.org/), [Emotion](https://emotion.sh/), [Joy UI](https://mui.com/joy-ui/getting-started/), [Firebase Authentication](https://firebase.google.com/docs/auth)
 - [Cloudflare Workers](https://workers.cloudflare.com/), [Vite](https://vitejs.dev/), [Vitest](https://vitejs.dev/),
   [TypeScript](https://www.typescriptlang.org/), [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [Yarn](https://yarnpkg.com/) with PnP
 
@@ -59,11 +59,12 @@ environment variables found in [`env/*.env`](./env/), and start hacking:
 ```
 $ git clone https://github.com/kriasoft/react-starter-kit.git example
 $ cd ./example
+$ corepack enable
 $ yarn install
-$ yarn start
+$ yarn workspace app start
 ```
 
-The app will become available at [http://localhost:5173/](http://localhost:5173/) (press `q` key to exit).
+The app will become available at [http://localhost:5173/](http://localhost:5173/) (press `q` + `Enter` to exit).
 
 **IMPORTANT**: Ensure that VSCode is using the workspace [version of TypeScript](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions)
 and ESLint.

app/README.md

@@ -2,14 +2,11 @@
 
 ## Directory Structure
 
-`├──`[`common`](./common) — Common (shared) React components<br>
+`├──`[`components`](./components) — UI elements<br>
 `├──`[`core`](./core) — Core modules, React hooks, customized theme, etc.<br>
-`├──`[`dialogs`](./dialogs) — React components implementing modal dialogs<br>
 `├──`[`icons`](./icons) — Custom icon React components<br>
-`├──`[`layout`](./layout) — Layout related components<br>
 `├──`[`public`](./public) — Static assets such as robots.txt, index.html etc.<br>
 `├──`[`routes`](./routes) — Application routes and page (screen) components<br>
-`├──`[`theme`](./theme) — Customized Material UI theme<br>
 `├──`[`global.d.ts`](./global.d.ts) — Global TypeScript declarations<br>
 `├──`[`index.html`](./index.html) — HTML page containing application entry point<br>
 `├──`[`index.tsx`](./index.tsx) — Single-page application (SPA) entry point<br>
@@ -35,7 +32,7 @@ $ yarn workspace app start
 ## References
 
 - https://react.dev/ — React.js documentation
-- https://mui.com/core/ — Material UI library documentation
+- https://mui.com/joy-ui/getting-started/ — Joy UI documentation
 - https://www.typescriptlang.org/ — TypeScript reference
 - https://vitejs.dev/ — Front-end tooling (bundler)
 - https://vitest.dev/ — Unit test framework

app/components/button-color-scheme.tsx

@@ -0,0 +1,72 @@
+/* SPDX-FileCopyrightText: 2014-present Kriasoft */
+/* SPDX-License-Identifier: MIT */
+
+import { DarkModeRounded, LightModeRounded } from "@mui/icons-material";
+import {
+  Dropdown,
+  IconButton,
+  IconButtonProps,
+  ListItemContent,
+  ListItemDecorator,
+  Menu,
+  MenuButton,
+  MenuItem,
+  useColorScheme,
+} from "@mui/joy";
+import { memo } from "react";
+
+export function ColorSchemeButton(props: ColorSchemeButtonProps): JSX.Element {
+  const { mode, systemMode } = useColorScheme();
+
+  return (
+    <Dropdown>
+      <MenuButton slots={{ root: IconButton }} slotProps={{ root: props }}>
+        {mode === "light" || (mode === "system" && systemMode === "light") ? (
+          <DarkModeRounded />
+        ) : (
+          <LightModeRounded />
+        )}
+      </MenuButton>
+
+      <Menu size="sm">
+        <ModeMenuItem mode="light" />
+        <ModeMenuItem mode="dark" />
+        <ModeMenuItem mode="system" />
+      </Menu>
+    </Dropdown>
+  );
+}
+
+const ModeMenuItem = memo(function ModeMenuItem({
+  mode,
+}: ModeMenuItemProps): JSX.Element {
+  const scheme = useColorScheme();
+
+  return (
+    <MenuItem
+      onClick={() => {
+        scheme.setMode(mode);
+      }}
+      selected={scheme.mode === mode}
+    >
+      <ListItemDecorator sx={{ ml: 0.5 }}>
+        {mode === "light" ||
+        (mode !== "dark" && scheme.systemMode === "light") ? (
+          <LightModeRounded />
+        ) : (
+          <DarkModeRounded />
+        )}
+      </ListItemDecorator>
+      <ListItemContent sx={{ pr: 2 }}>
+        {mode === "light"
+          ? "Light theme"
+          : mode === "dark"
+            ? "Dark theme"
+            : "Device default"}
+      </ListItemContent>
+    </MenuItem>
+  );
+});
+
+type ColorSchemeButtonProps = Omit<IconButtonProps, "children">;
+type ModeMenuItemProps = { mode: "dark" | "light" | "system" };