Add/apply prettier

.gitea/workflows/ruff.yml

@@ -1,5 +1,5 @@
 name: Ruff
-on: [ push, pull_request ]
+on: [push, pull_request]
 jobs:
   ruff:
     runs-on: ubuntu-latest

.gitea/workflows/test.yml

@@ -1,5 +1,5 @@
 name: Test
-on: [ push, pull_request ]
+on: [push, pull_request]
 
 env:
   DJANGO_CONFIGURATION: CI
@@ -14,7 +14,14 @@ jobs:
         env:
           MARIADB_ROOT_PASSWORD: whatever
         healthcheck:
-          test: ["CMD", "healthcheck.sh",  "--su-mysql", "--connect", "--innodb_initialized"]
+          test:
+            [
+              "CMD",
+              "healthcheck.sh",
+              "--su-mysql",
+              "--connect",
+              "--innodb_initialized",
+            ]
     steps:
       - uses: actions/checkout@v4
       - name: Setup PDM

.prettierignore

@@ -0,0 +1,6 @@
+*.dj.html
+
+pnpm-lock.yaml
+.mypy_cache/
+.venv/
+.pytest_cache/

dashboard/js/dashboard.ts

@@ -1,7 +1,8 @@
 import { Tooltip } from "bootstrap";
+
 const tooltipTriggerList = document.querySelectorAll(
   '[data-bs-toggle="tooltip"]',
 );
-for (let tooltipTriggerEl of tooltipTriggerList) {
-  new Tooltip(tooltipTriggerEl);
+for (const tooltipTriggerElement of tooltipTriggerList) {
+  new Tooltip(tooltipTriggerElement);
 }

js/base.ts

@@ -1,3 +1,3 @@
-import 'bootstrap/scss/bootstrap.scss';
-import 'bootstrap-icons/font/bootstrap-icons.css';
-import 'bootstrap';
+import "bootstrap/scss/bootstrap.scss";
+import "bootstrap-icons/font/bootstrap-icons.css";
+import "bootstrap";

membershipworks/static/membershipworks/css/event_invoice_pdf.css

@@ -70,13 +70,13 @@ p {
 }
 
 .d-md-block {
-    display: block !important;
+  display: block !important;
 }
 .col-md-7 {
-    flex: 0 0 auto;
-    width: 58.33333333%;
+  flex: 0 0 auto;
+  width: 58.33333333%;
 }
 .col-md-4 {
-    flex: 0 0 auto;
-    width: 33.33333333%;
+  flex: 0 0 auto;
+  width: 33.33333333%;
 }

membershipworks/static/membershipworks/css/event_invoice_pdf_preview.css

@@ -1,7 +1,8 @@
 @page {
-    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='75' height='75' viewBox='0 0 75 75'><text style='font-size:13px;fill:lightgrey' x='-49' y='58' id='text1' transform='rotate(-45)'>PREVIEW</text></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='75' height='75' viewBox='0 0 75 75'><text style='font-size:13px;fill:lightgrey' x='-49' y='58' id='text1' transform='rotate(-45)'>PREVIEW</text></svg>");
 }
 
-body, table * {
-    background: transparent !important;
+body,
+table * {
+  background: transparent !important;
 }

package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "@types/bootstrap": "^5.2.10",
     "@types/tabulator-tables": "^6.2.3",
+    "prettier": "^3.3.3",
     "sass": "^1.77.8",
     "typescript": "^5.5.4",
     "vite": "^5.3.4"

paperwork/js/department_certifications.ts

@@ -4,7 +4,7 @@ import {
   FilterModule,
   HtmlTableImportModule,
   ResponsiveLayoutModule,
-  FilterType,
+  type FilterType,
 } from "tabulator-tables";
 import "tabulator-tables/src/scss/themes/bootstrap/tabulator_bootstrap5.scss";
 
@@ -16,14 +16,16 @@ Tabulator.registerModule([
 ]);
 
 Tabulator.extendModule("filter", "filters", {
-  "!includes": function(headerValue: string, rowValue: string){
+  "!includes"(headerValue: string, rowValue: string) {
     return !rowValue.includes(headerValue);
-  }
+  },
 });
 
-const certification_table_el = document.querySelector("table.certifications");
-if (certification_table_el instanceof HTMLTableElement) {
-  const certification_table = new Tabulator(certification_table_el, {
+const certification_table_element = document.querySelector(
+  "table.certifications",
+);
+if (certification_table_element instanceof HTMLTableElement) {
+  const certification_table = new Tabulator(certification_table_element, {
     layout: "fitDataFill",
     responsiveLayout: "collapse",
     pagination: true,
@@ -31,7 +33,7 @@ if (certification_table_el instanceof HTMLTableElement) {
     columnDefaults: {
       headerFilter: true,
     },
-    rowFormatter: function (row) {
+    rowFormatter(row) {
       const data = row.getData();
       if (data.version.includes("[OUTDATED]")) {
         row.getElement().classList.add("table-warning");
@@ -80,19 +82,27 @@ if (certification_table_el instanceof HTMLTableElement) {
 
   function setOutdatedFilter(showOutdated: boolean) {
     if (showOutdated) {
-      certification_table.removeFilter("version", "!includes" as FilterType, "[OUTDATED]");
+      certification_table.removeFilter(
+        "version",
+        "!includes" as FilterType,
+        "[OUTDATED]",
+      );
     } else {
-      certification_table.addFilter("version", "!includes"  as FilterType, "[OUTDATED]");
+      certification_table.addFilter(
+        "version",
+        "!includes" as FilterType,
+        "[OUTDATED]",
+      );
     }
   }
 
   certification_table.on("tableBuilt", () => {
-    const outdatedToggle = document.getElementById("showOutdated");
+    const outdatedToggle = document.querySelector("#showOutdated");
     if (outdatedToggle instanceof HTMLInputElement) {
       setOutdatedFilter(outdatedToggle.checked);
-      outdatedToggle.addEventListener("change", () =>
-        setOutdatedFilter(outdatedToggle.checked),
-      );
+      outdatedToggle.addEventListener("change", () => {
+        setOutdatedFilter(outdatedToggle.checked);
+      });
     }
   });
 }

paperwork/static/paperwork/certification-form-clear-autocomplete.js

@@ -1,10 +1,15 @@
-window.addEventListener('load', function() {
-    // Bind on certification_definition field change
-    django.jQuery(':input[name$=certification_definition]').on('change', function() {
-        // Get the field prefix, ie. if this comes from a formset form
-        var prefix = django.jQuery(this).getFormPrefix();
+window.addEventListener("load", function () {
+  // Bind on certification_definition field change
+  django
+    .jQuery(":input[name$=certification_definition]")
+    .on("change", function () {
+      // Get the field prefix, ie. if this comes from a formset form
+      const prefix = django.jQuery(this).getFormPrefix();
 
-        // Clear the autocomplete with the same prefix
-        django.jQuery(':input[name=' + prefix + 'certification_version]').val(null).trigger('change');
+      // Clear the autocomplete with the same prefix
+      django
+        .jQuery(":input[name=" + prefix + "certification_version]")
+        .val(null)
+        .trigger("change");
     });
 });

paperwork/static/paperwork/certification-print.css

@@ -1,88 +1,94 @@
 #cert-data {
-    string-set: certname attr(data-name),
-                certversion attr(data-version),
-                certapprovaldate attr(data-approvaldate);
-    /* Can't be `display: none;`, as it breaks string-set */
-    visibility: hidden;
-    position: absolute;
-    bottom: 0px;
+  string-set:
+    certname attr(data-name),
+    certversion attr(data-version),
+    certapprovaldate attr(data-approvaldate);
+  /* Can't be `display: none;`, as it breaks string-set */
+  visibility: hidden;
+  position: absolute;
+  bottom: 0px;
 }
 
 .checklist li::marker {
-    content: "□\00A0";
-    padding-right: 1em;
+  content: "□\00A0";
+  padding-right: 1em;
 }
 
 .no-break {
-    break-inside: avoid;
+  break-inside: avoid;
 }
 
 @media print {
-    body, p, li {
-        font-size: 10pt !important;
-        line-height: 1.2 !important;
+  body,
+  p,
+  li {
+    font-size: 10pt !important;
+    line-height: 1.2 !important;
+  }
+
+  .no-print,
+  .print-warning,
+  .toc,
+  body > :not(.mw-page-container),
+  #content > :not(#bodyContent),
+  #bodyContent > :not(#mw-content-text),
+  #mw-content-text > :not(.mw-parser-output) {
+    display: none !important;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    padding-top: 0em !important;
+    margin-top: 0em !important;
+    break-before: auto !important;
+  }
+
+  .qrlite-result img {
+    width: 1.5in;
+  }
+
+  /* Turn off mediawiki's added text for mailto links */
+  a[href^="mailto:"]::after {
+    content: none !important;
+  }
+
+  /* Add link target as text, except mailto links */
+  a:not([href^="mailto:"])::after {
+    content: " [" attr(href) "]";
+    color: initial;
+    text-decoration: none;
+  }
+
+  @page {
+    size: letter portrait;
+    margin: 1in;
+
+    @top-left {
+      content: string(certname);
+      font-size: 1.2em;
+      color: #444;
+      vertical-align: bottom;
+      padding-bottom: 0.2em;
     }
 
-    .no-print,
-    .print-warning,
-    .toc,
-    body > :not(.mw-page-container),
-    #content > :not(#bodyContent),
-    #bodyContent > :not(#mw-content-text),
-    #mw-content-text > :not(.mw-parser-output) {
-        display: none !important;
+    @top-right {
+      content: "";
+      background-image: url("https://claremontmakerspace.org/wp-content/uploads/2018/06/cms_logo.png");
+      background-repeat: no-repeat;
+      background-position: bottom;
+      background-size: 100%;
+      width: 7em;
     }
 
-    h1, h2, h3, h4 {
-        padding-top: 0em !important;
-        margin-top: 0em !important;
-        break-before: auto !important;
+    @bottom-left {
+      content: string(certversion) " - " string(certapprovaldate);
+      color: #444;
     }
 
-    .qrlite-result img {
-        width: 1.5in;
-    }
-
-    /* Turn off mediawiki's added text for mailto links */
-    a[href^="mailto:"]::after {
-        content: none !important;
-    }
-
-    /* Add link target as text, except mailto links */
-    a:not([href^="mailto:"])::after {
-        content: " [" attr(href) "]";
-        color: initial;
-        text-decoration: none;
-    }
-
-    @page {
-        size: letter portrait;
-        margin: 1in;
-
-        @top-left {
-            content: string(certname);
-            font-size: 1.2em;
-            color: #444;
-            vertical-align: bottom;
-            padding-bottom: 0.2em;
-        }
-
-        @top-right {
-            content: '';
-            background-image: url("https://claremontmakerspace.org/wp-content/uploads/2018/06/cms_logo.png");
-            background-repeat: no-repeat;
-            background-position: bottom;
-            background-size: 100%;
-            width: 7em;
-        }
-
-        @bottom-left {
-            content: string(certversion) " - " string(certapprovaldate);
-            color: #444;
-        }
-
-        @bottom-right-corner {
-            content: counter(page);
-        }
+    @bottom-right-corner {
+      content: counter(page);
     }
+  }
 }

pnpm-lock.yaml

@@ -27,6 +27,9 @@ importers:
       '@types/tabulator-tables':
         specifier: ^6.2.3
         version: 6.2.3
+      prettier:
+        specifier: ^3.3.3
+        version: 3.3.3
       sass:
         specifier: ^1.77.8
         version: 1.77.8
@@ -350,6 +353,11 @@ packages:
     resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==}
     engines: {node: ^10 || ^12 || >=14}
 
+  prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -631,6 +639,8 @@ snapshots:
       picocolors: 1.0.1
       source-map-js: 1.2.0
 
+  prettier@3.3.3: {}
+
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1

renovate.json

@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended"
-  ]
+  "extends": ["config:recommended"]
 }

static/bootstrap-color-toggle.js

@@ -27,9 +27,9 @@
       theme === "auto" &&
       window.matchMedia("(prefers-color-scheme: dark)").matches
     ) {
-      document.documentElement.setAttribute("data-bs-theme", "dark");
+      document.documentElement.dataset.bsTheme = "dark";
     } else {
-      document.documentElement.setAttribute("data-bs-theme", theme);
+      document.documentElement.dataset.bsTheme = theme;
     }
   };
 
@@ -44,25 +44,27 @@
 
     const themeSwitcherText = document.querySelector("#bd-theme-text");
     const activeThemeIcon = document.querySelector(".theme-icon-active");
-    const btnToActive = document.querySelector(
+    const buttonToActive = document.querySelector(
       `[data-bs-theme-value="${theme}"]`,
     );
     const activeIcon = [
-      ...btnToActive.querySelector(".theme-icon").classList,
+      ...buttonToActive.querySelector(".theme-icon").classList,
     ].find((c) => c.startsWith("bi-"));
 
-    document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
+    for (const element of document.querySelectorAll("[data-bs-theme-value]")) {
       element.classList.remove("active");
       element.setAttribute("aria-pressed", "false");
-    });
+    }
 
-    btnToActive.classList.add("active");
-    btnToActive.setAttribute("aria-pressed", "true");
-    [...activeThemeIcon.classList]
-      .filter((c) => c.startsWith("bi-"))
-      .forEach((icon) => activeThemeIcon.classList.remove(icon));
+    buttonToActive.classList.add("active");
+    buttonToActive.setAttribute("aria-pressed", "true");
+    for (const icon of activeThemeIcon.classList) {
+      if (icon.startsWith("bi-")) {
+        activeThemeIcon.classList.remove(icon);
+      }
+    }
     activeThemeIcon.classList.add(activeIcon);
-    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${buttonToActive.dataset.bsThemeValue})`;
     themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
 
     if (focus) {
@@ -80,16 +82,16 @@
     });
 
   window.addEventListener("DOMContentLoaded", () => {
-	console.log(getPreferredTheme());
+    console.log(getPreferredTheme());
     showActiveTheme(getPreferredTheme());
 
-    document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
+    for (const toggle of document.querySelectorAll("[data-bs-theme-value]")) {
       toggle.addEventListener("click", () => {
-        const theme = toggle.getAttribute("data-bs-theme-value");
+        const theme = toggle.dataset.bsThemeValue;
         setStoredTheme(theme);
         setTheme(theme);
         showActiveTheme(theme, true);
       });
-    });
+    }
   });
 })();

vite.config.js

@@ -1,5 +1,5 @@
+import { resolve, join } from "node:path";
 import { defineConfig } from "vite";
-import { resolve, join } from "path";
 
 export default defineConfig({
   base: "/static/",