pre commit hooks setup

.pre-commit-config.yaml

@@ -1,31 +1,46 @@
 # 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 dashboard && npm run type-check"
+      - id: eslint
+        language: node
+        name: Use eslint to lint frontend code.
+        entry: bash -c "cd dashboard && npm run lint"
+      - id: prettier
+        language: node
+        name: Use prettier to format frontend code.
+        entry: bash -c "cd dashboard && npm run format"
 
 exclude: '.*\.min\.js'

Makefile

@@ -6,5 +6,5 @@ install:
 	python -m pip install -e . -r requirements.txt -r requirements-test.txt
 	pre-commit install
 
-run-dashboard-api:
+serve-dashboard-api:
 	python -m uvicorn mandr.dashboard.webapp:app --reload --reload-dir src --host 0.0.0.0 --timeout-graceful-shutdown 0

dashboard/.prettierrc.json

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

dashboard/src/App.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView } from "vue-router";
 </script>
 
 <template>
   <header>
-    <nav>
-    </nav>
+    <nav></nav>
   </header>
 
   <RouterView />

dashboard/src/assets/styles/main.css

@@ -1,3 +1,3 @@
-@import './_reset.css';
-@import './_variables.css';
-@import './_typography.css';
+@import "./_reset.css";
+@import "./_variables.css";
+@import "./_typography.css";

dashboard/src/components/FileTree.vue

@@ -1,10 +1,7 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <div class="file-tree">
-    file tree
-  </div>
+  <div class="file-tree">file tree</div>
 </template>
 
 <style scoped></style>

dashboard/src/components/__tests__/FileTree.spec.ts

@@ -1,11 +1,11 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect } from "vitest";
 
-import { mount } from '@vue/test-utils'
+import { mount } from "@vue/test-utils";
 import FileTree from "../FileTree.vue";
 
-describe('HelloWorld', () => {
-  it('renders properly', () => {
-    const wrapper = mount(FileTree)
-    expect(wrapper.text()).toContain('Hey')
-  })
-})
+describe("HelloWorld", () => {
+  it("renders properly", () => {
+    const wrapper = mount(FileTree);
+    expect(wrapper.text()).toContain("Hey");
+  });
+});

dashboard/src/main.ts

@@ -1,14 +1,14 @@
-import './assets/styles/main.css'
+import "./assets/styles/main.css";
 
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import { createApp } from "vue";
+import { createPinia } from "pinia";
 
-import App from './App.vue'
-import router from './router'
+import App from "./App.vue";
+import router from "./router";
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(createPinia())
-app.use(router)
+app.use(createPinia());
+app.use(router);
 
-app.mount('#app')
+app.mount("#app");

dashboard/src/router/index.ts

@@ -1,15 +1,15 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-import DashboardView from '../views/DashboardView.vue'
+import { createRouter, createWebHashHistory } from "vue-router";
+import DashboardView from "../views/DashboardView.vue";
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'home',
-      component: DashboardView
-    }
-  ]
-})
+      path: "/",
+      name: "home",
+      component: DashboardView,
+    },
+  ],
+});
 
-export default router
+export default router;

dashboard/src/stores/counter.ts

@@ -1,12 +1,12 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
 
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
+export const useCounterStore = defineStore("counter", () => {
+  const count = ref(0);
+  const doubleCount = computed(() => count.value * 2);
   function increment() {
-    count.value++
+    count.value++;
   }
 
-  return { count, doubleCount, increment }
-})
+  return { count, doubleCount, increment };
+});