Tooling update

.github/workflows/format.yml → .github/workflows/check.yml

@@ -1,4 +1,4 @@
-name: Check Formatting
+name: Check Formatting and Linting
 
 on:
   push:
@@ -23,4 +23,4 @@ jobs:
           cache: npm
 
       - run: npm ci
-      - run: npm run format:check
+      - run: npm run ci

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: Run test
+name: Typecheck and Test
 
 on:
   push:
@@ -27,4 +27,5 @@ jobs:
           cache: npm
 
       - run: npm ci
+      - run: npm run typecheck
       - run: npm run test:run

biome.json

@@ -0,0 +1,107 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.6.4/schema.json",
+  "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
+  "files": { "includes": ["**", "!!**/dist"] },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 100,
+    "attributePosition": "auto",
+    "bracketSameLine": false,
+    "bracketSpacing": true,
+    "expand": "auto",
+    "useEditorconfig": true,
+    "includes": ["**", "!**/node_modules", "!**/__pycache__", "!**/dist", "!**/*.py"]
+  },
+  "linter": {
+    "rules": {
+      "style": {
+        "noDescendingSpecificity": "off",
+        "useConsistentArrayType": {
+          "level": "error",
+          "options": {
+            "syntax": "generic"
+          }
+        },
+        "useNamingConvention": {
+          "level": "error",
+          "options": {
+            "conventions": [
+              {
+                "selector": {
+                  "kind": "variable"
+                },
+                "formats": ["camelCase"]
+              },
+              {
+                "selector": {
+                  "kind": "class"
+                },
+                "formats": ["PascalCase"]
+              },
+              {
+                "selector": {
+                  "kind": "typeAlias"
+                },
+                "formats": ["PascalCase"]
+              },
+              {
+                "selector": {
+                  "kind": "enum"
+                },
+                "formats": ["PascalCase"]
+              },
+              {
+                "selector": {
+                  "kind": "interface"
+                },
+                "match": ".+"
+              },
+              {
+                "match": ".+"
+              }
+            ]
+          }
+        }
+      },
+      "suspicious": {
+        "noAssignInExpressions": "error",
+        "noDoubleEquals": "error",
+        "noShadow": "error",
+        "noShadowRestrictedNames": "error"
+      },
+      "complexity": {
+        "useLiteralKeys": "off"
+      },
+      "a11y": {
+        "noSvgWithoutTitle": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "es5",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "quoteStyle": "double",
+      "attributePosition": "auto",
+      "bracketSpacing": true
+    }
+  },
+  "html": {
+    "formatter": {
+      "indentScriptAndStyle": false,
+      "selfCloseVoidElements": "always"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": { "source": { "organizeImports": "on" } }
+  }
+}

index.html

@@ -38,7 +38,7 @@
             </button>
             <ul class="dropdown sub-dropdown" id="themes" hidden>
               <li data-theme="default">
-                <button>Default</button>
+                <button type="button">Default</button>
               </li>
               <li data-theme="dark">
                 <button type="button">Dark</button>
@@ -305,10 +305,10 @@ <h2>Day Time Remaining</h2>
 
       <section class="card timing">
         <div class="timing-buttons-container" id="timing-container">
-          <button data-target="schoolTime" class="selected">School Time</button>
-          <button data-target="totalTime">Total Time</button>
-          <button data-target="absoluteTime">Absolute Time</button>
-          <button data-target="dayTime">Day Time</button>
+          <button type="button" data-target="schoolTime" class="selected">School Time</button>
+          <button type="button" data-target="totalTime">Total Time</button>
+          <button type="button" data-target="absoluteTime">Absolute Time</button>
+          <button type="button" data-target="dayTime">Day Time</button>
         </div>
       </section>