Design Tokens

.github/workflows/ci.yml

@@ -8,6 +8,8 @@ on:
 
 env:
   APP_TITLE: ${{ vars.APP_TITLE }}
+  APP_GRAPHQL_CODEGEN_ENDPOINT: ${{ vars.APP_GRAPHQL_CODEGEN_ENDPOINT }}
+  APP_GRAPHQL_ENDPOINT: ${{ vars.APP_GRAPHQL_ENDPOINT }}
   GITHUB_WORKFLOW: true
 
 jobs:
@@ -37,6 +39,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          submodules: true
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -51,13 +55,15 @@ jobs:
         run: pnpm install
 
       - name: Run knip
-        run: pnpm lint:unused
+        run: pnpm generate:type && pnpm lint:unused
   lint-js:
     name: Lint JS
     environment: 'test'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          submodules: true
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -100,6 +106,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          submodules: true
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -122,6 +130,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          submodules: true
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm

.gitignore

@@ -7,7 +7,10 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+
 node_modules
+generated
+.pnpm-store
 dist
 dist-ssr
 build

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "backend"]
+	path = backend
+	url = [email protected]:toggle-corp/ai-chatbot-backend.git

.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

Dockerfile

@@ -2,10 +2,10 @@ FROM node:18-bullseye
 
 RUN apt-get update -y \
     && apt-get install -y --no-install-recommends \
-        git bash g++ make \
+        git bash g++ make iproute2 \
     && rm -rf /var/lib/apt/lists/*
 
-RUN npm install pnpm
+RUN npm install -g pnpm
 
 WORKDIR /code
 

codegen.ts

@@ -0,0 +1,20 @@
+import { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+    schema: process.env.APP_GRAPHQL_CODEGEN_ENDPOINT,
+    documents: [
+        'src/**/*.tsx',
+        'src/**/*.ts',
+    ],
+    ignoreNoDocuments: true, // for better experience with the watcher
+    generates: {
+        './generated/types/': {
+            preset: 'client',
+        },
+    },
+    config: {
+        enumsAsTypes: true,
+    },
+};
+
+export default config;

docker-compose-with-backend.yml

@@ -0,0 +1,16 @@
+name: chatbot
+
+services:
+  react:
+    build: ../
+    command: sh -c 'pnpm install && pnpm start --host'
+    environment:
+      APP_TITLE: ${APP_TITLE:-CMS}
+      APP_GRAPHQL_ENDPOINT: ${APP_GRAPHQL_ENDPOINT:-http://localhost:8001/graphql/}
+      APP_GRAPHQL_CODEGEN_ENDPOINT: ${APP_GRAPHQL_CODEGEN_ENDPOINT:-http://web:8001/graphql/}
+    volumes:
+      - ../:/code
+    ports:
+      - '3000:3000'
+    depends_on:
+      - web

env.ts

@@ -4,6 +4,6 @@ import {
 } from '@julr/vite-plugin-validate-env';
 
 export default defineConfig({
+    COMPOSE_FILE: Schema.string.optional(),
     APP_TITLE: Schema.string.optional(),
-    GRAPHQL_ENDPOINT: Schema.string.optional(),
 });

index.html

@@ -21,7 +21,27 @@
         <title>
             %APP_TITLE%
         </title>
-        <link href="https://api.fontshare.com/v2/css?f[]=nunito@300,700,400&f[]=bebas-neue@400&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Assistant:[email protected]&display=swap" rel="stylesheet">
+        <style>
+            html, body {
+                margin: 0;
+                padding: 0;
+            }
+
+            body {
+                font-family: "Manrope", sans-serif;
+                font-optical-sizing: auto;
+                font-weight: 400;
+                font-style: normal;
+            }
+
+            @media screen {
+                body {
+                    background-color: #F5FAFF;
+                }
+            }
+        </style>
     </head>
     <body>
         <noscript>

package.json

@@ -10,6 +10,14 @@
         "preview": "vite preview",
         "test": "vitest",
         "coverage": "vitest run --coverage",
+        "initialize": "mkdir -p generated/types && yes n | cp -i type.template.tsx generated/types/graphql 2>/dev/null",
+        "prelint": "pnpm initialize",
+        "pretypecheck": "pnpm initialize",
+        "prebuild": "pnpm initialize",
+        "prestart": "pnpm initialize",
+        "get-hostname": "ip route | awk '/default/ { print $3 }'",
+        "replace-localhost": "awk \"{sub(/localhost/, \\\"$(pnpm -s get-hostname)\\\")}1\"",
+        "generate:type": "APP_GRAPHQL_CODEGEN_ENDPOINT=$(echo $APP_GRAPHQL_CODEGEN_ENDPOINT | pnpm -s replace-localhost) graphql-codegen --require dotenv/config --config codegen.ts",
         "typecheck": "tsc",
         "lint": "pnpm lint:js && pnpm lint:css",
         "lint:fix": "pnpm lint:js --fix && pnpm lint:css --fix",
@@ -28,6 +36,9 @@
         "react-router-dom": "^6.11.1"
     },
     "devDependencies": {
+        "@graphql-codegen/cli": "^5.0.2",
+        "@graphql-codegen/client-preset": "^4.3.3",
+        "@graphql-typed-document-node/core": "^3.2.0",
         "@types/node": "^20.1.3",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
@@ -36,6 +47,7 @@
         "@vitejs/plugin-react-swc": "^3.0.0",
         "@vitest/coverage-v8": "^2.1.3",
         "autoprefixer": "^10.4.14",
+        "dotenv": "^16.4.5",
         "eslint": "^8.40.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-import-resolver-typescript": "^3.5.5",