rastack 0.0.43 → 0.0.45

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.45](https://github.com/theserverkid/reactapistack/compare/v0.0.44...v0.0.45) (2026-07-13)
+
+
+### Features
+
+* **admin:** rebuild `rastack admin` as the dogfooded React console with Linear-style filters ([8755fb5](https://github.com/theserverkid/reactapistack/commit/8755fb5e8ce239851e5cd08b15045621419046b9))
+
+### [0.0.44](https://github.com/theserverkid/reactapistack/compare/v0.0.43...v0.0.44) (2026-07-12)
+
+
+### Features
+
+* **dev:** replace `rastack serve`/`wasm` with `rastack dev` — full in-browser admin over WASM ([6f3f579](https://github.com/theserverkid/reactapistack/commit/6f3f579422624bd0dd3d834b6c0eff47eeef2214))
+
 ### [0.0.43](https://github.com/theserverkid/reactapistack/compare/v0.0.42...v0.0.43) (2026-07-12)
 
 

package/admin/AdminApp.tsx

@@ -0,0 +1,461 @@
+/**
+ * The admin — a full Django-admin-style, manifest-driven console, built entirely
+ * from React API Stack's own pieces: the headless `rastack/components`
+ * (`DataTable`, `AutoForm`, `Button`, `Card`, `Badge`…), the `rastack/theme`
+ * tokens, and the framework's list/detail contract. It is app-generic (every
+ * screen is derived from the compiled manifest) and transport-agnostic: the
+ * `engine` prop is the WASM engine under `rastack dev` or an HTTP engine to the
+ * real `rastack-server` under `rastack admin` — the UI never learns which.
+ *
+ * Layout: models on the left (`<Sidebar>`), the changelist table in the main
+ * area, a Linear-style filter bar on top (`<FilterBar>`), and add/change forms.
+ */
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  AutoForm,
+  Button,
+  Card,
+  DataTable,
+  Spinner,
+  type DataTableColumnInput,
+} from "../components";
+import type { RastackEngine } from "../provider/types";
+import {
+  AdminResource,
+  adminResources,
+  changelistHeaders,
+  findResource,
+} from "./adapters";
+import {
+  useDeleteRecord,
+  useFilterModel,
+  useResourceForm,
+  useResourceTable,
+} from "./useAdmin";
+import { Sidebar } from "./ui/Sidebar";
+import { FilterBar } from "./ui/FilterBar";
+import { AdminStyles } from "./ui/styles";
+import {
+  IconArrowLeft,
+  IconChevronRight,
+  IconInbox,
+  IconLink,
+  IconPlus,
+  IconTable,
+  IconTrash,
+} from "./ui/icons";
+
+// -- hash routing (dependency-free) -----------------------------------------
+
+type Route =
+  | { name: "index" }
+  | { name: "list"; app: string; model: string }
+  | { name: "add"; app: string; model: string }
+  | { name: "change"; app: string; model: string; id: string };
+
+function parseRoute(hash: string): Route {
+  const parts = hash.replace(/^#\/?/, "").split("/").filter(Boolean);
+  if (parts.length < 2) return { name: "index" };
+  const [app, model, third] = parts;
+  if (!third) return { name: "list", app, model };
+  if (third === "add") return { name: "add", app, model };
+  return { name: "change", app, model, id: decodeURIComponent(third) };
+}
+
+function useRoute(): Route {
+  const [hash, setHash] = useState(() =>
+    typeof location !== "undefined" ? location.hash : "",
+  );
+  useEffect(() => {
+    const on = () => setHash(location.hash);
+    window.addEventListener("hashchange", on);
+    return () => window.removeEventListener("hashchange", on);
+  }, []);
+  return useMemo(() => parseRoute(hash), [hash]);
+}
+
+const go = (hash: string) => {
+  location.hash = hash;
+};
+
+// -- chrome -----------------------------------------------------------------
+
+interface Crumb {
+  label: string;
+  hash?: string;
+}
+
+function Topbar({ crumbs }: { crumbs: Crumb[] }): React.JSX.Element {
+  return (
+    <header className="ras-topbar">
+      <nav className="ras-crumbs">
+        {crumbs.map((c, i) => (
+          <React.Fragment key={i}>
+            {i > 0 ? <IconChevronRight size={13} className="ras-crumb-sep" /> : null}
+            {c.hash ? (
+              <a href={c.hash}>{c.label}</a>
+            ) : (
+              <span className="ras-crumb-current">{c.label}</span>
+            )}
+          </React.Fragment>
+        ))}
+      </nav>
+    </header>
+  );
+}
+
+function PageHead(props: {
+  eyebrow?: string;
+  title: string;
+  subtitle?: React.ReactNode;
+  actions?: React.ReactNode;
+}): React.JSX.Element {
+  return (
+    <div className="ras-pagehead">
+      <div>
+        {props.eyebrow ? <div className="ras-eyebrow">{props.eyebrow}</div> : null}
+        <h1 className="ras-title">{props.title}</h1>
+        {props.subtitle ? <div className="ras-subtitle">{props.subtitle}</div> : null}
+      </div>
+      {props.actions ? <div>{props.actions}</div> : null}
+    </div>
+  );
+}
+
+// -- index / overview -------------------------------------------------------
+
+function IndexScreen(props: { resources: AdminResource[] }): React.JSX.Element {
+  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));
+  }, [props.resources]);
+
+  return (
+    <>
+      <Topbar crumbs={[{ label: "Overview" }]} />
+      <div className="ras-content">
+        <PageHead
+          eyebrow="React API Stack"
+          title="Administration"
+          subtitle="Browse and edit every model in the manifest — stored as Apache Iceberg tables on object storage."
+        />
+        {byApp.map(([app, models]) => (
+          <div key={app} style={{ marginBottom: 28 }}>
+            <div className="ras-nav-label" style={{ padding: "0 2px 10px" }}>
+              {app}
+            </div>
+            <div className="ras-cardgrid">
+              {models
+                .slice()
+                .sort((a, b) => a.model.localeCompare(b.model))
+                .map((r) => (
+                  <Card
+                    key={r.key}
+                    className="ras-modelcard"
+                    onClick={() => go(`#/${r.app}/${r.model}/`)}
+                  >
+                    <div className="ras-mc-top">
+                      <span className="ras-mc-icon">
+                        <IconTable size={19} />
+                      </span>
+                    </div>
+                    <div className="ras-mc-name">{r.label}</div>
+                    <div className="ras-mc-go">
+                      View records <IconChevronRight size={14} />
+                    </div>
+                  </Card>
+                ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
+
+// -- changelist -------------------------------------------------------------
+
+/** Changelist columns: mono id link, FK chips, boolean dots — everything else default. */
+function columnsFor(resource: AdminResource): DataTableColumnInput[] {
+  return changelistHeaders(resource).map((h) => {
+    if (h.key === "id") {
+      return {
+        key: "id",
+        header: "ID",
+        render: (row: Record<string, unknown>) => (
+          <a
+            className="ras-cell-link ras-id"
+            href={`#/${resource.app}/${resource.model}/${String(row.id)}`}
+          >
+            {String(row.id)}
+          </a>
+        ),
+      };
+    }
+    const field = resource.fields.find((f) => f.name === h.key);
+    if (field?.type === "fk" && field.relation) {
+      const { app, model } = field.relation;
+      return {
+        key: h.key,
+        header: h.name,
+        render: (_row: Record<string, unknown>, value: unknown) =>
+          value == null || value === "" ? (
+            <span className="ras-muted">—</span>
+          ) : (
+            <a
+              className="ras-fk"
+              href={`#/${app}/${model}/${String(value)}`}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <IconLink size={12} />
+              {model} #{String(value)}
+            </a>
+          ),
+      };
+    }
+    if (field?.type === "bool") {
+      return {
+        key: h.key,
+        header: h.name,
+        render: (_row: Record<string, unknown>, value: unknown) => (
+          <span className="ras-bool">
+            <span
+              className="ras-dot"
+              style={{
+                background: value ? "var(--color-success)" : "var(--color-text-muted)",
+              }}
+            />
+            {value ? "True" : "False"}
+          </span>
+        ),
+      };
+    }
+    return { key: h.key, header: h.name };
+  });
+}
+
+function ListScreen(props: {
+  engine: RastackEngine;
+  resource: AdminResource;
+}): React.JSX.Element {
+  const { engine, resource } = props;
+  const table = useResourceTable(engine, resource);
+  const { fields: facets } = useFilterModel(engine, resource);
+  const columns = useMemo(() => columnsFor(resource), [resource.key]);
+  const addHash = `#/${resource.app}/${resource.model}/add`;
+
+  const empty = (
+    <div className="ras-empty">
+      <span className="ras-empty-ico">
+        <IconInbox size={24} />
+      </span>
+      <div>
+        <h3>Nothing here yet</h3>
+        <div style={{ marginTop: 4 }}>
+          {Object.keys(table.filters).length || table.search
+            ? "No records match the current filters."
+            : `Add the first ${resource.label.toLowerCase()} to get started.`}
+        </div>
+      </div>
+      <Button size="sm" onClick={() => go(addHash)}>
+        <IconPlus size={15} /> Add {resource.label.toLowerCase()}
+      </Button>
+    </div>
+  );
+
+  return (
+    <>
+      <Topbar
+        crumbs={[{ label: "Overview", hash: "#/" }, { label: resource.label }]}
+      />
+      <div className="ras-content">
+        <PageHead
+          eyebrow={resource.app}
+          title={resource.label}
+          subtitle={
+            table.query.isLoading
+              ? "Loading…"
+              : `${table.itemCount} ${table.itemCount === 1 ? "record" : "records"}`
+          }
+          actions={
+            <Button onClick={() => go(addHash)}>
+              <IconPlus size={16} /> Add {resource.label.toLowerCase()}
+            </Button>
+          }
+        />
+
+        <FilterBar
+          facets={facets}
+          filters={table.filters}
+          setFilter={table.setFilter}
+          removeFilter={table.removeFilter}
+          clearFilters={table.clearFilters}
+          search={table.search}
+          setSearch={table.setSearch}
+          searchable={resource.search.length > 0}
+        />
+
+        <Card flush className="ras-tablecard">
+          <DataTable
+            query={table.query}
+            columns={columns}
+            searchable={false}
+            emptyMessage={empty}
+            onRowClick={(row) =>
+              go(`#/${resource.app}/${resource.model}/${String(row.id)}`)
+            }
+          />
+        </Card>
+      </div>
+    </>
+  );
+}
+
+// -- add / change -----------------------------------------------------------
+
+function FormScreen(props: {
+  engine: RastackEngine;
+  resource: AdminResource;
+  id?: string;
+}): React.JSX.Element {
+  const { engine, resource, id } = props;
+  const { model, loading, loadError, submitError, done } = useResourceForm(
+    engine,
+    resource,
+    id,
+  );
+  const del = useDeleteRecord(engine, resource);
+  const listHash = `#/${resource.app}/${resource.model}/`;
+
+  useEffect(() => {
+    if (done) go(listHash);
+  }, [done]);
+
+  const onDelete = async () => {
+    if (!id) return;
+    if (typeof confirm === "function" && !confirm(`Delete this ${resource.label.toLowerCase()}?`))
+      return;
+    if (await del(id)) go(listHash);
+  };
+
+  return (
+    <>
+      <Topbar
+        crumbs={[
+          { label: "Overview", hash: "#/" },
+          { label: resource.label, hash: listHash },
+          { label: id ? `Edit #${id}` : "Add" },
+        ]}
+      />
+      <div className="ras-content">
+        <PageHead
+          eyebrow={resource.label}
+          title={id ? `Edit ${resource.label.toLowerCase()}` : `Add ${resource.label.toLowerCase()}`}
+          subtitle={id ? `Record #${id}` : "Create a new record."}
+        />
+
+        {loadError ? (
+          <Card style={{ padding: 20, borderColor: "var(--color-danger)" }}>
+            <span style={{ color: "var(--color-danger)" }}>{loadError}</span>
+          </Card>
+        ) : loading ? (
+          <div className="ras-boot" style={{ minHeight: 160 }}>
+            <Spinner /> Loading…
+          </div>
+        ) : (
+          <>
+            <Card className="ras-formgrid" style={{ padding: 22 }}>
+              <AutoForm
+                form={model}
+                onCancel={() => go(listHash)}
+                submitLabel={id ? "Save changes" : `Create ${resource.label.toLowerCase()}`}
+              />
+              {submitError ? (
+                <div style={{ color: "var(--color-danger)", marginTop: 14, fontSize: 13 }}>
+                  {submitError}
+                </div>
+              ) : null}
+            </Card>
+
+            {id ? (
+              <div className="ras-formgrid ras-danger-zone">
+                <div>
+                  <div className="ras-dz-title">Delete this {resource.label.toLowerCase()}</div>
+                  <div className="ras-dz-sub">This permanently removes the record from the table.</div>
+                </div>
+                <Button variant="danger" onClick={onDelete}>
+                  <IconTrash size={15} /> Delete
+                </Button>
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+// -- root -------------------------------------------------------------------
+
+export function AdminApp(props: {
+  engine: RastackEngine;
+  resources: AdminResource[];
+}): React.JSX.Element {
+  const route = useRoute();
+  const { engine, resources } = props;
+
+  const activeKey =
+    route.name === "index" ? undefined : `${route.app}.${route.model}`;
+
+  let screen: React.ReactNode;
+  if (route.name === "index") {
+    screen = <IndexScreen resources={resources} />;
+  } else {
+    const resource = findResource(resources, route.app, route.model);
+    if (!resource) {
+      screen = (
+        <>
+          <Topbar crumbs={[{ label: "Overview", hash: "#/" }, { label: "Not found" }]} />
+          <div className="ras-content">
+            <div className="ras-empty">
+              <span className="ras-empty-ico">
+                <IconArrowLeft size={22} />
+              </span>
+              <h3>Unknown resource</h3>
+              <div>
+                <code>
+                  {route.app}.{route.model}
+                </code>{" "}
+                is not in the manifest.
+              </div>
+              <Button size="sm" variant="outline" onClick={() => go("#/")}>
+                Back to overview
+              </Button>
+            </div>
+          </div>
+        </>
+      );
+    } else if (route.name === "list") {
+      screen = <ListScreen engine={engine} resource={resource} />;
+    } else if (route.name === "add") {
+      screen = <FormScreen engine={engine} resource={resource} />;
+    } else {
+      screen = <FormScreen engine={engine} resource={resource} id={route.id} />;
+    }
+  }
+
+  return (
+    <>
+      <AdminStyles />
+      <div className="ras-root">
+        <Sidebar resources={resources} activeKey={activeKey} />
+        <main className="ras-main">{screen}</main>
+      </div>
+    </>
+  );
+}