@profpowell/vb-project-planning 0.1.0

package/src/web-components/risk-register/logic.js

@@ -0,0 +1,180 @@
+/**
+ * risk-register: Composing preset for the table + quadrant pattern
+ *
+ * Reads risk rows from a <template> child (or src URL) and renders both
+ * a sortable <data-table> with a computed Severity column AND a
+ * <quadrant-grid> mapping each risk to a labelled dot at
+ * (likelihood, impact). The two views stay in sync from one source.
+ *
+ * The pairing recurs as a single tool, justifying a wrapper instead of
+ * a recipe. Most of the code is glue; both children do the work.
+ *
+ * Row shape (from <template>'s <tr> cells, in order):
+ *   1. Title           — short risk identifier
+ *   2. Likelihood      — integer 1..5
+ *   3. Impact          — integer 1..5
+ *   4. Owner           — optional, free text
+ *   5. Mitigation      — optional, free text
+ *   <tr data-id="..."> on the row provides a stable id; falls back to
+ *   the title.
+ *
+ * @attr {string} src   - URL to JSON: [{ id, title, likelihood, impact, owner, mitigation }]
+ * @attr {string} label - Optional heading shown above the table
+ *
+ * @fires risk-register:ready  - { count } after first render
+ * @fires risk-register:change - { row, field, value } on inline edit
+ */
+
+import { registerComponent } from '../../lib/bundle-registry.js';
+import { VBElement } from '../../lib/vb-element.js';
+
+const SCALE = 5;
+
+class RiskRegister extends VBElement {
+  setup() {
+    const tmpl = this.querySelector(':scope > template');
+    let rows = tmpl ? RiskRegister.#parseTemplate(tmpl) : [];
+
+    if (this.hasAttribute('src')) {
+      this.#loadFromSrc(this.getAttribute('src'));
+      return;
+    }
+    this.#render(rows);
+  }
+
+  async #loadFromSrc(url) {
+    try {
+      const res = await fetch(url);
+      const data = await res.json();
+      this.#render(Array.isArray(data) ? data : []);
+    } catch (e) {
+      console.warn('risk-register: failed to load src', url, e);
+      this.#render([]);
+    }
+  }
+
+  static #parseTemplate(tmpl) {
+    const rows = [];
+    const trs = tmpl.content.querySelectorAll('tr');
+    for (const tr of trs) {
+      const cells = [...tr.children];
+      const title = cells[0]?.textContent?.trim() || '';
+      const id = tr.getAttribute('data-id') || title.toLowerCase().replace(/\s+/g, '-') || `risk-${rows.length}`;
+      rows.push({
+        id,
+        title,
+        likelihood: parseInt(cells[1]?.textContent ?? '', 10) || 0,
+        impact:     parseInt(cells[2]?.textContent ?? '', 10) || 0,
+        owner:      cells[3]?.textContent?.trim() || '',
+        mitigation: cells[4]?.textContent?.trim() || '',
+      });
+    }
+    return rows;
+  }
+
+  #render(rows) {
+    this.#rows = rows;
+
+    // Wipe prior children except the source <template> so re-renders work.
+    [...this.children].forEach((c) => { if (c.tagName !== 'TEMPLATE') c.remove(); });
+
+    const label = this.getAttribute('label');
+    if (label) {
+      const h = document.createElement('header');
+      h.className = 'rr-label';
+      h.textContent = label;
+      this.appendChild(h);
+    }
+
+    const layout = document.createElement('div');
+    layout.className = 'rr-layout';
+    layout.appendChild(this.#buildTable(rows));
+    layout.appendChild(this.#buildGrid(rows));
+    this.appendChild(layout);
+
+    queueMicrotask(() => {
+      this.dispatchEvent(new CustomEvent('risk-register:ready', {
+        bubbles: true,
+        detail: { count: rows.length },
+      }));
+    });
+  }
+
+  #buildTable(rows) {
+    const wrapper = document.createElement('data-table');
+    const table = document.createElement('table');
+
+    table.innerHTML = `
+      <thead>
+        <tr>
+          <th data-sort="string">Title</th>
+          <th data-sort="number">Likelihood</th>
+          <th data-sort="number">Impact</th>
+          <th data-sort="number" data-rollup="product" data-heatmap="low-good">Severity</th>
+          <th data-sort="string">Owner</th>
+          <th data-sort="string">Mitigation</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${rows.map((r) => `
+          <tr data-id="${RiskRegister.#escape(r.id)}">
+            <td>${RiskRegister.#escape(r.title)}</td>
+            <td>${r.likelihood || ''}</td>
+            <td>${r.impact || ''}</td>
+            <td></td>
+            <td>${RiskRegister.#escape(r.owner)}</td>
+            <td>${RiskRegister.#escape(r.mitigation)}</td>
+          </tr>
+        `).join('')}
+      </tbody>
+    `;
+    wrapper.appendChild(table);
+    return wrapper;
+  }
+
+  #buildGrid(rows) {
+    const grid = document.createElement('quadrant-grid');
+    grid.setAttribute('x-label', 'Likelihood');
+    grid.setAttribute('y-label', 'Impact');
+    grid.setAttribute('x-low', 'Rare');
+    grid.setAttribute('x-high', 'Likely');
+    grid.setAttribute('y-low', 'Minor');
+    grid.setAttribute('y-high', 'Severe');
+    grid.setAttribute('q1-label', 'Avoid');
+    grid.setAttribute('q2-label', 'Plan');
+    grid.setAttribute('q3-label', 'Accept');
+    grid.setAttribute('q4-label', 'Mitigate');
+
+    for (const r of rows) {
+      if (!r.likelihood || !r.impact) continue;
+      const dot = document.createElement('span');
+      const x = Math.min(1, Math.max(0, r.likelihood / SCALE));
+      const y = Math.min(1, Math.max(0, r.impact / SCALE));
+      dot.setAttribute('data-x', x.toFixed(3));
+      dot.setAttribute('data-y', y.toFixed(3));
+      dot.setAttribute('data-id', r.id);
+      dot.setAttribute('title', `${r.title} — likelihood ${r.likelihood}, impact ${r.impact}`);
+      dot.textContent = r.title;
+      grid.appendChild(dot);
+    }
+    return grid;
+  }
+
+  static #escape(s) {
+    return String(s ?? '').replace(/[&<>"']/g, (c) =>
+      ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  }
+
+  /** @type {Array<{id:string,title:string,likelihood:number,impact:number,owner:string,mitigation:string}>} */
+  #rows = [];
+
+  get rows() { return [...this.#rows]; }
+
+  set rows(value) {
+    this.#render(Array.isArray(value) ? value : []);
+  }
+}
+
+registerComponent('risk-register', RiskRegister);
+
+export { RiskRegister };

package/src/web-components/risk-register/static.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Risk Register — Static Fallback</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 2rem; }
+    table { border-collapse: collapse; }
+    th, td { padding: 0.25rem 0.75rem; border-block-end: 1px solid #ddd; text-align: start; }
+  </style>
+</head>
+<body>
+  <!--
+    Static fallback for <risk-register>.
+
+    Upgrade relationship:
+    - Without JS: the <template> below is invisible (templates do not
+      render); the <noscript>-style fallback table preserves the data.
+    - With JS: the component reads rows from the <template>, computes
+      severity = likelihood × impact, renders a sortable <data-table>
+      with low-good severity heatmap, and a <quadrant-grid> mapping each
+      risk to a labelled dot at (likelihood, impact).
+  -->
+
+  <risk-register label="Q3 Project risks">
+    <template>
+      <tr data-id="vendor-delay"><td>Vendor delay</td><td>4</td><td>3</td><td>PM</td><td>Pre-stage assets in week 6</td></tr>
+      <tr data-id="data-breach"><td>Data breach</td><td>2</td><td>5</td><td>Security</td><td>Tabletop exercise + WAF tuning</td></tr>
+      <tr data-id="scope-creep"><td>Scope creep</td><td>5</td><td>3</td><td>EM</td><td>Strict change-control board</td></tr>
+      <tr data-id="staff-churn"><td>Staff churn</td><td>2</td><td>2</td><td>EM</td><td>Document playbooks + cross-train</td></tr>
+    </template>
+    <table>
+      <thead>
+        <tr><th>Risk</th><th>Likelihood</th><th>Impact</th><th>Owner</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>Vendor delay</td><td>4</td><td>3</td><td>PM</td></tr>
+        <tr><td>Data breach</td><td>2</td><td>5</td><td>Security</td></tr>
+        <tr><td>Scope creep</td><td>5</td><td>3</td><td>EM</td></tr>
+        <tr><td>Staff churn</td><td>2</td><td>2</td><td>EM</td></tr>
+      </tbody>
+    </table>
+  </risk-register>
+</body>
+</html>

package/src/web-components/risk-register/styles.css

@@ -0,0 +1,37 @@
+/* risk-register: Composing preset (data-table + quadrant-grid) */
+
+risk-register:not(:defined) {
+  display: block;
+}
+
+risk-register {
+  display: block;
+  font-family: var(--font-sans, system-ui);
+  color: var(--color-text, #1a1a1a);
+}
+
+@scope (risk-register) {
+  .rr-label {
+    display: block;
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted, #666);
+    margin-block-end: var(--size-s, 0.75rem);
+  }
+
+  .rr-layout {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--size-l, 1.5rem);
+  }
+
+  /* Table on top, quadrant below by default; side-by-side on wide screens */
+  @media (width >= 64rem) {
+    .rr-layout {
+      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+      align-items: start;
+    }
+  }
+}

package/src/web-components/story-map/api.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../../../schemas/api.schema.json",
+  "element": "story-map",
+  "type": "web-component",
+  "description": "Horizontal user story map with activity columns and drag-and-drop between columns",
+  "htmlvalidate": { "flow": true, "permittedContent": ["section"] },
+  "attributes": [
+    { "name": "src",     "kind": "host-api", "purpose": "config", "type": "string",  "description": "URL to JSON data with activities and stories" },
+    { "name": "title",   "kind": "host-api", "purpose": "config", "type": "string",  "description": "Optional heading above the story map" },
+    { "name": "compact", "kind": "host-api", "purpose": "config", "type": "boolean", "description": "Reduced spacing variant" }
+  ],
+  "childAttributes": [
+    { "name": "data-activity",       "on": "section", "type": "string", "description": "Activity column identifier" },
+    { "name": "data-activity-label", "on": "section", "type": "string", "description": "Display label for the column header" },
+    { "name": "data-journey-phase",  "on": "section", "type": "string", "description": "Optional link to a user-journey phase" }
+  ],
+  "events": [
+    { "name": "story-map:reorder",  "detail": "{ itemId, activity, oldIndex, newIndex }",       "description": "Item reordered within a column" },
+    { "name": "story-map:transfer", "detail": "{ itemId, fromActivity, toActivity, newIndex }",  "description": "Item moved between columns" },
+    { "name": "story-map:ready",    "detail": "{ activityCount, storyCount }",                   "description": "Fired after component initializes" }
+  ]
+}