rastack 0.0.43 → 0.0.45

package/admin/ui/FilterBar.tsx

@@ -0,0 +1,231 @@
+/**
+ * The Linear-style changelist filter bar: active filters render as pill "chips"
+ * (`Field  is  Value  ×`) whose value opens a switcher popover and whose × drops
+ * the filter; a dashed "＋ Filter" button opens a two-level menu (pick a field →
+ * pick a value). Search sits at the right. Every value is served from the
+ * `FilterFieldModel`s discovered by `useFilterModel` (FK target rows, distinct
+ * strings, booleans), so the bar reflects the data, and each pick drives an
+ * equality filter through the engine.
+ */
+import React, { useState } from "react";
+import type { FilterOption } from "../adapters";
+import type { FilterFieldModel } from "../useAdmin";
+import { Popover } from "./Popover";
+import {
+  IconChevronRight,
+  IconClose,
+  IconFilter,
+  IconLink,
+  IconPlus,
+  IconSearch,
+} from "./icons";
+
+function facetIcon(kind: FilterFieldModel["kind"]): React.JSX.Element {
+  return kind === "fk" ? (
+    <IconLink size={15} className="ras-ico" />
+  ) : (
+    <IconFilter size={15} className="ras-ico" />
+  );
+}
+
+function labelFor(facet: FilterFieldModel | undefined, value: string): string {
+  return facet?.options.find((o) => o.value === value)?.label ?? value;
+}
+
+/** A searchable list of value options (used by the add-menu and chip switcher). */
+function OptionList(props: {
+  options: FilterOption[];
+  selected?: string;
+  onPick: (value: string) => void;
+}): React.JSX.Element {
+  const [q, setQ] = useState("");
+  const shown = q
+    ? props.options.filter((o) => o.label.toLowerCase().includes(q.toLowerCase()))
+    : props.options;
+  return (
+    <>
+      {props.options.length > 8 ? (
+        <input
+          className="ras-pop-search"
+          placeholder="Search…"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          autoFocus
+        />
+      ) : null}
+      <div className="ras-pop-list">
+        {shown.length === 0 ? (
+          <div className="ras-pop-empty">No matches</div>
+        ) : (
+          shown.map((o) => (
+            <button
+              key={o.value}
+              type="button"
+              className={"ras-pop-item" + (o.value === props.selected ? " is-selected" : "")}
+              onClick={() => props.onPick(o.value)}
+            >
+              {o.label}
+            </button>
+          ))
+        )}
+      </div>
+    </>
+  );
+}
+
+/** The two-level "add filter" menu: fields → values. */
+function AddFilterMenu(props: {
+  facets: FilterFieldModel[];
+  activeFields: string[];
+  onPick: (field: string, value: string) => void;
+  close: () => void;
+}): React.JSX.Element {
+  const [view, setView] = useState<string | null>(null);
+  const available = props.facets.filter((f) => !props.activeFields.includes(f.name));
+
+  if (view) {
+    const facet = props.facets.find((f) => f.name === view);
+    if (!facet) return <div className="ras-pop-empty">—</div>;
+    return (
+      <>
+        <div className="ras-pop-head" onClick={() => setView(null)}>
+          <IconChevronRight size={14} style={{ transform: "rotate(180deg)" }} />
+          {facet.label}
+        </div>
+        <OptionList
+          options={facet.options}
+          onPick={(v) => {
+            props.onPick(facet.name, v);
+            props.close();
+          }}
+        />
+      </>
+    );
+  }
+
+  return (
+    <div className="ras-pop-list">
+      {available.length === 0 ? (
+        <div className="ras-pop-empty">No more filters</div>
+      ) : (
+        available.map((f) => (
+          <button
+            key={f.name}
+            type="button"
+            className="ras-pop-item"
+            onClick={() => setView(f.name)}
+          >
+            {facetIcon(f.kind)}
+            {f.label}
+            <IconChevronRight size={14} className="ras-pop-item-chev" />
+          </button>
+        ))
+      )}
+    </div>
+  );
+}
+
+export function FilterBar(props: {
+  facets: FilterFieldModel[];
+  filters: Record<string, string>;
+  setFilter: (field: string, value: string) => void;
+  removeFilter: (field: string) => void;
+  clearFilters: () => void;
+  search: string | undefined;
+  setSearch: (value: string | undefined) => void;
+  searchable: boolean;
+}): React.JSX.Element {
+  const active = Object.keys(props.filters);
+  const facetOf = (name: string) => props.facets.find((f) => f.name === name);
+
+  return (
+    <div className="ras-filterbar">
+      {active.map((field) => {
+        const facet = facetOf(field);
+        const value = props.filters[field];
+        return (
+          <span className="ras-chip" key={field}>
+            <span className="ras-chip-key">
+              {facet ? facetIcon(facet.kind) : null}
+              {facet?.label ?? field}
+            </span>
+            <span className="ras-chip-op">is</span>
+            {facet && facet.options.length ? (
+              <Popover
+                trigger={({ toggle }) => (
+                  <span className="ras-chip-val" onClick={toggle} role="button" tabIndex={0}>
+                    {labelFor(facet, value)}
+                  </span>
+                )}
+              >
+                {({ close }) => (
+                  <OptionList
+                    options={facet.options}
+                    selected={value}
+                    onPick={(v) => {
+                      props.setFilter(field, v);
+                      close();
+                    }}
+                  />
+                )}
+              </Popover>
+            ) : (
+              <span className="ras-chip-val" style={{ cursor: "default" }}>
+                {labelFor(facet, value)}
+              </span>
+            )}
+            <span
+              className="ras-chip-x"
+              role="button"
+              tabIndex={0}
+              aria-label={`Remove ${facet?.label ?? field} filter`}
+              onClick={() => props.removeFilter(field)}
+            >
+              <IconClose size={13} />
+            </span>
+          </span>
+        );
+      })}
+
+      {props.facets.length ? (
+        <Popover
+          trigger={({ toggle }) => (
+            <button type="button" className="ras-addfilter" onClick={toggle}>
+              <IconPlus size={14} />
+              Filter
+            </button>
+          )}
+        >
+          {({ close }) => (
+            <AddFilterMenu
+              facets={props.facets}
+              activeFields={active}
+              onPick={props.setFilter}
+              close={close}
+            />
+          )}
+        </Popover>
+      ) : null}
+
+      {active.length > 1 ? (
+        <button type="button" className="ras-clearfilter" onClick={props.clearFilters}>
+          Clear all
+        </button>
+      ) : null}
+
+      <span className="ras-grow" />
+
+      {props.searchable ? (
+        <span className="ras-search">
+          <IconSearch size={15} className="ras-search-ico" />
+          <input
+            type="search"
+            placeholder="Search…"
+            value={props.search ?? ""}
+            onChange={(e) => props.setSearch(e.target.value || undefined)}
+          />
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/admin/ui/Popover.tsx

@@ -0,0 +1,54 @@
+/**
+ * A tiny controlled popover: a trigger + a floating panel that closes on
+ * outside-click or Escape. Used by the Linear-style filter bar (the "add
+ * filter" menu and each chip's value switcher). Deliberately dependency-free —
+ * no portal, no positioning lib — the panel is absolutely positioned under its
+ * trigger and styled by `ui/styles.ts`.
+ */
+import React, { useEffect, useRef, useState } from "react";
+
+export interface PopoverRenderProps {
+  open: boolean;
+  toggle: () => void;
+  close: () => void;
+}
+
+export function Popover(props: {
+  align?: "left" | "right";
+  trigger: (p: PopoverRenderProps) => React.ReactNode;
+  children: (p: { close: () => void }) => React.ReactNode;
+}): React.JSX.Element {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const close = () => setOpen(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div className="ras-pop-wrap" ref={ref}>
+      {props.trigger({ open, toggle: () => setOpen((o) => !o), close })}
+      {open ? (
+        <div
+          className={"ras-pop" + (props.align === "right" ? " align-right" : "")}
+          role="menu"
+        >
+          {props.children({ close })}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/admin/ui/Sidebar.tsx

@@ -0,0 +1,86 @@
+/**
+ * The persistent left rail — the "models on the side". Every admin-enabled
+ * resource, grouped by app, always visible so navigation between models is one
+ * click from anywhere. The active model is highlighted; a footer carries the
+ * light/dark toggle (dogfooding `rastack/theme`'s `useThemeMode`, which
+ * recascades via CSS variables with no re-render).
+ */
+import React, { useMemo } from "react";
+import { useThemeMode } from "../../theme";
+import { humanizeKey } from "../../components";
+import type { AdminResource } from "../adapters";
+import { adminResources } from "../adapters";
+import { BrandMark, IconMoon, IconSun, IconTable } from "./icons";
+
+export function Sidebar(props: {
+  resources: AdminResource[];
+  activeKey?: string;
+}): React.JSX.Element {
+  const [mode, setMode] = useThemeMode();
+
+  const byApp = useMemo(() => {
+    const map = new Map<string, AdminResource[]>();
+    for (const r of adminResources(props.resources)) {
+      const list = map.get(r.app) ?? [];
+      list.push(r);
+      map.set(r.app, list);
+    }
+    return [...map.entries()]
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([app, models]) => [
+        app,
+        models.slice().sort((a, b) => a.model.localeCompare(b.model)),
+      ] as const);
+  }, [props.resources]);
+
+  const isDark = mode === "dark";
+
+  return (
+    <aside className="ras-sidebar">
+      <a className="ras-brand" href="#/" aria-label="React API Stack admin">
+        <BrandMark size={32} />
+        <span>
+          <span className="ras-brand-name" style={{ display: "block" }}>
+            React API Stack
+          </span>
+          <span className="ras-brand-sub">Admin</span>
+        </span>
+      </a>
+
+      <nav className="ras-nav">
+        {byApp.map(([app, models]) => (
+          <div className="ras-nav-section" key={app}>
+            <div className="ras-nav-label">{humanizeKey(app)}</div>
+            {models.map((r) => {
+              const active = r.key === props.activeKey;
+              return (
+                <a
+                  key={r.key}
+                  href={`#/${r.app}/${r.model}/`}
+                  className={"ras-nav-link" + (active ? " is-active" : "")}
+                  aria-current={active ? "page" : undefined}
+                >
+                  <IconTable size={16} className="ras-ico" />
+                  {r.label}
+                </a>
+              );
+            })}
+          </div>
+        ))}
+      </nav>
+
+      <div className="ras-sidebar-foot">
+        <span className="ras-foot-meta">Iceberg · object storage</span>
+        <button
+          type="button"
+          className="ras-icon-btn"
+          aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
+          title={isDark ? "Light" : "Dark"}
+          onClick={() => setMode(isDark ? "light" : "dark")}
+        >
+          {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
+        </button>
+      </div>
+    </aside>
+  );
+}

package/admin/ui/icons.tsx

@@ -0,0 +1,146 @@
+/**
+ * A small set of inline stroke icons (currentColor, 1.6px) used across the
+ * admin chrome. Kept local to the admin — the shared `rastack/components` are
+ * intentionally icon-free — so the bundle stays self-contained and offline.
+ */
+import React from "react";
+
+type SvgProps = {
+  size?: number;
+  strokeWidth?: number;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+function Svg({
+  size = 16,
+  strokeWidth = 1.6,
+  children,
+  style,
+  className,
+}: SvgProps & { children: React.ReactNode }): React.JSX.Element {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ display: "block", flexShrink: 0, ...style }}
+      className={className}
+      aria-hidden="true"
+    >
+      {children}
+    </svg>
+  );
+}
+
+export const IconSearch = (p: SvgProps) => (
+  <Svg {...p}>
+    <circle cx="11" cy="11" r="7" />
+    <path d="m20 20-3.2-3.2" />
+  </Svg>
+);
+
+export const IconFilter = (p: SvgProps) => (
+  <Svg {...p}>
+    <path d="M3 5h18" />
+    <path d="M6 12h12" />
+    <path d="M10 19h4" />
+  </Svg>
+);
+
+export const IconPlus = (p: SvgProps) => (
+  <Svg {...p}>
+    <path d="M12 5v14M5 12h14" />
+  </Svg>
+);
+
+export const IconChevronRight = (p: SvgProps) => (
+  <Svg {...p}>
+    <path d="m9 6 6 6-6 6" />
+  </Svg>
+);
+
+export const IconChevronDown = (p: SvgProps) => (
+  <Svg {...p}>
+    <path d="m6 9 6 6 6-6" />
+  </Svg>
+);
+
+export const IconArrowLeft = (p: SvgProps) => (
+  <Svg {...p}>
+    <path d="M19 12H5M11 18l-6-6 6-6" />
+  </Svg>
+);
+
+export const IconClose = (p: SvgProps) => (
+  <Svg {...p}>
+    <path d="M18 6 6 18M6 6l12 12" />
+  </Svg>
+);
+
+export const IconTrash = (p: SvgProps) => (
+  <Svg {...p}>
+    <path d="M4 7h16M10 11v6M14 11v6" />
+    <path d="M5 7l1 13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1l1-13" />
+    <path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
+  </Svg>
+);
+
+export const IconSun = (p: SvgProps) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+  </Svg>
+);
+
+export const IconMoon = (p: SvgProps) => (
+  <Svg {...p}>
+    <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
+  </Svg>
+);
+
+export const IconTable = (p: SvgProps) => (
+  <Svg {...p}>
+    <rect x="3.5" y="4.5" width="17" height="15" rx="2" />
+    <path d="M3.5 9.5h17M9 9.5v10" />
+  </Svg>
+);
+
+export const IconLink = (p: SvgProps) => (
+  <Svg {...p}>
+    <path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1" />
+    <path d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1" />
+  </Svg>
+);
+
+export const IconInbox = (p: SvgProps) => (
+  <Svg {...p}>
+    <path d="M3 13h5l1.5 3h5L21 13" />
+    <path d="M5 5h14l2 8v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5Z" />
+  </Svg>
+);
+
+/** The brand mark: an isometric "stack" tile in the accent colour. */
+export function BrandMark({ size = 30 }: { size?: number }): React.JSX.Element {
+  return (
+    <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true" style={{ display: "block" }}>
+      <rect width="32" height="32" rx="9" fill="var(--color-accent)" />
+      <g
+        fill="none"
+        stroke="var(--color-on-accent)"
+        strokeWidth="1.9"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+      >
+        <path d="M16 7 25 12 16 17 7 12 16 7Z" />
+        <path d="M7 16.5 16 21.5 25 16.5" />
+        <path d="M7 21 16 26 25 21" opacity="0.55" />
+      </g>
+    </svg>
+  );
+}