babavoss 0.0.1 → 0.0.2

package/src/web/ui.tsx

@@ -0,0 +1,135 @@
+// The kit: a few components over the one theme stylesheet the page loads.
+// Plain elements with classes; a view may use them or write its own markup,
+// which the theme also styles.
+import { useEffect, useRef, useState, type KeyboardEvent, type ButtonHTMLAttributes, type InputHTMLAttributes, type ReactNode, type SelectHTMLAttributes, type TextareaHTMLAttributes } from "react";
+import { filterItems, move, type Item } from "./list.ts";
+
+const cx = (...c: (string | false | null | undefined)[]) => c.filter(Boolean).join(" ");
+
+export type ButtonVariant = "default" | "primary" | "quiet" | "danger";
+
+export function Button({ variant = "default", className, type = "button", ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: ButtonVariant }) {
+  return <button type={type} className={cx("bv-button", variant !== "default" && `bv-${variant}`, className)} {...rest} />;
+}
+
+export function Input({ className, ...rest }: InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={cx("bv-input", className)} {...rest} />;
+}
+
+export function Textarea({ className, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return <textarea className={cx("bv-input", "bv-textarea", className)} {...rest} />;
+}
+
+export function Select({ className, ...rest }: SelectHTMLAttributes<HTMLSelectElement>) {
+  return <select className={cx("bv-input", "bv-select", className)} {...rest} />;
+}
+
+export function Kbd({ children }: { children: ReactNode }) {
+  return <kbd className="bv-kbd">{children}</kbd>;
+}
+
+/** A block with a head: a title, and actions on the right. */
+export function Panel({ title, actions, children, className }: { title?: ReactNode; actions?: ReactNode; children?: ReactNode; className?: string }) {
+  return (
+    <section className={cx("bv-panel", className)}>
+      {(title || actions) && <header className="bv-panel-head"><span className="bv-panel-title">{title}</span>{actions}</header>}
+      <div className="bv-panel-body">{children}</div>
+    </section>
+  );
+}
+
+/** Rows of a list: each a line, clickable when it has onClick. */
+export function Rows({ children }: { children: ReactNode }) {
+  return <div className="bv-rows" role="list">{children}</div>;
+}
+
+export function Row({ children, hint, onClick, active }: { children: ReactNode; hint?: ReactNode; onClick?: () => void; active?: boolean }) {
+  const body = <><span className="bv-row-label">{children}</span>{hint != null && <span className="bv-row-hint">{hint}</span>}</>;
+  return onClick
+    ? <button type="button" role="listitem" className={cx("bv-row", "bv-row-button", active && "bv-active")} onClick={onClick}>{body}</button>
+    : <div role="listitem" className={cx("bv-row", active && "bv-active")}>{body}</div>;
+}
+
+/** A table of rows by column. Cells are shown as text; objects as JSON. */
+export function Table({ columns, rows }: { columns: string[]; rows: Record<string, unknown>[] }) {
+  const cell = (v: unknown) => (v === undefined ? "" : v === null ? "null" : typeof v === "object" ? JSON.stringify(v) : String(v));
+  return (
+    <div className="bv-table-wrap">
+      <table className="bv-table">
+        <thead><tr>{columns.map((c) => <th key={c}>{c}</th>)}</tr></thead>
+        <tbody>{rows.map((r, i) => <tr key={i}>{columns.map((c) => <td key={c}>{cell(r[c])}</td>)}</tr>)}</tbody>
+      </table>
+    </div>
+  );
+}
+
+/** A modal dialog over the page. Escape and a click outside close it. */
+export function Dialog({ open, title, onClose, children, footer }: { open: boolean; title: ReactNode; onClose: () => void; children?: ReactNode; footer?: ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    const before = document.activeElement as HTMLElement | null;
+    ref.current?.focus();
+    return () => before?.focus?.();
+  }, [open]);
+  if (!open) return null;
+  return (
+    <div className="bv-overlay" onPointerDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div ref={ref} className="bv-dialog" role="dialog" aria-modal="true" aria-label={typeof title === "string" ? title : undefined} tabIndex={-1}
+        onKeyDown={(e) => { if (e.key === "Escape") { e.stopPropagation(); onClose(); } }}>
+        <header className="bv-dialog-head">{title}</header>
+        <div className="bv-dialog-body">{children}</div>
+        <footer className="bv-dialog-foot">{footer ?? <Button onClick={onClose}>Close</Button>}</footer>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A filter over a grouped list of commands, driven by the keyboard: arrows
+ * move, Enter runs, Escape leaves.
+ */
+export function CommandList<T extends Item>({ items, onRun, onEscape, placeholder = "Type to filter", empty = "Nothing matches." }: {
+  items: T[]; onRun: (item: T) => void; onEscape?: () => void; placeholder?: string; empty?: ReactNode;
+}) {
+  const [query, setQuery] = useState("");
+  const [index, setIndex] = useState(0);
+  const list = useRef<HTMLDivElement>(null);
+  const shown = filterItems(items, query);
+  const at = Math.min(index, Math.max(0, shown.length - 1));
+  useEffect(() => {
+    list.current?.querySelector<HTMLElement>(`[data-index="${at}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [at]);
+  const key = (e: KeyboardEvent) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); setIndex(move(at, e.key === "ArrowDown" ? 1 : -1, shown.length)); }
+    else if (e.key === "Home") { e.preventDefault(); setIndex(0); }
+    else if (e.key === "End") { e.preventDefault(); setIndex(Math.max(0, shown.length - 1)); }
+    else if (e.key === "Enter") { e.preventDefault(); const it = shown[at]; if (it) onRun(it); }
+    else if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); onEscape?.(); }
+  };
+  let group: string | null = null;
+  return (
+    <div className="bv-cmd" onKeyDown={key}>
+      <input className="bv-cmd-input" autoFocus value={query} placeholder={placeholder} aria-label={placeholder}
+        role="combobox" aria-expanded="true" aria-controls="bv-cmd-list" aria-activedescendant={shown[at] ? `bv-cmd-${at}` : undefined}
+        onChange={(e) => { setQuery(e.target.value); setIndex(0); }} />
+      <div className="bv-cmd-list" id="bv-cmd-list" role="listbox" ref={list}>
+        {shown.length === 0 && <div className="bv-cmd-empty">{empty}</div>}
+        {shown.map((it, i) => {
+          const head = it.group !== group ? <div className="bv-cmd-group" role="presentation">{it.group}</div> : null;
+          group = it.group;
+          return (
+            <div key={it.id} role="presentation">
+              {head}
+              <div id={`bv-cmd-${i}`} role="option" aria-selected={i === at} data-index={i} className={cx("bv-cmd-item", i === at && "bv-active")}
+                onPointerMove={() => i !== at && setIndex(i)} onClick={() => onRun(it)}>
+                <span className="bv-cmd-label">{it.label}</span>
+                {it.hint && <span className="bv-cmd-hint">{it.hint}</span>}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/README.md

@@ -1,5 +0,0 @@
-# babavoss
-
-Baba Voss: a project's own program, run by voss.
-
-Not yet released. See https://babavoss.org.