Configure web-app-serve

.eslintignore

@@ -1,2 +1,3 @@
 node_modules/
 build/
+generated/

.github/workflows/ci.yml

@@ -8,6 +8,7 @@ on:
 
 env:
   APP_TITLE: ${{ vars.APP_TITLE }}
+  APP_UNIFIED_API_ENDPOINT: ${{ vars.APP_UNIFIED_API_ENDPOINT }}
   GITHUB_WORKFLOW: true
 
 jobs:
@@ -51,29 +52,56 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Initialize types
+        run: pnpm initialize:type
+
       - name: Run knip
         run: pnpm lint:unused
-  lint-js:
-    name: Lint JS
-    environment: 'test'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
-        name: Install pnpm
+  # NOTE:we don't need it for now
+  # typecheck:
+  #   name: Typecheck
+  #   environment: 'test'
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - uses: actions/checkout@v4
+
+  #     - name: Install pnpm
+  #       uses: pnpm/action-setup@v4
+
+  #     - name: Install Node.js
+  #       uses: actions/setup-node@v4
+  #       with:
+  #         node-version: 20
+  #         cache: 'pnpm'
+
+  #     - name: Install dependencies
+  #       run: pnpm install
+
+  #     - name: Generate types
+  #       run: pnpm generate:type
+
+  #     - name: Lint Javascript
+  #       run: pnpm typecheck
+  # lint-js:
+  #   name: Lint JS
+  #   environment: 'test'
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - uses: actions/checkout@v4
+  #     - name: Install pnpm
+  #       uses: pnpm/action-setup@v4
+  #     - name: Install Node.js
+  #       uses: actions/setup-node@v4
+  #       with:
+  #         node-version: 20
+  #         cache: 'pnpm'
+  #     - name: Install dependencies
+  #       run: pnpm install
+
+  #     - name: Lint Javascript
+  #       run: pnpm lint:js
 
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Lint Javascript
-        run: pnpm lint:js
   css-lint:
     name: Lint CSS
     environment: 'test'
@@ -95,31 +123,10 @@ jobs:
 
       - name: Css Lint
         run: pnpm lint:css
-  typecheck:
-    name: Typecheck
-    environment: 'test'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        name: Install pnpm
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Lint Javascript
-        run: pnpm typecheck
   build:
     name: Build
     environment: 'test'
-    needs: [lint-js, css-lint, typecheck]
+    needs: [unused, css-lint]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

.github/workflows/publish-web-app-serve.yml

@@ -0,0 +1,23 @@
+name: Publish web app serve
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+      - feature/add-web-app-serve # NOTE Delete me later
+
+permissions:
+  packages: write
+
+jobs:
+  publish_image:
+    name: Publish Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Publish web-app-serve
+        uses: toggle-corp/[email protected]
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -29,3 +29,5 @@ build-ssr
 .env
 .eslintcache
 tsconfig.tsbuildinfo
+
+generated/

Dockerfile

@@ -4,11 +4,48 @@ RUN apt-get update -y \
     && apt-get install -y --no-install-recommends \
         git bash g++ make \
     && rm -rf /var/lib/apt/lists/* \
-    # NOTE: yarn > 1.22.19 breaks yarn-install invoked by pnpm
-    && npm install -g [email protected] [email protected] --force
+    && npm install -g [email protected] yarn@1.22.19 --force \
+    && git config --global --add safe.directory /code
 
-RUN npm install -g pnpm
+ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN --mount=type=bind,source=package.json,target=package.json \
+    corepack install && corepack enable
 
 WORKDIR /code
 
-RUN git config --global --add safe.directory /code
+# -------------------------- Builder ----------------------------------
+FROM dev AS builder
+
+COPY package.json pnpm-lock.yaml /code/
+
+RUN corepack prepare --activate
+
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
+    --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
+    pnpm install --frozen-lockfile
+
+COPY . /code/
+
+# -------------------------- Web app build -----------------------------
+
+FROM builder AS web-app-serve-build
+
+ENV APP_TITLE=TC-Unified-Notes
+ENV APP_UNIFIED_API_ENDPOINT=https://notes-api.local.togglecorp.com/
+
+
+RUN WEB_APP_SERVE_ENABLED=true pnpm build
+
+# Final image using web-app-serve
+FROM ghcr.io/toggle-corp/web-app-serve:v0.1.2 AS web-app-serve
+
+LABEL maintainer="Togglecorp"
+LABEL org.opencontainers.image.source="https://github.com/toggle-corp/tc-unified-notes"
+
+ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
+
+COPY --from=web-app-serve-build /code/build "$APPLY_CONFIG__SOURCE_DIRECTORY"

docker-compose.yml

@@ -1,11 +1,14 @@
+name: tc-unified-notes
+
 services:
   react:
     build:
       context: ./
       target: dev
     command: sh -c 'pnpm install && pnpm start --host'
     environment:
-      APP_TITLE: ${APP_TITLE:-TC Global Notes}
+      APP_TITLE: ${APP_TITLE:-Unified Notes}
+      APP_UNIFIED_API_ENDPOINT: ${APP_UNIFIED_API_ENDPOINT:-https://notes-api.local.togglecorp.com/}
     volumes:
       - .:/code
     ports:

env.ts

@@ -1,9 +1,23 @@
 import {
     defineConfig,
+    overrideDefineForWebAppServe,
     Schema,
 } from '@julr/vite-plugin-validate-env';
 
+const webAppServeEnabled = process.env.WEB_APP_SERVE_ENABLED?.toLowerCase() === 'true';
+if (webAppServeEnabled) {
+    // eslint-disable-next-line no-console
+    console.warn('Building application for web-app-serve');
+}
+const overrideDefine = webAppServeEnabled
+    ? overrideDefineForWebAppServe
+    : undefined;
+
 export default defineConfig({
-    APP_TITLE: Schema.string(),
-    APP_UNIFIED_ENDPOINT: Schema.string.optional(),
+    overrideDefine,
+    validator: 'builtin',
+    schema: {
+        APP_TITLE: Schema.string(),
+        APP_UNIFIED_API_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
+    },
 });

knip.json

@@ -1,13 +1,14 @@
 {
     "$schema": "https://unpkg.com/knip@5/schema.json",
     "entry": [
-        "src/**/*.test.ts",
         "src/**/*.test.tsx",
         "src/index.tsx!"
     ],
+    "ignoreDependencies": [
+        "openapi-typescript"
+    ],
     "project": [
         "src/**/*.d.ts",
-        "src/**/*.test.ts",
         "src/**/*.test.tsx",
         "src/**/*.tsx!",
         "src/**/*.ts!"

package.json

@@ -4,40 +4,51 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
+        "initialize:type": "mkdir -p generated/ && pnpm initialize:type:unified",
+        "initialize:type:unified": "test -f ./generate/types/ts && true || cp types.stub.ts ./generated/types.ts",
+        "generate:type": "dotenv -- cross-var openapi-typescript \"%APP_UNIFIED_API_ENDPOINT%openapi.json\" -o ./generated/types.ts --alphabetize",
+        "prestart": "pnpm initialize:type",
         "start": "vite",
+        "prebuild": "pnpm initialize:type",
         "build": "vite build",
         "test": "vitest",
         "coverage": "vitest run --coverage",
+        "pretypecheck": "pnpm initialize:type",
         "typecheck": "tsc",
-        "lint": "pnpm lint:js && pnpm lint:css",
+        "lint": "pnpm lint:js && pnpm lint:css && pnpm lint:unused",
         "lint:fix": "pnpm lint:js --fix && pnpm lint:css --fix",
+        "prelint:js": "pnpm initialize:type",
         "lint:js": "eslint src",
         "lint:css": "stylelint \"./src/**/*.css\"",
         "lint:unused": "knip --tags=-knipignore",
         "postinstall": "patch-package"
     },
     "engines": {
         "node": "20",
-        "pnpm": "8.15.9"
+        "pnpm": "10.6.1"
     },
     "dependencies": {
-        "@julr/vite-plugin-validate-env": "^1.1.1",
+        "@julr/vite-plugin-validate-env": "git+https://github.com/toggle-corp/vite-plugin-validate-env#v2.2.0-tc.1",
         "@togglecorp/fujs": "^2.0.0",
+        "@togglecorp/toggle-form": "^2.0.4",
         "@togglecorp/toggle-request": "1.0.0-beta.3",
-        "@togglecorp/toggle-ui": "^0.18.3",
+        "@ifrc-go/ui": "1.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "5.5.0",
         "react-router-dom": "^6.11.1"
     },
     "devDependencies": {
         "@types/node": "^20.1.3",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
-        "@typescript-eslint/eslint-plugin": "^7.1.1",
-        "@typescript-eslint/parser": "^7.1.1",
+        "@typescript-eslint/eslint-plugin": "^8.30.1",
+        "@typescript-eslint/parser": "^8.30.1",
         "@vitejs/plugin-react-swc": "^3.0.0",
         "@vitest/coverage-v8": "^2.1.3",
         "autoprefixer": "^10.4.14",
+        "cross-var": "^1.1.0",
+        "dotenv-cli": "^7.4.2",
         "eslint": "^8.40.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-import-resolver-typescript": "^3.5.5",
@@ -50,6 +61,7 @@
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "happy-dom": "^13.6.2",
         "knip": "^5.33.3",
+        "openapi-typescript": "6.5.5",
         "patch-package": "^8.0.0",
         "postcss": "^8.3.0",
         "postcss-nested": "^6.0.1",
@@ -60,7 +72,7 @@
         "stylelint-config-recommended": "^14.0.0",
         "stylelint-no-unused-selectors": "git+https://github.com/toggle-corp/stylelint-no-unused-selectors#e0831e1",
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
-        "typescript": "^5.0.4",
+        "typescript": "^5.5.2",
         "vite": "^5.1.5",
         "vite-plugin-checker": "^0.6.0",
         "vite-plugin-compression2": "^1.0.0",
@@ -69,5 +81,5 @@
         "vite-tsconfig-paths": "^4.2.0",
         "vitest": "^1.3.1"
     },
-    "packageManager": "pnpm@8.15.9"
+    "packageManager": "pnpm@10.6.1+sha512.40ee09af407fa9fbb5fbfb8e1cb40fbb74c0af0c3e10e9224d7b53c7658528615b2c92450e74cfad91e3a2dcafe3ce4050d80bda71d757756d2ce2b66213e9a3"
 }