initial

.devcontainer.json

@@ -0,0 +1,50 @@
+{
+    "customizations": {
+      "vscode": {
+        "extensions": [
+          "visualstudioexptteam.vscodeintellicode",
+          "github.vscode-pull-request-github",
+          "redhat.vscode-yaml",
+          "davidanson.vscode-markdownlint",
+          "bierner.markdown-mermaid",
+          "streetsidesoftware.code-spell-checker",
+          "dbaeumer.vscode-eslint",
+          "ms-python.python",
+          "ms-python.debugpy",
+          "ms-python.pylint",
+          "ms-python.isort",
+          "ms-python.vscode-pylance",
+          "ms-python.mypy-type-checker",
+          "ms-python.black-formatter",
+          "qwtel.sqlite-viewer",
+          "njpwerner.autodocstring",
+          "tamasfe.even-better-toml",
+          "github.vscode-github-actions",
+          "codecov.codecov",
+          "ritwickdey.liveserver",
+          "esbenp.prettier-vscode"
+        ]
+      }
+    },
+    "dockerComposeFile": [
+      "./docker-compose.yml"
+    ],
+    "features": {
+      "ghcr.io/devcontainers-contrib/features/pipenv:2": {
+        "version": "2023.11.15"
+      },
+      "ghcr.io/devcontainers/features/node:1": {
+        "version": "18"
+      },
+      "ghcr.io/devcontainers/features/python:1": {
+        "installTools": false,
+        "version": "3.8"
+      }
+    },
+    "name": "portal-frontend",
+    "postCreateCommand": "./setup",
+    "remoteUser": "root",
+    "service": "base-service",
+    "shutdownAction": "none",
+    "workspaceFolder": "/workspace/codeforlife-portal-frontend"
+  }

.eslintrc.json

@@ -0,0 +1,47 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "react-app",
+    "plugin:react/jsx-runtime",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": true,
+    "tsconfigRootDir": "./"
+  },
+  "plugins": ["@typescript-eslint"],
+  "root": true,
+  "ignorePatterns": ["dist"],
+  "rules": {
+    "@typescript-eslint/consistent-type-imports": [
+      2,
+      {
+        "fixStyle": "separate-type-imports"
+      }
+    ],
+    "@typescript-eslint/no-restricted-imports": [
+      2,
+      {
+        "paths": [
+          {
+            "name": "react-redux",
+            "importNames": ["useSelector", "useStore", "useDispatch"],
+            "message": "Please use pre-typed versions from `src/app/hooks.ts` instead."
+          }
+        ]
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["*.{c,m,}{t,j}s", "*.{t,j}sx"]
+    },
+    {
+      "files": ["*{test,spec}.{t,j}s?(x)"],
+      "env": {
+        "jest": true
+      }
+    }
+  ]
+}

.github/workflows/main.yml

@@ -0,0 +1,11 @@
+name: Main
+
+on:
+  push:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  test-frontend:
+    uses: ocadotechnology/codeforlife-workspace/.github/workflows/test-javascript-code.yaml@configure_js_services # TODO: set to @main
+    secrets: inherit

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "arrowParens": "avoid"
+}

README.md

@@ -1 +1,27 @@
-# codeforlife-portal-frontend
+# vite-template-redux
+
+Uses [Vite](https://vitejs.dev/), [Vitest](https://vitest.dev/), and [React Testing Library](https://github.com/testing-library/react-testing-library) to create a modern [React](https://react.dev/) app compatible with [Create React App](https://create-react-app.dev/)
+
+```sh
+npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
+```
+
+## Goals
+
+- Easy migration from Create React App or Vite
+- As beginner friendly as Create React App
+- Optimized performance compared to Create React App
+- Customizable without ejecting
+
+## Scripts
+
+- `dev`/`start` - start dev server and open browser
+- `build` - build for production
+- `preview` - locally preview production build
+- `test` - launch test runner
+
+## Inspiration
+
+- [Create React App](https://github.com/facebook/create-react-app/tree/main/packages/cra-template)
+- [Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react)
+- [Vitest](https://github.com/vitest-dev/vitest/tree/main/examples/react-testing-lib)

codeforlife.code-workspace

@@ -0,0 +1,14 @@
+{
+    "folders": [
+      {
+        "name": "portal-frontend",
+        "path": "."
+      }
+    ],
+    "settings": {
+      "autoDocstring.customTemplatePath": ".vscode/extensions/autoDocstring/docstring.mustache",
+      "workbench.colorCustomizations": {
+        "editorRuler.foreground": "#008000"
+      }
+    }
+  }

docker-compose.yml

@@ -0,0 +1,9 @@
+# https://github.com/devcontainers
+version: '1'
+services:
+  base-service:
+    image: mcr.microsoft.com/devcontainers/base:ubuntu-22.04
+    volumes:
+      # Mount the root folder that contains .git
+      - .:/workspace:cached
+    command: sleep infinity

index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Redux App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "portal",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "format": "prettier --write .",
+    "format:check": "prettier --check --write=false .",
+    "lint": "eslint --max-warnings=0 .",
+    "lint:fix": "eslint --fix .",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-istanbul": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "jsdom": "^23.2.0",
+    "prettier": "^3.2.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0"
+  }
+}

setup

@@ -0,0 +1,9 @@
+#!/bin/bash
+set -e
+
+cd "${BASH_SOURCE%/*}"
+
+printf "Setting up Node.js environment\n\n"
+
+# TODO: fix dependencies in package.json. Ignore NODE_ENV for now.
+yarn install --production=false

src/App.css

@@ -0,0 +1,39 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-float infinite 3s ease-in-out;
+  }
+}
+
+.App-header {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+.App-link {
+  color: rgb(112, 76, 182);
+}
+
+@keyframes App-logo-float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(10px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}