Merge branch 'main' into 16-adding-tests

.devcontainer/devcontainer.json

@@ -1,12 +1,40 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/python
+// README at: https://github.com/devcontainers/templates/tree/main/src/debian
 {
-	"name": "Python 3",
+	"name": "mandr",
 	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/python:1-3.12-bookworm",
+	"image": "mcr.microsoft.com/devcontainers/base:bookworm",
 	"features": {
-		"ghcr.io/devcontainers-contrib/features/ruff:1": {},
-		"ghcr.io/hspaans/devcontainer-features/pytest:1": {}
+		"ghcr.io/devcontainers/features/dotnet:2": {
+			"version": "latest"
+		},
+		"ghcr.io/devcontainers/features/node:1": {
+			"nodeGypDependencies": true,
+			"installYarnUsingApt": true,
+			"version": "lts",
+			"nvmVersion": "latest"
+		},
+		"ghcr.io/devcontainers/features/python:1": {
+			"installTools": true,
+			"installJupyterlab": true,
+			"version": "3.12"
+		}
+	},
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"samuelcolvin.jinjahtml",
+				"tamasfe.even-better-toml",
+				"ms-toolsai.jupyter",
+				"ms-vsliveshare.vsliveshare",
+				"ms-python.mypy-type-checker",
+				"esbenp.prettier-vscode",
+				"stylelint.vscode-stylelint",
+				"charliermarsh.ruff",
+				"vitest.explorer",
+				"Vue.volar"
+			]
+		}
 	}
 
 	// Features to add to the dev container. More info: https://containers.dev/features.
@@ -15,9 +43,6 @@
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	// "forwardPorts": [],
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "pip3 install --user -r requirements.txt",
-
 	// Configure tool-specific properties.
 	// "customizations": {},
 

.github/workflows/lint-and-test.yml

@@ -22,9 +22,19 @@ jobs:
         run: |
           python -m pip install --upgrade pip
           python -m pip install -e . -r requirements.txt -r requirements-test.txt
+          cd frontend && npm install
       - name: Lint with pre-commit
         run: |
           pre-commit run --all-files
+      - name: Build SPA
+        run: |
+          cd frontend
+          npm run build
+          cp -a dist/. ../src/mandr/dashboard/static
       - name: Test with pytest
         run: |
           python -m pytest tests
+      - name: Test with vitest
+        run: |
+          cd frontend
+          npm run test:unit

.pre-commit-config.yaml

@@ -1,31 +1,50 @@
 # See https://pre-commit.com for more information
 # See https://pre-commit.com/hooks.html for more hooks
 repos:
--   repo: https://github.com/pre-commit/pre-commit-hooks
+  - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v3.2.0
     hooks:
-    -   id: check-yaml
-    -   id: check-toml
-    -   id: check-added-large-files
-    -   id: check-merge-conflict
-    -   id: detect-private-key
-    -   id: end-of-file-fixer
-    -   id: trailing-whitespace
+      - id: check-yaml
+      - id: check-toml
+      - id: check-added-large-files
+      - id: check-merge-conflict
+      - id: detect-private-key
+      - id: end-of-file-fixer
+      - id: trailing-whitespace
 
--   repo: https://github.com/crate-ci/typos
+  - repo: https://github.com/crate-ci/typos
     rev: v1.21.0
     hooks:
-    -    id: typos
+      - id: typos
 
--   repo: https://github.com/astral-sh/ruff-pre-commit
+  - repo: https://github.com/astral-sh/ruff-pre-commit
     # Ruff version.
     rev: v0.3.7
     hooks:
-    # Run the linter.
-    -    id: ruff
-    # Comment to disable autofix:
-         args: [ --fix ]
-    # Run the formatter.
-    - id: ruff-format
+      # Run the linter.
+      - id: ruff
+        # Comment to disable autofix:
+        args: [--fix]
+      # Run the formatter.
+      - id: ruff-format
+
+  - repo: local
+    hooks:
+      - id: tsc
+        language: node
+        name: Use vue-tsc to typecheck frontend code.
+        entry: bash -c "cd frontend && npm run type-check"
+      - id: eslint
+        language: node
+        name: Use eslint to lint frontend code.
+        entry: bash -c "cd frontend && npm run lint"
+      - id: prettier
+        language: node
+        name: Use prettier to format frontend code.
+        entry: bash -c "cd frontend && npm run format"
+      - id: stylelint
+        language: node
+        name: Use stylelint to lint CSS.
+        entry: bash -c "cd frontend && npm run style-lint"
 
 exclude: '.*\.min\.js'

Makefile

@@ -8,4 +8,16 @@ install:
 
 check-wip:
 	pre-commit run --all-files
-    python -m pytest tests
+	python -m pytest tests
+
+serve-api:
+	python -m uvicorn mandr.dashboard.webapp:app --reload --reload-dir src --host 0.0.0.0 --timeout-graceful-shutdown 0
+
+build-frontend:
+	# build the SPA
+	cd frontend && npm install
+	cd frontend && npm run build
+	# empty app static folder except gitignore
+	find src/mandr/dashboard/static -mindepth 1 -maxdepth 1 ! -name ".gitignore" -exec rm -r -- {} +
+	cp -a frontend/dist/. src/mandr/dashboard/static
+	rm -rf frontend/dist

frontend/.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

frontend/.gitignore

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

frontend/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "trailingComma": "es5"
+}

frontend/.stylelintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-recommended-vue",
+    "stylelint-config-idiomatic-order"
+  ],
+  "plugins": ["stylelint-order"]
+}

frontend/README.md

@@ -0,0 +1,24 @@
+# Dashboard
+
+This sub directory aims at creating a single page application supporting Mandr.
+
+It should build as a SPA and as a library of web components.
+
+## Useful commands
+
+| command             | action                                            |
+|---------------------|---------------------------------------------------|
+| `npm install`       | install depdendecies                              |
+| `npm run dev`       | compile and hot-reload for development            |
+| `npm run build`     | type-check, compile and minify for production     |
+| `npm run test:unit` | run unit tests with [vitest](https://vitest.dev/) |
+| `npm run lint`      | lint with [ESLint](https://eslint.org/)           |
+
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

frontend/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <meta name="theme-color" content="#1E22AA">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>:mandr.</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>