Final Project setup: Design tokens, docker, knip, codegen

.github/workflows/ci.yml

@@ -8,11 +8,14 @@ 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:
   test:
     name: Run tests
+    environment: 'test'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -37,6 +40,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          submodules: true
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -58,6 +63,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          submodules: true
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -100,6 +107,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          submodules: true
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -122,6 +131,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

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

README.md

@@ -2,9 +2,92 @@
 
 The AI chatbot will be white-labeled, allowing for full customization to meet the needs of any company. The chatbot will be integrated with Facebook Messenger, WhatsApp, and a custom chat window that can be embedded into company websites.
 
-Useful Resources and Links
+## Built with
+[![React][react-shields]][react-url] [![Vite][vite-shields]][vite-url] [![Typescript][typescript-shields]][typescript-url]
 
-* Board board: https://github.com/orgs/toggle-corp/projects/36
-* Timeline: 
-* Figma: 
-* Local Deployment: 
+## Getting started
+
+Below are the steps to guide you through preparing your local enviroment for the AI CHATBOT CMS. Before diving into setup please look into the concept of [Github Sub Modules](https://github.blog/open-source/git/working-with-submodules/), [Docker Merge](https://docs.docker.com/compose/how-tos/multiple-compose-files/merge/).
+
+### Prerequisites
+
+To begin, ensure you have network access. Then, you'll need the following:
+
+1. [Git](https://git-scm.com/)
+2. [Node.JS](https://nodejs.org/en/) version >=18 / 20+
+3. [Pnpm](https://pnpm.io/)
+4. Alternatively, you can use [Docker](https://www.docker.com/) to build the application.
+
+### Local development (with docker)
+
+Clone the repository using HTTPS, SSH, or Github CLI
+```bash
+git clone https://github.com/toggle-corp/ai-chatbot-cms.git #HTTPS
+git clone [email protected]:toggle-corp/ai-chatbot-cms.git #SSH
+gh repo clone toggle-corp/ai-chatbot-cms #Github CLI
+```
+Download the contents of backend(ai-chatbot-backend)
+```bash
+git submodule update --init --recursive
+```
+Update Environment variables
+* create .env file and add COMPOSE_FILE variable for the ai-chatbot-cms
+```bash
+touch .env
+```
+* Copy env.example to .env and update the variables for the backend
+```bash
+cd backend
+cp env.example .env
+```
+> NOTE: The backend has a higher priority than the ai-chatbot-cms. You can add backend environment variables in the CMS, but you must create a .env file in the backend for them to work.
+
+Build the docker image
+```bash
+docker compose build
+```
+Start the development server
+```bash
+docker compose up
+```
+Install the dependencies
+```bash
+docker compose exec react bash -c 'pnpm install'
+```
+Generate type
+```bash
+docker compose exec react bash -c 'pnpm generate:type'
+```
+### Local development (without docker)
+
+Same steps upto downloading the contents of backend
+
+Update Enviroment variables
+
+* create .env file and add COMPOSE_FILE and other variable for the ai-chatbot-cms
+```bash
+touch .env
+```
+> NOTE: Copy the env variables from the docker compose file in environment section
+
+Install the dependencies
+```bash
+pnpm install
+```
+Generate type
+```bash
+pnpm generate:type
+```
+Start the development server
+```bash
+pnpm start
+```
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+[react-shields]: https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB
+[react-url]: https://reactjs.org/
+[vite-shields]: https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white
+[vite-url]: https://vitejs.dev/
+[typescript-shields]: https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white
+[typescript-url]: https://www.typescriptlang.org/

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:-./backend/schema.graphql}
+    volumes:
+      - ../:/code
+    ports:
+      - '3000:3000'
+    depends_on:
+      - web

env.ts

@@ -4,6 +4,9 @@ import {
 } from '@julr/vite-plugin-validate-env';
 
 export default defineConfig({
-    APP_TITLE: Schema.string.optional(),
-    GRAPHQL_ENDPOINT: Schema.string.optional(),
+    // NOTE: We need to replace with URL
+    APP_GRAPHQL_ENDPOINT: Schema.string(),
+
+    // NOTE: It is not used for now
+    APP_TITLE: Schema.string(),
 });

index.html

@@ -21,7 +21,26 @@
         <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=Assistant:wght@300;400;600;700&family=Manrope:wght@300;400;600;700&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>

knip.jsonc

@@ -0,0 +1,18 @@
+{
+    "$schema": "https://unpkg.com/knip@5/schema.json",
+    /* NOTE: It is ignored because some of the files and types inside the generated will not be used but needed. */
+    "ignore": ["generated/**/*.ts"],
+    "entry": [
+        "src/index.tsx!",
+        "src/**/*.test.ts",
+        "src/**/*.test.tsx"
+    ],
+    "project": [
+        "src/**/*.tsx!",
+        "src/**/*.ts!",
+        "src/**/*.d.ts",
+        "src/**/*.test.ts",
+        "src/**/*.test.tsx",
+        "generated/**/*.ts"
+    ]
+}

package.json

@@ -4,30 +4,37 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
+        "generate:type": "graphql-codegen --require dotenv/config --config codegen.ts",
+        "prestart": "pnpm generate:type",
         "start": "vite",
-        "dev": "vite",
+        "prebuild": "pnpm generate:type",
         "build": "vite build",
-        "preview": "vite preview",
-        "test": "vitest",
-        "coverage": "vitest run --coverage",
+        "pretypecheck": "pnpm generate:type",
         "typecheck": "tsc",
-        "lint": "pnpm lint:js && pnpm lint:css",
-        "lint:fix": "pnpm lint:js --fix && pnpm lint:css --fix",
+        "prelint:unused": "pnpm generate:type",
+        "lint:unused": "knip --no-gitignore --tags=-knipignore",
+        "prelint:js": "pnpm generate:type",
         "lint:js": "eslint src",
         "lint:css": "stylelint \"./src/**/*.css\"",
-        "lint:unused": "knip --tags=-knipignore",
+        "lint": "pnpm lint:js && pnpm lint:css",
+        "lint:fix": "pnpm lint:js --fix && pnpm lint:css --fix",
+        "test": "vitest",
+        "test:coverage": "vitest run --coverage",
         "postinstall": "patch-package"
     },
     "dependencies": {
         "@apollo/client": "^3.11.8",
-        "@togglecorp/fujs": "^2.0.0",
+        "@graphql-typed-document-node/core": "^3.2.0",
         "@julr/vite-plugin-validate-env": "^1.1.1",
+        "@togglecorp/fujs": "^2.0.0",
         "graphql": "^16.9.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.11.1"
     },
     "devDependencies": {
+        "@graphql-codegen/cli": "^5.0.2",
+        "@graphql-codegen/client-preset": "^4.3.3",
         "@types/node": "^20.1.3",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
@@ -36,6 +43,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",