elysia-rack 0.4.0 → 0.5.2

package/README.md

@@ -57,8 +57,22 @@ const app = new Elysia().use(
       label: "Product",
       pluralLabel: "Products",
       group: "Catalog",
+      icon: "package",
+      fields: {
+        name: { label: "Product name" },
+        price: { format: "currency", currency: "USD" },
+        categoryId: {
+          label: "Category",
+          relation: { load: () => loadCategoryOptions() },
+        },
+      },
     },
 
+    actions: [
+      { label: "Duplicate", href: "/catalog/products/:id/duplicate", method: "POST" },
+      { label: "Export CSV", href: "/catalog/products/export", scope: "toolbar" },
+    ],
+
     openapi: { tags: ["Products"] },
     settings: { primaryKey: "id", returning: true },
   }),
@@ -98,11 +112,41 @@ The panel ships create / edit / delete UI driven by the same API:
 - Row `Delete` confirms natively, then `DELETE /:id`.
 - Checkbox selection enables the bulk bar: `Delete selected` loops
   `DELETE /:id`, and the field applier loops `PATCH /:id` with the
-  chosen field/value. `Clear` resets the selection.
+  chosen field/value (coerced to the field kind). `Clear` resets the selection.
+- Row `View` loads the record through `QUERY /data/:id` into a read-only dialog.
+- With `settings.softDelete`, the toolbar adds `Show deleted`. Deleted rows
+  show a `Restore` button that clears `deletedAt` via `PATCH /:id`.
+
+Mutations report success and failures with toast messages and disable the
+submit button while a request is in flight.
 
 Action UI follows `operations`: disable `create`/`update`/`delete` and
 the corresponding buttons, dialogs and bulk controls disappear.
 
+### Custom actions
+
+Add extra buttons with the `actions` option. `:id` in `href` is replaced
+with the row primary key. Row actions (default) sit next to
+Edit/Delete; `scope: "toolbar"` actions sit in the page header.
+
+```ts
+rack("/catalog/products", {
+  model,
+  actions: [
+    { label: "Duplicate", href: "/catalog/products/:id/duplicate", method: "POST" },
+    { label: "Export CSV", href: "/catalog/products/export", scope: "toolbar", icon: "download" }
+  ]
+});
+```
+
+Without `method`, the button is a plain link. With `method`, the panel
+runs it via `fetch` and refreshes the table; `confirm` shows a native
+confirmation first.
+
+Custom action endpoints are yours to protect. The panel does not apply the
+rack's `authorization` rules to them, so call `authorize()` (or your own
+guard) inside the route that handles the action URL.
+
 ## Idempotency (POST)
 
 `POST /` requires an idempotency key by default. Send a client-generated
@@ -233,11 +277,23 @@ rack("/catalog/products", {
     order: 1,                 // smaller = higher
     icon: "package",           // Lucide icon name (kebab-case or PascalCase)
     parent: "catalog-root",   // nest under another id
-    hidden: false
+    hidden: false,
+    hiddenFields: ["cost"],   // fields hidden from table columns and forms
+    fields: {
+      name: { label: "Product name", order: 1 },
+      price: { format: "currency", currency: "USD" },
+      cost: { hideInTable: true },              // editable in forms, not listed
+      categoryId: {                              // relation select in forms
+        label: "Category",
+        relation: { load: async () => loadCategories() }
+      }
+    }
   }
 });
 ```
 
+`metadata.icon` also becomes the page favicon (an inline SVG in `<head>`). Per-field config supports `label`, `format` (`text`, `number`, `currency`, `date`, `datetime`, `boolean`, `badge`, `json`), `readOnly`, `hideInTable`, `hideInForm`, `order`, and `relation`. A relation renders a `<select>`; provide static `options` or a `load` function, and the label is used for table/detail display.
+
 **Decide what users can do.** Turn operations on/off. If you disable `create`, the “New record” button disappears automatically.
 
 ```ts
@@ -254,7 +310,7 @@ rack("/catalog/products", {
   model,
   query: {
     searchable: ["name", "sku"],
-    filterable: ["status"],
+    filterable: ["status", "categoryId"],
     sortable: ["name", "price", "createdAt"],
     defaultSort: { field: "createdAt", direction: "desc" },
     pagination: { default: 20, max: 100 }
@@ -262,6 +318,8 @@ rack("/catalog/products", {
 });
 ```
 
+Filter controls adapt to the field kind: enum and boolean become selects, dates get a date picker, numbers get numeric inputs, and relation fields become selects. `metadata.hiddenFields` / `hideInTable` keep a field out of the toolbar too.
+
 **Add safety.** Validation and authorization are per-operation. A string like `"products.delete"` checks the `x-permissions` header; a function gives you the full `Request`.
 
 ```ts

package/dist/Dashboard-2raba6xf.js

@@ -0,0 +1,212 @@
+import {
+  Masthead,
+  Sidebar
+} from "./index-9k12apt9.js";
+import {
+  getRackTree
+} from "./index-4wxvmd8a.js";
+import {
+  RackIcon,
+  resolveDonateProp
+} from "./index-vq4gh509.js";
+import"./index-37x76zdn.js";
+
+// src/react/page/Dashboard.tsx
+import { Fragment } from "react";
+import { jsxDEV, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+function itemLabel(r) {
+  return r.metadata.pluralLabel ?? r.metadata.label ?? r.metadata.id;
+}
+function toSidebarItem(node, activeId) {
+  return {
+    id: node.metadata.id,
+    label: itemLabel(node),
+    icon: node.metadata.icon,
+    href: node.path,
+    active: node.metadata.id === activeId,
+    children: node.children.filter((c) => !c.metadata.hidden).map((c) => toSidebarItem(c, activeId))
+  };
+}
+function buildGroupsFromTree(tree, activeId) {
+  const byGroup = new Map;
+  for (const root of tree) {
+    if (root.metadata.hidden)
+      continue;
+    const name = root.metadata.group ?? "General";
+    let group = byGroup.get(name);
+    if (!group) {
+      group = { name, items: [] };
+      byGroup.set(name, group);
+    }
+    group.items.push(toSidebarItem(root, activeId));
+  }
+  return [...byGroup.values()].sort((a, b) => a.name.localeCompare(b.name));
+}
+function countNodes(nodes) {
+  return nodes.reduce((sum, n) => sum + 1 + countNodes(n.children), 0);
+}
+function operationsLabel(node) {
+  const op = node.operations;
+  const write = [op.create, op.update, op.replace, op.delete];
+  if (!write.some(Boolean))
+    return "Read only";
+  if (write.every(Boolean))
+    return "Full";
+  const labels = [];
+  if (op.create)
+    labels.push("Create");
+  if (op.update)
+    labels.push("Update");
+  if (op.replace)
+    labels.push("Replace");
+  if (op.delete)
+    labels.push("Delete");
+  return labels.join(", ");
+}
+function plural(count, word) {
+  return `${count} ${word}${count === 1 ? "" : "s"}`;
+}
+function ResourceRow({ node, depth = 0 }) {
+  return /* @__PURE__ */ jsxDEV(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsxDEV("tr", {
+        className: "hover:bg-table-row-hover",
+        children: [
+          /* @__PURE__ */ jsxDEV("td", {
+            className: "border-table-border border-t px-3 py-2.5",
+            children: /* @__PURE__ */ jsxDEV("a", {
+              href: node.path,
+              className: "text-link hover:text-link-hover font-medium hover:underline",
+              style: depth > 0 ? { paddingLeft: depth * 16 } : undefined,
+              children: [
+                node.metadata.icon ? /* @__PURE__ */ jsxDEV(RackIcon, {
+                  name: node.metadata.icon,
+                  size: 16,
+                  className: "mr-1.5 inline size-4 align-text-bottom"
+                }, undefined, false, undefined, this) : null,
+                node.metadata.label ?? node.metadata.id
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("td", {
+            className: "border-table-border text-text-muted border-t px-3 py-2.5 font-mono text-xs",
+            children: node.path
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("td", {
+            className: "border-table-border text-text-muted border-t px-3 py-2.5 text-xs",
+            children: operationsLabel(node)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      node.children.filter((c) => !c.metadata.hidden).map((child) => /* @__PURE__ */ jsxDEV(ResourceRow, {
+        node: child,
+        depth: depth + 1
+      }, child.metadata.id, false, undefined, this))
+    ]
+  }, undefined, true, undefined, this);
+}
+async function Dashboard(props) {
+  const tree = getRackTree().filter((r) => !r.metadata.hidden);
+  const groups = buildGroupsFromTree(tree, props.resource);
+  const totalResources = countNodes(tree);
+  const totalGroups = groups.length;
+  const donate = resolveDonateProp(props.donate);
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "text-foreground flex min-h-screen flex-col lg:flex-row",
+    children: [
+      /* @__PURE__ */ jsxDEV(Sidebar, {
+        title: props.name ?? "Panel",
+        groups
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("main", {
+        className: "min-w-0 flex-1",
+        children: /* @__PURE__ */ jsxDEV("div", {
+          className: "mx-auto w-full max-w-5xl px-4 py-4 sm:px-6",
+          children: [
+            /* @__PURE__ */ jsxDEV(Masthead, {
+              title: props.name ?? "Panel",
+              detail: `${plural(totalResources, "resource")} in ${plural(totalGroups, "group")}`
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "bg-table border-border overflow-x-auto rounded-lg border",
+              children: /* @__PURE__ */ jsxDEV("table", {
+                className: "w-full border-collapse text-left text-sm",
+                children: [
+                  /* @__PURE__ */ jsxDEV("thead", {
+                    children: /* @__PURE__ */ jsxDEV("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV("th", {
+                          className: "border-border text-text-muted border-b px-3 py-2 text-xs font-medium",
+                          children: "Resource"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("th", {
+                          className: "border-border text-text-muted border-b px-3 py-2 text-xs font-medium",
+                          children: "Path"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("th", {
+                          className: "border-border text-text-muted border-b px-3 py-2 text-xs font-medium",
+                          children: "Operations"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("tbody", {
+                    children: groups.length === 0 ? /* @__PURE__ */ jsxDEV("tr", {
+                      children: /* @__PURE__ */ jsxDEV("td", {
+                        colSpan: 3,
+                        className: "text-text-muted px-4 py-10 text-center",
+                        children: "No resources registered. Call rack() before rendering this page."
+                      }, undefined, false, undefined, this)
+                    }, undefined, false, undefined, this) : groups.map((group) => {
+                      const nodes = tree.filter((r) => (r.metadata.group ?? "General") === group.name);
+                      return /* @__PURE__ */ jsxDEV(Fragment, {
+                        children: [
+                          /* @__PURE__ */ jsxDEV("tr", {
+                            className: "bg-surface-muted",
+                            children: /* @__PURE__ */ jsxDEV("th", {
+                              colSpan: 3,
+                              className: "border-border text-text-muted border-b px-3 py-1.5 text-left text-xs font-medium",
+                              children: [
+                                group.name,
+                                " ",
+                                /* @__PURE__ */ jsxDEV("span", {
+                                  className: "text-text-subtle font-normal",
+                                  children: plural(countNodes(nodes), "resource")
+                                }, undefined, false, undefined, this)
+                              ]
+                            }, undefined, true, undefined, this)
+                          }, undefined, false, undefined, this),
+                          nodes.map((node) => /* @__PURE__ */ jsxDEV(ResourceRow, {
+                            node
+                          }, node.metadata.id, false, undefined, this))
+                        ]
+                      }, group.name, true, undefined, this);
+                    })
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("footer", {
+              className: "border-border text-text-muted mt-6 flex flex-wrap items-center justify-between gap-2 border-t pt-3 text-xs",
+              children: [
+                /* @__PURE__ */ jsxDEV("span", {
+                  children: "elysia-rack"
+                }, undefined, false, undefined, this),
+                donate.enabled ? /* @__PURE__ */ jsxDEV("a", {
+                  href: donate.url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "hover:text-foreground underline-offset-4 hover:underline",
+                  children: donate.label
+                }, undefined, false, undefined, this) : null
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  Dashboard as default
+};