refactor and docs

dwightjack · Apr 9, 2024 · a061a4c · a061a4c
1 parent b64600f
commit a061a4c
Show file tree

Hide file tree

Showing 16 changed files with 245 additions and 176 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -11,9 +11,19 @@
   "rules": {
     "no-console": 0,
     "node/no-unpublished-require": 0,
+    "node/no-unpublished-import": 0,
     "no-shadow": "warn",
     "block-scoped-var": "error",
     "consistent-return": "error",
     "eqeqeq": "error"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.mjs"],
+      "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": "latest"
+      }
+    }
+  ]
 }
diff --git a/.prettierrc.js b/.prettierrc.js
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -101,47 +101,9 @@ <h1 class="u-visually-hidden">Time Zones</h1>
       <button class="c-button c-toast__confirm" type="button">Reload</button>
       <button class="c-button c-toast__close" type="button">Close</button>
     </div>
+
     <script type="text/x-yui3-template" id="timezone-tmpl">
-      <article class="c-timecard" id="<%= this.id %>">
-        <h2 class="c-timecard__title"><%= this.label %></h2>
-        <% Y.Array.each(['morning', 'daytime', 'evening', 'night'], (part) => { %>
-          <svg
-            class="c-icon c-timecard__interval c-timecard__interval--<%= part %>"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#icon-<%= part %>" />
-          </svg>
-        <% }) %>
-        <p class="c-timecard__zone"><%= this.abbreviation %> (UTC <%= this.offsetLabel %>)</p>
-        <button type="button" class="c-timecard__close">
-          <svg class="c-icon" focusable="false" aria-hidden="true">
-            <use xlink:href="#icon-close" />
-          </svg>
-          <span class="u-visually-hidden">Remove</span>
-        </button>
-        <fieldset class="c-timecard__fieldset">
-          <legend class="u-visually-hidden">Date and time for <%= this.label %></legend>
-          <div class="c-field c-field--compact">
-            <input
-              class="c-field__input"
-              type="date"
-              id="date-<%= this.id %>"
-              value="<%= this.dateStrings.date %>"
-            />
-            <label class="c-field__label" for="date-<%= this.id %>">Date</label>
-          </div>
-          <div class="c-field c-field--compact">
-            <input
-              class="c-field__input"
-              type="time"
-              id="time-<%= this.id %>"
-              value="<%= this.dateStrings.time %>"
-            />
-            <label class="c-field__label" for="time-<%= this.id %>">Time</label>
-          </div>
-        </fieldset>
-      </article>
+      {TEMPLATE:./src/templates/timezone.tmpl}
     </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -22,7 +22,9 @@
     "dev": "netlify dev -c \"pnpm exec vite\"",
     "build": "pnpm run lint && vite build",
     "preview": "netlify dev -d dist",
-    "lint": "eslint && stylelint --aei '**/*.css'",
+    "lint": "pnpm run \"/^lint:.*/\"",
+    "lint:js": "eslint .",
+    "lint:css": "stylelint --aei '**/*.css'",
     "test": "playwright test"
   },
   "devDependencies": {
@@ -36,10 +38,10 @@
     "mockdate": "^3.0.5",
     "netlify-cli": "16.9.3",
     "prettier": "3.2.5",
-    "stylelint": "16.2.1",
+    "stylelint": "16.3.1",
     "stylelint-config-property-sort-order-smacss": "10.0.0",
-    "stylelint-config-standard": "34.0.0",
-    "stylelint-prettier": "4.1.0",
+    "stylelint-config-standard": "36.0.0",
+    "stylelint-prettier": "5.0.0",
     "stylelint-use-logical": "^2.1.0",
     "vite": "5.1.7",
     "vite-plugin-pwa": "0.19.8",

diff --git a/playwright.config.js → playwright.config.mjs b/playwright.config.js → playwright.config.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-const { defineConfig, devices } = require('@playwright/test');
+import { defineConfig, devices } from '@playwright/test';
 
 /**
  * Read environment variables from file.
@@ -10,7 +10,7 @@ const { defineConfig, devices } = require('@playwright/test');
 /**
  * @see https://playwright.dev/docs/test-configuration
  */
-module.exports = defineConfig({
+export default defineConfig({
   testDir: './tests',
   /* Run tests in files in parallel */
   fullyParallel: true,