@forwardimpact/pathway 0.21.0 → 0.23.0

package/src/components/detail.js

@@ -1,13 +1,20 @@
 /**
- * Reusable detail view component
+ * Detail view components
+ *
+ * Re-exports generic components from @forwardimpact/libui/components/detail
+ * and provides domain-specific level display components.
  */
 
+export {
+  createDetailHeader,
+  createDetailSection,
+  createLinksList,
+  createTagsList,
+  createDetailItem,
+} from "@forwardimpact/libui/components/detail";
+
 import {
   div,
-  h1,
-  h2,
-  p,
-  a,
   span,
   table,
   thead,
@@ -15,63 +22,13 @@ import {
   tr,
   th,
   td,
-  section,
-} from "../lib/render.js";
-import { createBackLink } from "./nav.js";
-import { createTag } from "./card.js";
-import { formatLevel } from "../lib/render.js";
+  formatLevel,
+} from "@forwardimpact/libui/render";
 import {
-  SKILL_LEVEL_ORDER,
+  SKILL_PROFICIENCY_ORDER,
   BEHAVIOUR_MATURITY_ORDER,
 } from "@forwardimpact/map/levels";
 
-/**
- * Create a detail page header
- * @param {Object} options
- * @param {string} options.title
- * @param {string} [options.description]
- * @param {string} options.backLink - Path to go back to
- * @param {string} [options.backText] - Back link text
- * @param {HTMLElement[]} [options.badges]
- * @param {HTMLElement[]} [options.actions] - Action buttons
- * @returns {HTMLElement}
- */
-export function createDetailHeader({
-  title,
-  description,
-  backLink,
-  backText = "← Back to list",
-  badges = [],
-  actions = [],
-}) {
-  return div(
-    { className: "page-header" },
-    createBackLink(backLink, backText),
-    div(
-      { className: "card-header" },
-      h1({ className: "page-title" }, title),
-      badges.length > 0 ? div({ className: "page-meta" }, ...badges) : null,
-    ),
-    description ? p({ className: "page-description" }, description) : null,
-    actions.length > 0 ? div({ className: "page-actions" }, ...actions) : null,
-  );
-}
-
-/**
- * Create a detail section
- * @param {Object} options
- * @param {string} options.title
- * @param {HTMLElement} options.content
- * @returns {HTMLElement}
- */
-export function createDetailSection({ title, content }) {
-  return section(
-    { className: "section section-detail" },
-    h2({ className: "section-title" }, title),
-    content,
-  );
-}
-
 /**
  * Create a level descriptions table
  * @param {Object} descriptions - Level descriptions object
@@ -80,7 +37,7 @@ export function createDetailSection({ title, content }) {
  */
 export function createLevelTable(descriptions, type = "skill") {
   const levels =
-    type === "skill" ? SKILL_LEVEL_ORDER : BEHAVIOUR_MATURITY_ORDER;
+    type === "skill" ? SKILL_PROFICIENCY_ORDER : BEHAVIOUR_MATURITY_ORDER;
 
   const levelLabels = Object.fromEntries(
     levels.map((level, index) => [level, String(index + 1)]),
@@ -89,7 +46,7 @@ export function createLevelTable(descriptions, type = "skill") {
   const maxLevels = levels.length;
 
   const rows = levels.map((level) => {
-    const description = descriptions?.[level] || "—";
+    const description = descriptions?.[level] || "\u2014";
     const levelIndex = parseInt(levelLabels[level]);
     return tr(
       {},
@@ -147,66 +104,7 @@ export function createLevelCell(levelIndex, maxLevels, levelName) {
 export function createEmptyLevelCell() {
   return td(
     { className: "level-cell" },
-    span({ className: "level-label text-muted" }, "—"),
-  );
-}
-
-/**
- * Create a links list
- * @param {Array<{id: string, name: string}>} items
- * @param {string} basePath - Base path for links (e.g., '/skill')
- * @param {string} [emptyMessage='None']
- * @param {Function} [getDisplayName] - Optional function to get display name
- * @returns {HTMLElement}
- */
-export function createLinksList(
-  items,
-  basePath,
-  emptyMessage = "None",
-  getDisplayName,
-) {
-  if (!items || items.length === 0) {
-    return p({ className: "text-muted" }, emptyMessage);
-  }
-
-  const displayFn = getDisplayName || ((item) => item.name);
-  const links = items.map((item) =>
-    a({ href: `#${basePath}/${item.id}` }, displayFn(item)),
-  );
-
-  return div({ className: "links-list" }, ...links);
-}
-
-/**
- * Create a tags list
- * @param {string[]} tags
- * @param {string} [emptyMessage='None']
- * @returns {HTMLElement}
- */
-export function createTagsList(tags, emptyMessage = "None") {
-  if (!tags || tags.length === 0) {
-    return p({ className: "text-muted" }, emptyMessage);
-  }
-
-  return div({ className: "info-tags" }, ...tags.map((tag) => createTag(tag)));
-}
-
-/**
- * Create a detail grid item
- * @param {string} label
- * @param {string|HTMLElement} value
- * @returns {HTMLElement}
- */
-export function createDetailItem(label, value) {
-  const valueEl =
-    typeof value === "string"
-      ? div({ className: "detail-item-value" }, value)
-      : value;
-
-  return div(
-    { className: "detail-item" },
-    div({ className: "detail-item-label" }, label),
-    valueEl,
+    span({ className: "level-label text-muted" }, "\u2014"),
   );
 }
 

package/src/components/error-page.js

@@ -1,72 +1,12 @@
 /**
  * Error page components
+ *
+ * Re-exports from @forwardimpact/libui/components/error-page.
  */
 
-import { render, div, h1, p, a } from "../lib/render.js";
-
-/**
- * Render a not found error page
- * @param {Object} options - Configuration options
- * @param {string} options.entityType - Type of entity not found (e.g., 'Skill', 'Behaviour')
- * @param {string} options.entityId - ID that was not found
- * @param {string} options.backPath - Path to navigate back to
- * @param {string} options.backText - Text for back link
- */
-export function renderNotFound({ entityType, entityId, backPath, backText }) {
-  render(
-    div(
-      { className: "error-message" },
-      h1({}, `${entityType} Not Found`),
-      p({}, `No ${entityType.toLowerCase()} found with ID: ${entityId}`),
-      a({ href: `#${backPath}` }, backText),
-    ),
-  );
-}
-
-/**
- * Create a not found error element (without rendering)
- * @param {Object} options - Configuration options
- * @param {string} options.entityType - Type of entity not found
- * @param {string} options.entityId - ID that was not found
- * @param {string} options.backPath - Path to navigate back to
- * @param {string} options.backText - Text for back link
- * @returns {HTMLElement}
- */
-export function createNotFound({ entityType, entityId, backPath, backText }) {
-  return div(
-    { className: "error-message" },
-    h1({}, `${entityType} Not Found`),
-    p({}, `No ${entityType.toLowerCase()} found with ID: ${entityId}`),
-    a({ href: `#${backPath}` }, backText),
-  );
-}
-
-/**
- * Create an invalid state error element
- * @param {Object} options - Configuration options
- * @param {string} options.title - Error title
- * @param {string} options.message - Error message
- * @param {string} options.backPath - Path to navigate back to
- * @param {string} options.backText - Text for back link
- * @returns {HTMLElement}
- */
-export function createErrorMessage({ title, message, backPath, backText }) {
-  return div(
-    { className: "error-message" },
-    h1({}, title),
-    p({}, message),
-    a({ href: `#${backPath}` }, backText),
-  );
-}
-
-/**
- * Render an invalid state error page
- * @param {Object} options - Configuration options
- * @param {string} options.title - Error title
- * @param {string} options.message - Error message
- * @param {string} options.backPath - Path to navigate back to
- * @param {string} options.backText - Text for back link
- */
-export function renderError({ title, message, backPath, backText }) {
-  render(createErrorMessage({ title, message, backPath, backText }));
-}
+export {
+  renderNotFound,
+  createNotFound,
+  createErrorMessage,
+  renderError,
+} from "@forwardimpact/libui/components/error-page";

package/src/components/grid.js

@@ -1,109 +1,15 @@
 /**
  * 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);
-}
+ * Re-exports from @forwardimpact/libui/components/grid.
+ */
+
+export {
+  createAutoGrid,
+  createFixedGrid,
+  createSelectorGrid,
+  createDetailGrid,
+  createRadarGrid,
+  createStatsGrid,
+  createCardGrid,
+} from "@forwardimpact/libui/components/grid";

package/src/components/list.js

@@ -1,120 +1,11 @@
 /**
  * Reusable list component
+ *
+ * Re-exports from @forwardimpact/libui/components/list.
  */
 
-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());
-}
+export {
+  createSearchBar,
+  createCardList,
+  createGroupedList,
+} from "@forwardimpact/libui/components/list";

package/src/components/nav.js

@@ -1,64 +1,11 @@
 /**
  * Navigation component helpers
+ *
+ * Re-exports from @forwardimpact/libui/components/nav.
  */
 
-import { div, a } from "../lib/render.js";
-
-/**
- * Update the active navigation link in the drawer
- * @param {string} path - Current path
- */
-export function updateActiveNav(path) {
-  const links = document.querySelectorAll("#drawer-nav 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;
-}
+export {
+  updateActiveNav,
+  createBackLink,
+  createBreadcrumbs,
+} from "@forwardimpact/libui/components/nav";

package/src/components/radar-chart.js

@@ -8,7 +8,7 @@
 import { RadarChart } from "../lib/radar.js";
 import { div, h3 } from "../lib/render.js";
 import {
-  getSkillLevelIndex,
+  getSkillProficiencyIndex,
   getBehaviourMaturityIndex,
   formatLevel,
 } from "../lib/render.js";
@@ -33,9 +33,9 @@ export function createSkillRadar(skillMatrix, options = {}) {
 
     const data = skillMatrix.map((skill) => ({
       label: skill.skillName,
-      value: getSkillLevelIndex(skill.level),
+      value: getSkillProficiencyIndex(skill.proficiency),
       maxValue: 5,
-      description: `${formatLevel(skill.type)} skill - ${formatLevel(skill.level)}`,
+      description: `${formatLevel(skill.type)} skill - ${formatLevel(skill.proficiency)}`,
     }));
 
     const chart = new RadarChart({

package/src/components/skill-matrix.js

@@ -15,10 +15,10 @@ import {
   td,
   a,
 } from "../lib/render.js";
-import { getSkillLevelIndex } from "../lib/render.js";
+import { getSkillProficiencyIndex } from "../lib/render.js";
 import { createLevelCell } from "./detail.js";
 import { createBadge } from "./card.js";
-import { SKILL_LEVEL_ORDER } from "@forwardimpact/map/levels";
+import { SKILL_PROFICIENCY_ORDER } from "@forwardimpact/map/levels";
 import { truncate } from "../formatters/shared.js";
 
 /**
@@ -28,8 +28,8 @@ import { truncate } from "../formatters/shared.js";
  */
 function sortByLevelDescending(skills) {
   return [...skills].sort((a, b) => {
-    const levelA = SKILL_LEVEL_ORDER.indexOf(a.level);
-    const levelB = SKILL_LEVEL_ORDER.indexOf(b.level);
+    const levelA = SKILL_PROFICIENCY_ORDER.indexOf(a.level);
+    const levelB = SKILL_PROFICIENCY_ORDER.indexOf(b.level);
     if (levelB !== levelA) {
       return levelB - levelA;
     }
@@ -50,7 +50,7 @@ export function createSkillMatrix(skillMatrix) {
   const sortedSkills = sortByLevelDescending(skillMatrix);
 
   const rows = sortedSkills.map((skill) => {
-    const levelIndex = getSkillLevelIndex(skill.level);
+    const levelIndex = getSkillProficiencyIndex(skill.proficiency);
 
     return tr(
       { className: skill.isHumanOnly ? "human-only-row" : "" },
@@ -69,10 +69,10 @@ export function createSkillMatrix(skillMatrix) {
           : null,
       ),
       td({}, createBadge(skill.capability, skill.capability)),
-      createLevelCell(levelIndex, 5, skill.level),
+      createLevelCell(levelIndex, 5, skill.proficiency),
       td(
         { className: "skill-description" },
-        truncate(skill.levelDescription, 80),
+        truncate(skill.proficiencyDescription, 80),
       ),
     );
   });