[#39] feature / build : automate integration flow of frontend app (PR…

…#41)

- dependency installation
- run linter `eslint` for syntax check
- build `next.js` application
- configure continuous-integration flow with GtiHub Action
- update `frontend/README.md`

.github/workflows/frontend_ci.yml

@@ -0,0 +1,78 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/frontend/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/frontend/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+          cache-dependency-path: ${{ github.workspace }}/frontend/package-lock.json
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            frontend/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: |
+          cd frontend
+          ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Lint
+        run: |
+          cd frontend
+          ${{ steps.detect-package-manager.outputs.manager }}  run lint_exp
+      - name: Build with Next.js
+        run: |
+          cd frontend
+          ${{ steps.detect-package-manager.outputs.runner }} next build
+

frontend/.babelrc.bak

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": []
+}

frontend/.eslintrc.json

@@ -1,3 +1,20 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"]
-}
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "settings": {
+    "next": {
+      "rootDir": "frontend/"
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off"
+  }
+}

frontend/.lintstagedrc.js

@@ -0,0 +1,10 @@
+const path = require('path')
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
+}

frontend/README.md

@@ -1,36 +1,49 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Pandemic Reign of Cthulhu
 
-## Getting Started
+This is the frontend repo of pandemic reign of cthulhu,
+written in next.js 13
+
+## Project Structure
+In next.js 13, pages are put under /app.
+- the app dir root layout is required
+- each route is defined by
+- - nested folder under app
+- - page.js to make the route publicly accessible
 
-First, run the development server:
+- assets
+- - here puts the assets use in the frontend game app
+- - categorized by type (e.g. investigator, clue-card, etc)
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+- components
+- - common components that are used in the app
+- - including investigator card, clue card, the old ones card, etc
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- modules (if needed)
+- - put the module used only for a certain page in here
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+- shared
+- - put the commonly used constants, type, interface here
+- - can also consider putting common state management here (e.g. jotai)
+
+## Getting Started
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+### How to run the app in local
+Example of environment variables will be put as env-file in the directory.
+If such file exists, please ensure that the environment variables are set up first before use.
 
-## Learn More
+1. install dependencies
+```npm run install```
 
-To learn more about Next.js, take a look at the following resources:
+2. run development server
+```npm run dev```
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+The app should be running on http://localhost:3000
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+/design serves as a design system page for components reference
 
-## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### How to fix lint
+``` npm run lint ```
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+### How to build
+``` npm run build```

frontend/components/investigator-card/index.tsx

@@ -13,7 +13,7 @@ export const InvestigatorCard = ({ investigator, sane }: Props) => {
   const sanity = sane ? "sane" : "insane";
   const image = useMemo(() => {
     return INVESTIGATOR_IMAGE_MAPPING[`${investigator}-${sanity}`];
-  }, [investigator, sane]);
+  }, [investigator, sanity]);
 
   const sanitySign = useMemo(() => { return SANITY_SIGN_MAPPING[sanity] }, [sanity]);
 

frontend/eslintrc.bak

@@ -0,0 +1,12 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'next',
+  ],
+  rules: {
+    // Add your project-specific ESLint rules here
+  },
+};