@forwardimpact/pathway 0.1.0

package/app/components/grid.js

@@ -0,0 +1,109 @@
+/**
+ * Grid components and utilities
+ *
+ * This module provides reusable grid components that wrap the CSS grid utilities.
+ * All grids use the unified CSS classes: auto-grid-xs, auto-grid-sm, auto-grid-md, auto-grid-lg
+ *
+ * Grid sizes:
+ * - xs: 150px min column width (compact stats, small cards)
+ * - sm: 200px min column width (form controls, medium cards)
+ * - md: 300px min column width (detail items, content cards)
+ * - lg: 400px min column width (large content like radar charts)
+ */
+
+import { div } from "../lib/render.js";
+
+/**
+ * Grid size options
+ * @typedef {'xs' | 'sm' | 'md' | 'lg'} GridSize
+ */
+
+/**
+ * Gap size options
+ * @typedef {'sm' | 'md' | 'lg' | 'xl'} GapSize
+ */
+
+/**
+ * Create an auto-fit grid container
+ * @param {GridSize} size - Grid size variant (xs, sm, md, lg)
+ * @param {HTMLElement[]} children - Child elements to place in grid
+ * @param {Object} [options] - Optional configuration
+ * @param {string} [options.className] - Additional CSS classes
+ * @param {GapSize} [options.gap] - Override default gap (sm, md, lg, xl)
+ * @returns {HTMLElement}
+ */
+export function createAutoGrid(size, children, options = {}) {
+  const { className = "", gap } = options;
+  const classes = [`auto-grid-${size}`, gap ? `gap-${gap}` : "", className]
+    .filter(Boolean)
+    .join(" ");
+
+  return div({ className: classes }, ...children);
+}
+
+/**
+ * Create a fixed-column grid container
+ * @param {2 | 3 | 6} columns - Number of columns
+ * @param {HTMLElement[]} children - Child elements to place in grid
+ * @param {Object} [options] - Optional configuration
+ * @param {string} [options.className] - Additional CSS classes
+ * @returns {HTMLElement}
+ */
+export function createFixedGrid(columns, children, options = {}) {
+  const { className = "" } = options;
+  const classes = ["grid", `grid-${columns}`, className]
+    .filter(Boolean)
+    .join(" ");
+
+  return div({ className: classes }, ...children);
+}
+
+/**
+ * Create a grid for form selectors (discipline/grade/track dropdowns)
+ * Uses auto-grid-sm (200px min)
+ * @param {HTMLElement[]} children - Form control elements
+ * @returns {HTMLElement}
+ */
+export function createSelectorGrid(children) {
+  return createAutoGrid("sm", children, { gap: "lg" });
+}
+
+/**
+ * Create a grid for detail items (key-value pairs)
+ * Uses auto-grid-md (300px min)
+ * @param {HTMLElement[]} children - Detail item elements
+ * @returns {HTMLElement}
+ */
+export function createDetailGrid(children) {
+  return createAutoGrid("md", children);
+}
+
+/**
+ * Create a grid for radar charts or large content
+ * Uses auto-grid-lg (400px min)
+ * @param {HTMLElement[]} children - Large content elements
+ * @returns {HTMLElement}
+ */
+export function createRadarGrid(children) {
+  return createAutoGrid("lg", children);
+}
+
+/**
+ * Create a grid for compact stats
+ * Uses auto-grid-xs (150px min)
+ * @param {HTMLElement[]} children - Stat elements
+ * @returns {HTMLElement}
+ */
+export function createStatsGrid(children) {
+  return createAutoGrid("xs", children);
+}
+
+/**
+ * Create a grid for card-like items (tips, expectations)
+ * Uses auto-grid-sm (200px min)
+ * @param {HTMLElement[]} children - Card elements
+ * @returns {HTMLElement}
+ */
+export function createCardGrid(children) {
+  return createAutoGrid("sm", children);
+}

package/app/components/list.js

@@ -0,0 +1,120 @@
+/**
+ * Reusable list component
+ */
+
+import { div, h2, input, select, option } from "../lib/render.js";
+import { createCard, createBadge } from "./card.js";
+
+/**
+ * Create a search/filter bar
+ * @param {Object} options
+ * @param {Function} options.onSearch - Search callback
+ * @param {Array<{value: string, label: string}>} [options.filterOptions] - Filter dropdown options
+ * @param {Function} [options.onFilter] - Filter callback
+ * @param {string} [options.searchPlaceholder='Search...']
+ * @param {string} [options.filterPlaceholder='All']
+ * @returns {HTMLElement}
+ */
+export function createSearchBar({
+  onSearch,
+  filterOptions,
+  onFilter,
+  searchPlaceholder = "Search...",
+  filterPlaceholder = "All",
+}) {
+  const searchInput = input({
+    type: "text",
+    className: "form-input",
+    placeholder: searchPlaceholder,
+  });
+
+  searchInput.addEventListener("input", (e) => {
+    onSearch(e.target.value);
+  });
+
+  const children = [searchInput];
+
+  if (filterOptions && onFilter) {
+    const filterSelect = select(
+      { className: "form-select" },
+      option({ value: "" }, filterPlaceholder),
+      ...filterOptions.map((opt) => option({ value: opt.value }, opt.label)),
+    );
+
+    filterSelect.addEventListener("change", (e) => {
+      onFilter(e.target.value);
+    });
+
+    children.push(filterSelect);
+  }
+
+  return div({ className: "search-bar" }, ...children);
+}
+
+/**
+ * Create a list of cards
+ * @param {Array} items - Items to render
+ * @param {Function} renderItem - Function to render each item as a card config
+ * @param {string} [emptyMessage='No items found']
+ * @returns {HTMLElement}
+ */
+export function createCardList(
+  items,
+  renderItem,
+  emptyMessage = "No items found",
+) {
+  if (!items || items.length === 0) {
+    return div(
+      { className: "empty-state" },
+      div({ className: "empty-message" }, emptyMessage),
+    );
+  }
+
+  const cards = items.map((item) => {
+    const config = renderItem(item);
+    return createCard(config);
+  });
+
+  return div({ className: "grid grid-3" }, ...cards);
+}
+
+/**
+ * Create a grouped list (like skills by capability)
+ * @param {Object} groups - Object with group names as keys and arrays as values
+ * @param {Function} renderItem - Function to render each item
+ * @param {Function} [renderGroupHeader] - Function to render group header
+ * @returns {HTMLElement}
+ */
+export function createGroupedList(groups, renderItem, renderGroupHeader) {
+  const sections = Object.entries(groups).map(([groupName, items]) => {
+    const header = renderGroupHeader
+      ? renderGroupHeader(groupName, items.length)
+      : div(
+          { className: "capability-header" },
+          h2({ className: "capability-title" }, formatGroupName(groupName)),
+          createBadge(`${items.length}`, "default"),
+        );
+
+    const cards = items.map((item) => {
+      const config = renderItem(item);
+      return createCard(config);
+    });
+
+    return div(
+      { className: "capability-group" },
+      header,
+      div({ className: "grid grid-3" }, ...cards),
+    );
+  });
+
+  return div({ className: "grouped-list" }, ...sections);
+}
+
+/**
+ * Format a group name for display
+ * @param {string} name
+ * @returns {string}
+ */
+function formatGroupName(name) {
+  return name.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}

package/app/components/modifier-table.js

@@ -0,0 +1,142 @@
+/**
+ * Modifier table component for displaying skill/behaviour modifiers
+ */
+
+import {
+  div,
+  span,
+  table,
+  thead,
+  tbody,
+  tr,
+  th,
+  td,
+  a,
+} from "../lib/render.js";
+import { createBadge } from "./card.js";
+
+/**
+ * Create a modifier badge based on value
+ * @param {number} modifier - The modifier value
+ * @returns {HTMLElement}
+ */
+function createModifierBadge(modifier) {
+  if (modifier > 0) {
+    return createBadge(`+${modifier}`, "broad");
+  } else if (modifier < 0) {
+    return createBadge(`${modifier}`, "negative");
+  }
+  return createBadge(`${modifier}`, "secondary");
+}
+
+/**
+ * Create a table displaying modifiers for skills or behaviours
+ * @param {Object} options - Configuration options
+ * @param {Array} options.modifiers - Array of {id, name, modifier} objects
+ * @param {string} options.basePath - Base path for links (e.g., '/skill', '/behaviour')
+ * @param {string} options.itemLabel - Label for the first column (e.g., 'Skill', 'Behaviour')
+ * @returns {HTMLElement}
+ */
+export function createModifierTable({ modifiers, basePath, itemLabel }) {
+  const rows = modifiers.map((m) =>
+    tr(
+      {},
+      td({}, a({ href: `#${basePath}/${m.id}` }, m.name)),
+      td({}, createModifierBadge(m.modifier)),
+    ),
+  );
+
+  return div(
+    { className: "table-container" },
+    table(
+      { className: "table modifier-table" },
+      thead({}, tr({}, th({}, itemLabel), th({}, "Modifier"))),
+      tbody({}, ...rows),
+    ),
+  );
+}
+
+/**
+ * Create a behaviour modifiers table
+ * @param {Array} modifiers - Array of {id, name, modifier} objects
+ * @returns {HTMLElement}
+ */
+export function createBehaviourModifierTable(modifiers) {
+  return createModifierTable({
+    modifiers,
+    basePath: "/behaviour",
+    itemLabel: "Behaviour",
+  });
+}
+
+/**
+ * Create a skill modifiers table
+ * @param {Array} modifiers - Array of {id, name, modifier} objects
+ * @returns {HTMLElement}
+ */
+export function createSkillModifierTable(modifiers) {
+  return createModifierTable({
+    modifiers,
+    basePath: "/skill",
+    itemLabel: "Skill",
+  });
+}
+
+/**
+ * Create a skill modifiers table with capability support
+ * Used for tracks which can have capability-level modifiers with nested skill links
+ * @param {Array} modifiers - Array of {id, name, modifier, isCapability?, skills?} objects
+ * @returns {HTMLElement}
+ */
+export function createSkillModifierTableWithCapabilities(modifiers) {
+  const rows = modifiers.map((m) => {
+    if (m.isCapability && m.skills) {
+      // Capability row: show capability name (not linked) with nested skill list
+      const skillLinks = m.skills.map((skill, index) => {
+        if (index < m.skills.length - 1) {
+          return span({}, a({ href: `#/skill/${skill.id}` }, skill.name), ", ");
+        }
+        return a({ href: `#/skill/${skill.id}` }, skill.name);
+      });
+
+      return tr(
+        {},
+        td(
+          {},
+          div({ style: "font-weight: 500;" }, m.name),
+          div(
+            {
+              style:
+                "font-size: 0.85em; color: var(--text-secondary); margin-top: 0.25rem;",
+            },
+            ...skillLinks,
+          ),
+        ),
+        td({}, createModifierBadge(m.modifier)),
+      );
+    } else if (m.isCapability) {
+      // Capability row without nested skills: show simple text
+      return tr(
+        {},
+        td({}, `All ${m.name} skills`),
+        td({}, createModifierBadge(m.modifier)),
+      );
+    } else {
+      // Individual skill row: show linked skill name
+      return tr(
+        {},
+        td({}, a({ href: `#/skill/${m.id}` }, m.name)),
+        td({}, createModifierBadge(m.modifier)),
+      );
+    }
+  });
+
+  return div(
+    { className: "table-container" },
+    table(
+      { className: "table modifier-table" },
+      thead({}, tr({}, th({}, "Skill"), th({}, "Modifier"))),
+      tbody({}, ...rows),
+    ),
+  );
+}

package/app/components/nav.js

@@ -0,0 +1,64 @@
+/**
+ * Navigation component helpers
+ */
+
+import { div, a } from "../lib/render.js";
+
+/**
+ * Update the active navigation link
+ * @param {string} path - Current path
+ */
+export function updateActiveNav(path) {
+  const links = document.querySelectorAll("#nav-links a");
+  links.forEach((link) => {
+    const href = link.getAttribute("href").slice(1); // Remove #
+    const isActive = path === href || (href !== "/" && path.startsWith(href));
+    link.classList.toggle("active", isActive);
+  });
+}
+
+/**
+ * Create a back link
+ * @param {string} href - Link destination
+ * @param {string} [text='Back'] - Link text
+ * @returns {HTMLElement}
+ */
+export function createBackLink(href, text = "← Back") {
+  return a({ href: `#${href}`, className: "back-link" }, text);
+}
+
+/**
+ * Create breadcrumbs
+ * @param {Array<{label: string, href?: string}>} items
+ * @returns {HTMLElement}
+ */
+export function createBreadcrumbs(items) {
+  const crumbs = items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    if (isLast || !item.href) {
+      return span({ className: "breadcrumb-item" }, item.label);
+    }
+    return a(
+      { href: `#${item.href}`, className: "breadcrumb-item" },
+      item.label,
+    );
+  });
+
+  const separator = " / ";
+  const children = [];
+  crumbs.forEach((crumb, i) => {
+    children.push(crumb);
+    if (i < crumbs.length - 1) {
+      children.push(document.createTextNode(separator));
+    }
+  });
+
+  return div({ className: "breadcrumbs" }, ...children);
+}
+
+function span(attrs, text) {
+  const el = document.createElement("span");
+  if (attrs.className) el.className = attrs.className;
+  if (text) el.textContent = text;
+  return el;
+}