@pure-ds/storybook 0.1.0

package/src/js/pds-core/pds-enhancer-metadata.js

@@ -0,0 +1,75 @@
+export const enhancerMetadata = [
+  {
+    selector: "nav[data-dropdown]",
+    description:
+      "Enhances a nav element with data-dropdown to function as a dropdown menu.",
+    demoHtml: `
+      <nav data-dropdown>
+        <button class="btn-primary">Menu</button>
+        <menu>
+          <li><a href="#">Item 1</a></li>
+          <li><a href="#">Item 2</a></li>
+        </menu>
+      </nav>
+    `.trim(),
+  },
+  {
+    selector: "label[data-toggle]",
+    description: "Creates a toggle switch element from a checkbox.",
+    demoHtml: `
+      <label data-toggle>
+        <input type="checkbox">
+        <span data-label>Enable notifications</span>
+      </label>
+    `.trim(),
+  },
+  {
+    selector: 'input[type="range"]',
+    description: "Enhances range inputs with an attached <output>.",
+    demoHtml: `
+      <label class="range-output">
+        <span data-label>Volume</span>
+        <input type="range" min="0" max="100" value="40">
+      </label>
+    `.trim(),
+  },
+  {
+    selector: "form [required]",
+    description:
+      "Enhances required form fields using an asterisk in the label.",
+    demoHtml: `
+      <form action'#" method="post">
+      <label>
+        <span>Field Label</span>
+        <input type="text" required>
+      </label>
+        <nav class="form-actions">
+          <button type="submit" class="btn-primary">Submit</button>
+        </nav>
+      </form>
+    `.trim(),
+  },
+  {
+    selector: "fieldset[role=group][data-open]",
+    description:
+      "Enhances a checkbox/radio group to be open (have a way to add and remove items).",
+    demoHtml: `
+      <fieldset role="group" data-open>
+        <label>
+          <span data-label>Test</span>
+          <input value="lala" name="test1" type="radio" />
+        </label>
+      </fieldset>
+    `.trim(),
+  },
+  {
+    selector: "button, a[class*='btn-']",
+    description:
+      "Automatically manages spinner icon for buttons with .btn-working class",
+    demoHtml: `
+      <button class="btn-primary btn-working">
+        <span>Saving</span>
+      </button>
+    `.trim(),
+  },
+];

package/src/js/pds-core/pds-enhancers.js

@@ -0,0 +1,357 @@
+import { enhancerMetadata } from "./pds-enhancer-metadata.js";
+
+function enhanceDropdown(elem) {
+  if (elem.dataset.enhancedDropdown) return;
+  elem.dataset.enhancedDropdown = "true";
+  const menu = elem.querySelector("menu");
+  if (!menu) return;
+
+  const trigger =
+    elem.querySelector("[data-dropdown-toggle]") ||
+    elem.querySelector("button");
+
+  if (trigger && !trigger.hasAttribute("type")) {
+    trigger.setAttribute("type", "button");
+  }
+
+  if (!menu.id) {
+    menu.id = `dropdown-${Math.random().toString(36).slice(2, 9)}`;
+  }
+
+  menu.setAttribute("role", menu.getAttribute("role") || "menu");
+  if (!menu.hasAttribute("aria-hidden")) {
+    menu.setAttribute("aria-hidden", "true");
+  }
+
+  if (trigger) {
+    trigger.setAttribute("aria-haspopup", "true");
+    trigger.setAttribute("aria-controls", menu.id);
+    trigger.setAttribute("aria-expanded", "false");
+  }
+
+  const resolveDirection = () => {
+    const mode = (elem.getAttribute("data-mode") || "auto").toLowerCase();
+    if (mode === "up" || mode === "down") return mode;
+    const rect = elem.getBoundingClientRect();
+    const spaceBelow = Math.max(0, window.innerHeight - rect.bottom);
+    const spaceAbove = Math.max(0, rect.top);
+    return spaceAbove > spaceBelow ? "up" : "down";
+  };
+
+  const openMenu = () => {
+    elem.dataset.dropdownDirection = resolveDirection();
+    menu.setAttribute("aria-hidden", "false");
+    trigger?.setAttribute("aria-expanded", "true");
+  };
+
+  const closeMenu = () => {
+    menu.setAttribute("aria-hidden", "true");
+    trigger?.setAttribute("aria-expanded", "false");
+  };
+
+  const toggleMenu = () => {
+    if (menu.getAttribute("aria-hidden") === "false") {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  };
+
+  trigger?.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    toggleMenu();
+  });
+
+  document.addEventListener("click", (event) => {
+    if (!elem.contains(event.target)) {
+      closeMenu();
+    }
+  });
+
+  elem.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      closeMenu();
+      trigger?.focus();
+    }
+  });
+
+  elem.addEventListener("focusout", (event) => {
+    if (!event.relatedTarget || !elem.contains(event.relatedTarget)) {
+      closeMenu();
+    }
+  });
+}
+
+function enhanceToggle(elem) {
+  if (elem.dataset.enhancedToggle) return;
+  elem.dataset.enhancedToggle = "true";
+  const checkbox = elem.querySelector('input[type="checkbox"]');
+  if (!checkbox) return;
+
+  if (!elem.hasAttribute("tabindex")) {
+    elem.setAttribute("tabindex", "0");
+  }
+
+  elem.setAttribute("role", "switch");
+  elem.setAttribute("aria-checked", checkbox.checked ? "true" : "false");
+
+  const toggleSwitch = document.createElement("span");
+  toggleSwitch.className = "toggle-switch";
+  toggleSwitch.setAttribute("role", "presentation");
+  toggleSwitch.setAttribute("aria-hidden", "true");
+  const knob = document.createElement("span");
+  knob.className = "toggle-knob";
+  toggleSwitch.appendChild(knob);
+  elem.insertBefore(toggleSwitch, checkbox.nextSibling);
+
+  const updateAria = () => {
+    elem.setAttribute("aria-checked", checkbox.checked ? "true" : "false");
+  };
+
+  const toggle = () => {
+    if (checkbox.disabled) return;
+    checkbox.checked = !checkbox.checked;
+    updateAria();
+    checkbox.dispatchEvent(new Event("change", { bubbles: true }));
+  };
+
+  elem.addEventListener("click", (event) => {
+    event.preventDefault();
+    toggle();
+  });
+
+  elem.addEventListener("keydown", (event) => {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      toggle();
+    }
+  });
+
+  checkbox.addEventListener("change", updateAria);
+}
+
+function enhanceRange(elem) {
+  if (elem.dataset.enhancedRange) return;
+
+  const label = elem.closest("label");
+  const hasRangeOutputClass = label?.classList.contains("range-output");
+
+  const inputId =
+    elem.id || `range-${Math.random().toString(36).substring(2, 11)}`;
+  const outputId = `${inputId}-output`;
+  elem.id = inputId;
+
+  if (hasRangeOutputClass) {
+    const labelSpan = label.querySelector("span");
+    if (labelSpan && !labelSpan.classList.contains("range-output-wrapper")) {
+      const wrapper = document.createElement("span");
+      wrapper.className = "range-output-wrapper";
+      wrapper.style.display = "flex";
+      wrapper.style.justifyContent = "space-between";
+      wrapper.style.alignItems = "center";
+
+      const textSpan = document.createElement("span");
+      textSpan.textContent = labelSpan.textContent;
+      wrapper.appendChild(textSpan);
+
+      const output = document.createElement("output");
+      output.id = outputId;
+      output.setAttribute("for", inputId);
+      output.style.color =
+        "var(--surface-text-secondary, var(--color-text-secondary))";
+      output.style.fontSize = "0.875rem";
+      output.textContent = elem.value;
+      wrapper.appendChild(output);
+
+      labelSpan.textContent = "";
+      labelSpan.appendChild(wrapper);
+
+      const updateOutput = () => {
+        output.textContent = elem.value;
+      };
+      elem.addEventListener("input", updateOutput);
+    }
+  } else {
+    let container = elem.closest(".range-container");
+    if (!container) {
+      container = document.createElement("div");
+      container.className = "range-container";
+      elem.parentNode?.insertBefore(container, elem);
+      container.appendChild(elem);
+    }
+    container.style.position = "relative";
+
+    const bubble = document.createElement("output");
+    bubble.id = outputId;
+    bubble.setAttribute("for", inputId);
+    bubble.className = "range-bubble";
+    bubble.setAttribute("aria-live", "polite");
+    container.appendChild(bubble);
+
+    const updateBubble = () => {
+      const min = parseFloat(elem.min) || 0;
+      const max = parseFloat(elem.max) || 100;
+      const value = parseFloat(elem.value);
+      const pct = (value - min) / (max - min);
+      bubble.style.left = `calc(${pct * 100}% )`;
+      bubble.textContent = String(value);
+    };
+    const show = () => bubble.classList.add("visible");
+    const hide = () => bubble.classList.remove("visible");
+    elem.addEventListener("input", updateBubble);
+    elem.addEventListener("pointerdown", show);
+    elem.addEventListener("pointerup", hide);
+    elem.addEventListener("pointerleave", hide);
+    elem.addEventListener("focus", show);
+    elem.addEventListener("blur", hide);
+    updateBubble();
+  }
+
+  elem.dataset.enhancedRange = "1";
+}
+
+function enhanceRequired(elem) {
+  const label = elem.closest("label");
+  if (!label) return;
+  if (label.querySelector(".required-asterisk")) return;
+
+  const asterisk = document.createElement("span");
+  asterisk.classList.add("required-asterisk");
+  asterisk.textContent = "*";
+  asterisk.style.marginLeft = "4px";
+  label.querySelector("span").appendChild(asterisk);
+
+  const form = elem.closest("form");
+  if (form && !form.querySelector(".required-legend")) {
+    const legend = document.createElement("div");
+    legend.classList.add("required-legend", "pill", "pill-outline");
+    legend.style.fontSize = "0.9em";
+    legend.style.marginBottom = "8px";
+    legend.textContent = "* Required fields";
+    form.insertBefore(
+      legend,
+      form.querySelector(".form-actions") || form.lastElementChild
+    );
+  }
+}
+
+function enhanceOpenGroup(elem) {
+  if (elem.dataset.enhancedOpenGroup) return;
+  elem.dataset.enhancedOpenGroup = "true";
+
+  elem.classList.add("flex", "flex-wrap", "buttons");
+
+  const addInput = document.createElement("input");
+  addInput.type = "text";
+  addInput.placeholder = "Add item...";
+  addInput.classList.add("input-text", "input-sm");
+  addInput.style.width = "auto";
+  const firstInput = elem.querySelector(
+    'input[type="radio"], input[type="checkbox"]'
+  );
+
+  elem.appendChild(addInput);
+  addInput.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === "Tab") {
+      const value = addInput.value.trim();
+      if (value) {
+        event.preventDefault();
+
+        const type = firstInput.type === "radio" ? "radio" : "checkbox";
+        const id = `open-group-${Math.random()
+          .toString(36)
+          .substring(2, 11)}`;
+        const label = document.createElement("label");
+
+        const span = document.createElement("span");
+        span.setAttribute("data-label", "");
+        span.textContent = value;
+
+        const input = document.createElement("input");
+        input.type = type;
+        input.name =
+          firstInput.name || elem.getAttribute("data-name") || "open-group";
+        input.value = value;
+        input.id = id;
+
+        label.appendChild(span);
+        label.appendChild(input);
+
+        elem.insertBefore(label, addInput);
+        addInput.value = "";
+      }
+    } else if (event.key === "Backspace" && addInput.value === "") {
+      event.preventDefault();
+      const labels = elem.querySelectorAll("label");
+      if (labels.length > 0) {
+        const lastLabel = labels[labels.length - 1];
+        lastLabel.remove();
+      }
+    }
+  });
+}
+
+function enhanceButtonWorking(elem) {
+  if (elem.dataset.enhancedBtnWorking) return;
+  elem.dataset.enhancedBtnWorking = "true";
+
+  let originalIcon = null;
+  let addedIcon = false;
+
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === "class") {
+        const hasWorking = elem.classList.contains("btn-working");
+        const icon = elem.querySelector("pds-icon");
+
+        if (hasWorking) {
+          if (icon) {
+            if (!originalIcon) {
+              originalIcon = icon.getAttribute("icon");
+            }
+            icon.setAttribute("icon", "circle-notch");
+          } else {
+            const newIcon = document.createElement("pds-icon");
+            newIcon.setAttribute("icon", "circle-notch");
+            newIcon.setAttribute("size", "sm");
+            elem.insertBefore(newIcon, elem.firstChild);
+            addedIcon = true;
+          }
+        } else if (mutation.oldValue?.includes("btn-working")) {
+          if (icon) {
+            if (addedIcon) {
+              icon.remove();
+              addedIcon = false;
+            } else if (originalIcon) {
+              icon.setAttribute("icon", originalIcon);
+              originalIcon = null;
+            }
+          }
+        }
+      }
+    });
+  });
+
+  observer.observe(elem, {
+    attributes: true,
+    attributeFilter: ["class"],
+    attributeOldValue: true,
+  });
+}
+
+const enhancerRunners = new Map([
+  ["nav[data-dropdown]", enhanceDropdown],
+  ["label[data-toggle]", enhanceToggle],
+  ['input[type="range"]', enhanceRange],
+  ["form [required]", enhanceRequired],
+  ["fieldset[role=group][data-open]", enhanceOpenGroup],
+  ["button, a[class*='btn-']", enhanceButtonWorking],
+]);
+
+export const defaultPDSEnhancers = enhancerMetadata.map((meta) => ({
+  ...meta,
+  run: enhancerRunners.get(meta.selector) || (() => {}),
+}));
+
+export const defaultPDSEnhancerMetadata = enhancerMetadata;

package/src/js/pds-core/pds-enums.js

@@ -0,0 +1,86 @@
+// Static enums for design system values
+export const enums = {
+  FontWeights: {
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+  },
+  LineHeights: {
+    tight: 1.25,
+    normal: 1.5,
+    relaxed: 1.75,
+  },
+
+  BorderWidths: {
+    hairline: 0.5,
+    thin: 1,
+    medium: 2,
+    thick: 3,
+  },
+
+  RadiusSizes: {
+    none: 0,
+    small: 4,
+    medium: 8,
+    large: 16,
+    xlarge: 24,
+    xxlarge: 32
+  },
+
+  ShadowDepths: {
+    none: "none",
+    light: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    medium:
+      "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    deep: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    extreme: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+  },
+  TransitionSpeeds: {
+    fast: 150,
+    normal: 250,
+    slow: 350,
+  },
+
+  AnimationEasings: {
+    linear: "linear",
+    ease: "ease",
+    "ease-in": "ease-in",
+    "ease-out": "ease-out",
+    "ease-in-out": "ease-in-out",
+    bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+  },
+  TouchTargetSizes: {
+    compact: 36,
+    standard: 44, // iOS/Android accessibility standard
+    comfortable: 48,
+    spacious: 56,
+  },
+
+  LinkStyles: {
+    inline: "inline", // Normal inline text links
+    block: "block", // Block-level links
+    button: "button", // Button-like links (flex with touch target)
+  },
+
+  FocusStyles: {
+    ring: "ring", // Box-shadow ring (default)
+    outline: "outline", // Browser outline
+    border: "border", // Border change
+    glow: "glow", // Subtle glow effect
+  },
+
+  TabSizes: {
+    compact: 2,
+    standard: 4,
+    wide: 8,
+  },
+
+  SelectIcons: {
+    chevron: "chevron", // Standard chevron down
+    arrow: "arrow", // Simple arrow
+    caret: "caret", // Triangle caret
+    none: "none", // No icon
+  },
+};