@db-vincent/components 0.0.0-stage → 0.1.0

package/src/astro/Sidebar.astro

@@ -0,0 +1,215 @@
+---
+import Icon from "./Icon.astro";
+import Badge from "./Badge.astro";
+import "../styles/nav.css";
+
+interface NavItem {
+  label: string;
+  href: string;
+  icon?: string;
+  active?: boolean;
+  badge?: string;
+  open?: boolean;
+  children?: { label: string; href: string; active?: boolean }[];
+}
+
+interface NavGroup {
+  label?: string;
+  items: NavItem[];
+}
+
+interface Props {
+  brand: string;
+  brandHref?: string;
+  groups: NavGroup[];
+  label?: string;
+  id?: string;
+  class?: string;
+}
+
+const {
+  brand,
+  brandHref = "/",
+  groups,
+  label = "Primary",
+  id = "ds-sidebar",
+  class: className,
+} = Astro.props;
+---
+
+<header class="ds-nav__mobilebar">
+  <a class="ds-nav__brand" href={brandHref}>
+    <span class="ds-nav__brand-mark" aria-hidden="true">
+      <Icon name="terminal" size={16} />
+    </span>
+    {brand}
+  </a>
+  <button
+    class="ds-nav__toggle"
+    type="button"
+    aria-controls={id}
+    aria-expanded="false"
+    data-nav-toggle
+  >
+    <Icon name="menu" size={20} label="Open navigation" />
+  </button>
+</header>
+
+<aside class:list={["ds-nav", className]} id={id} data-nav data-open="false">
+  <a class="ds-nav__brand" href={brandHref}>
+    <span class="ds-nav__brand-mark" aria-hidden="true">
+      <Icon name="terminal" size={16} />
+    </span>
+    {brand}
+  </a>
+
+  <div class="ds-nav__scroll">
+    <nav aria-label={label}>
+      {groups.map((group) => (
+        <div class="ds-nav__group">
+          {group.label && <div class="ds-nav__group-label">{group.label}</div>}
+          <ul class="ds-nav__list">
+            {group.items.map((item) =>
+              item.children?.length ? (
+                <li>
+                  <details
+                    class="ds-nav__submenu"
+                    open={
+                      item.open || item.children.some((child) => child.active)
+                    }
+                  >
+                    <summary
+                      class="ds-nav__summary"
+                      data-active={
+                        item.children.some((child) => child.active)
+                          ? "true"
+                          : undefined
+                      }
+                    >
+                      {item.icon && (
+                        <Icon name={item.icon} size={16} class="ds-nav__icon" />
+                      )}
+                      <span>{item.label}</span>
+                      <Icon
+                        name="chevron-right"
+                        size={14}
+                        class="ds-nav__chevron"
+                      />
+                    </summary>
+                    <ul class="ds-nav__list">
+                      {item.children.map((child) => (
+                        <li>
+                          <a
+                            class="ds-nav__link"
+                            href={child.href}
+                            aria-current={child.active ? "page" : undefined}
+                          >
+                            <span>{child.label}</span>
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </details>
+                </li>
+              ) : (
+                <li>
+                  <a
+                    class="ds-nav__link"
+                    href={item.href}
+                    aria-current={item.active ? "page" : undefined}
+                  >
+                    {item.icon && (
+                      <Icon name={item.icon} size={16} class="ds-nav__icon" />
+                    )}
+                    <span>{item.label}</span>
+                    {item.badge && (
+                      <span class="ds-nav__badge">
+                        <Badge>{item.badge}</Badge>
+                      </span>
+                    )}
+                  </a>
+                </li>
+              ),
+            )}
+          </ul>
+        </div>
+      ))}
+    </nav>
+  </div>
+
+  <div class="ds-nav__footer">
+    <slot />
+  </div>
+</aside>
+<div class="ds-nav__backdrop" data-nav-close hidden></div>
+
+<script>
+  const setup = () => {
+    document
+      .querySelectorAll<HTMLElement>("[data-nav-toggle]")
+      .forEach((toggle) => {
+        if (toggle.dataset.bound) return;
+        toggle.dataset.bound = "true";
+        const id = toggle.getAttribute("aria-controls");
+        const nav = id ? document.getElementById(id) : null;
+        if (!nav) return;
+        const backdrop = nav.nextElementSibling as HTMLElement | null;
+
+        const setOpen = (open: boolean) => {
+          nav.dataset.open = String(open);
+          toggle.setAttribute("aria-expanded", String(open));
+          toggle.setAttribute(
+            "aria-label",
+            open ? "Close navigation" : "Open navigation",
+          );
+          if (backdrop) backdrop.hidden = !open;
+          document.body.style.overflow = open ? "hidden" : "";
+          if (open) {
+            const first = nav.querySelector<HTMLElement>("a, button, summary");
+            first?.focus();
+          } else {
+            toggle.focus();
+          }
+        };
+
+        toggle.addEventListener("click", () =>
+          setOpen(nav.dataset.open !== "true"),
+        );
+        backdrop?.addEventListener("click", () => setOpen(false));
+        nav.addEventListener("keydown", (event) => {
+          if (event.key === "Escape" && nav.dataset.open === "true") {
+            setOpen(false);
+            return;
+          }
+          if (event.key !== "Tab" || nav.dataset.open !== "true") return;
+          const focusable = Array.from(
+            nav.querySelectorAll<HTMLElement>(
+              'a[href], button:not([disabled]), summary, [tabindex]:not([tabindex="-1"])',
+            ),
+          ).filter((element) =>
+            // Links inside a closed <details> are not reachable; skip them.
+            typeof element.checkVisibility === "function"
+              ? element.checkVisibility()
+              : element.offsetParent !== null,
+          );
+          if (!focusable.length) return;
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (event.shiftKey && document.activeElement === first) {
+            event.preventDefault();
+            last.focus();
+          } else if (!event.shiftKey && document.activeElement === last) {
+            event.preventDefault();
+            first.focus();
+          }
+        });
+        window.addEventListener("resize", () => {
+          if (window.innerWidth > 900 && nav.dataset.open === "true")
+            setOpen(false);
+        });
+      });
+  };
+
+  setup();
+  document.addEventListener("astro:page-load", setup);
+</script>

package/src/astro/Skeleton.astro

@@ -0,0 +1,39 @@
+---
+import "../styles/skeleton.css";
+
+/**
+ * Skeleton. Decorative by definition: aria-hidden, so a loading region must
+ * expose its own status ("Loading invoices…") and set aria-busy on the region.
+ */
+interface Props {
+  variant?: "image" | "heading" | "paragraph";
+  lines?: number;
+  width?: string;
+  class?: string;
+}
+
+const {
+  variant = "paragraph",
+  lines = 3,
+  width,
+  class: className,
+} = Astro.props;
+---
+
+{variant === "paragraph" ? (
+  <div
+    class:list={["ds-skeleton-stack", className]}
+    aria-hidden="true"
+    style={width ? `width:${width}` : undefined}
+  >
+    {Array.from({ length: lines }).map(() => (
+      <span class="ds-skeleton ds-skeleton--text"></span>
+    ))}
+  </div>
+) : (
+  <span
+    class:list={["ds-skeleton", `ds-skeleton--${variant}`, className]}
+    aria-hidden="true"
+    style={width ? `width:${width}` : undefined}
+  ></span>
+)}

package/src/astro/Spinner.astro

@@ -0,0 +1,19 @@
+---
+import "../styles/spinner.css";
+
+/** Loading spinner. Announces through a visually hidden status, not motion. */
+interface Props {
+  size?: "sm" | "md" | "lg";
+  label?: string;
+  class?: string;
+}
+
+const { size = "md", label = "Loading", class: className } = Astro.props;
+---
+
+<span
+  class:list={["ds-spinner", size !== "md" && `ds-spinner--${size}`, className]}
+  role="status"
+>
+  <span class="ds-sr-only">{label}…</span>
+</span>

package/src/astro/Table.astro

@@ -0,0 +1,254 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/input.css";
+import "../styles/table.css";
+
+type Cell =
+  | string
+  | number
+  | {
+      text: string | number;
+      mono?: boolean;
+      kbd?: boolean;
+      swatch?: string;
+    };
+
+interface Column {
+  key: string;
+  label: string;
+  align?: "start" | "end";
+  numeric?: boolean;
+}
+
+interface Props {
+  columns: Column[];
+  rows: Record<string, Cell>[];
+  caption: string;
+  hideCaption?: boolean;
+  empty?: string;
+  sortable?: boolean;
+  filterable?: boolean;
+  filterLabel?: string;
+  filterPlaceholder?: string;
+  class?: string;
+}
+
+const {
+  columns,
+  rows,
+  caption,
+  hideCaption = false,
+  empty = "No records yet.",
+  sortable = false,
+  filterable = false,
+  filterLabel = "Filter rows",
+  filterPlaceholder = "Filter…",
+  class: className,
+} = Astro.props;
+
+const filterId = `table-filter-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<div class:list={["ds-table-wrap", className]} data-ds-table>
+  {filterable && (
+    <div class="ds-table__toolbar">
+      <label class="ds-sr-only" for={filterId}>
+        {filterLabel}
+      </label>
+      <input
+        class="ds-input ds-input--sm ds-table__filter"
+        id={filterId}
+        type="search"
+        placeholder={filterPlaceholder}
+        data-table-filter
+      />
+      <span class="ds-table__count" aria-live="polite" data-table-count>
+        {rows.length} {rows.length === 1 ? "row" : "rows"}
+      </span>
+    </div>
+  )}
+  <table class:list={["ds-table", columns.length >= 4 && "ds-table--wide"]}>
+    <caption class:list={["ds-table__caption", hideCaption && "ds-sr-only"]}>
+      {caption}
+    </caption>
+    <thead>
+      <tr>
+        {columns.map((column, index) => (
+          <th
+            scope="col"
+            class:list={[
+              column.numeric && "is-numeric",
+              column.align === "end" && "is-end",
+            ]}
+            aria-sort={sortable ? "none" : undefined}
+          >
+            {sortable ? (
+              <button
+                class="ds-table__sort-button"
+                type="button"
+                data-sort-index={index}
+              >
+                {column.label}
+                <span class="ds-table__sort" aria-hidden="true">
+                  <Icon
+                    name="chevrons-up-down"
+                    size={14}
+                    class="ds-table__sort-idle"
+                  />
+                  <Icon
+                    name="chevron-down"
+                    size={14}
+                    class="ds-table__sort-dir"
+                  />
+                </span>
+              </button>
+            ) : (
+              column.label
+            )}
+          </th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {rows.length === 0 ? (
+        <tr>
+          <td class="ds-table__empty" colspan={columns.length}>
+            {empty}
+          </td>
+        </tr>
+      ) : (
+        rows.map((row) => (
+          <tr data-row>
+            {columns.map((column) => {
+              const cell = row[column.key];
+              return (
+                <td
+                  class:list={[
+                    column.numeric && "is-numeric",
+                    column.align === "end" && "is-end",
+                  ]}
+                >
+                  {typeof cell === "object" ? (
+                    <>
+                      {cell.swatch && (
+                        <span
+                          class="ds-table__swatch"
+                          style={`background:${cell.swatch}`}
+                          aria-hidden="true"
+                        ></span>
+                      )}
+                      {cell.kbd ? (
+                        <kbd>{cell.text}</kbd>
+                      ) : (
+                        <span class:list={[cell.mono && "ds-table__mono"]}>
+                          {cell.text}
+                        </span>
+                      )}
+                    </>
+                  ) : (
+                    cell
+                  )}
+                </td>
+              );
+            })}
+          </tr>
+        ))
+      )}
+      {filterable && rows.length > 0 && (
+        <tr data-table-empty hidden>
+          <td class="ds-table__empty" colspan={columns.length}>
+            No matching rows.
+          </td>
+        </tr>
+      )}
+    </tbody>
+  </table>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>("[data-ds-table]").forEach((root) => {
+    const tbody = root.querySelector<HTMLElement>("tbody");
+    const filter = root.querySelector<HTMLInputElement>("[data-table-filter]");
+    const count = root.querySelector<HTMLElement>("[data-table-count]");
+    const empty = root.querySelector<HTMLElement>("[data-table-empty]");
+    const sortButtons = Array.from(
+      root.querySelectorAll<HTMLButtonElement>("[data-sort-index]"),
+    );
+    if (!tbody) return;
+
+    const rows = Array.from(
+      tbody.querySelectorAll<HTMLTableRowElement>("tr[data-row]"),
+    );
+    let sortIndex = -1;
+    let direction = 1;
+
+    const textFor = (row: HTMLTableRowElement, index: number) =>
+      (row.cells[index]?.textContent || "").trim();
+
+    const numberFor = (value: string) => {
+      if (!/[0-9]/.test(value)) return null;
+      const parsed = Number(value.replace(/[^0-9.-]/g, ""));
+      return Number.isFinite(parsed) ? parsed : null;
+    };
+
+    const compare = (a: string, b: string) => {
+      const first = numberFor(a);
+      const second = numberFor(b);
+      if (first !== null && second !== null) return first - second;
+      return a.localeCompare(b);
+    };
+
+    const apply = () => {
+      const query = filter?.value.trim().toLowerCase() ?? "";
+      let visible = 0;
+
+      rows.forEach((row) => {
+        const match = !query || row.textContent.toLowerCase().includes(query);
+        row.hidden = !match;
+        if (match) visible++;
+      });
+
+      if (sortIndex >= 0) {
+        rows.sort(
+          (a, b) =>
+            direction * compare(textFor(a, sortIndex), textFor(b, sortIndex)),
+        );
+        rows.forEach((row) => tbody.append(row));
+      }
+
+      if (empty) empty.hidden = visible !== 0;
+      if (count) {
+        count.textContent = `${visible} ${visible === 1 ? "row" : "rows"}`;
+      }
+    };
+
+    sortButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        const header = button.closest("th");
+        const index = Number(button.dataset.sortIndex);
+        direction =
+          sortIndex === index &&
+          header?.getAttribute("aria-sort") === "ascending"
+            ? -1
+            : 1;
+        sortIndex = index;
+        sortButtons.forEach((other) => {
+          const otherHeader = other.closest("th");
+          if (!otherHeader) return;
+          otherHeader.setAttribute(
+            "aria-sort",
+            other === button
+              ? direction === 1
+                ? "ascending"
+                : "descending"
+              : "none",
+          );
+        });
+        apply();
+      });
+    });
+
+    filter?.addEventListener("input", apply);
+    apply();
+  });
+</script>