rastack 0.0.25 → 0.0.27

package/hooks/form/structure.ts

@@ -1,39 +1,96 @@
-import { SchemaObject } from "ajv";
-import { FormType } from "./interfaces";
+import type { SchemaObject } from "ajv";
+import type { FieldOption, FormType, RelationTarget } from "./interfaces";
 
-interface GetFieldStructureResponse {
+export interface GetFieldStructureResponse {
   isRequired: boolean;
   type: FormType;
+  maxLength?: number;
+  options?: FieldOption[];
+  relation?: RelationTarget;
+  nullable?: boolean;
+  format?: string;
 }
 
+/**
+ * Read one field's UI shape out of a write JSON Schema (the dereferenced
+ * `Deref{Name}` the form hook validates against).
+ *
+ * The schema is the only runtime artifact that still carries a field's real
+ * datatype — `type`, `format` (`date-time`/`email`/`uuid`), `enum`, `maxLength`,
+ * `nullable`, and the `x-rastack-relation` FK target the compiler stamps on
+ * foreign keys. This maps that to a {@link FormType} control kind plus the extra
+ * metadata a form UI needs, so `<AutoForm>` (and any hand-rolled form reading
+ * `getFormField`) can render the correct input per datatype instead of a text
+ * box for everything.
+ */
 export function getFieldStructure<TFieldName>(
   validationSchema: SchemaObject | undefined,
   fieldName: TFieldName,
 ): GetFieldStructureResponse {
-  let type: FormType = "text";
-  if (validationSchema?.properties) {
-    const schemaJson = validationSchema.properties[fieldName];
-    if (!schemaJson) {
-      return { isRequired: false, type };
-    }
-    let schemaJsonType = schemaJson.type;
-
-    if (typeof schemaJsonType === "string") {
-      schemaJsonType = [schemaJsonType];
-    }
-    if (schemaJsonType) {
-      if (schemaJsonType.includes("integer")) {
-        type = "number";
-      }
-      if (schemaJsonType.includes("array")) {
-        type = "array";
-      }
-    }
+  const result: GetFieldStructureResponse = { isRequired: false, type: "text" };
+
+  // JSON Schema shapes vary across ajv typings; access untyped.
+  const schema = validationSchema as
+    { properties?: Record<string, any>; required?: unknown } | undefined;
+  const property: any = schema?.properties?.[fieldName as string];
+  if (!property) return result;
+
+  // JSON Schema `type` can be a string or an array (nullable unions like
+  // `["string", "null"]`); normalise to a list.
+  const rawType = property.type;
+  const typeList: string[] =
+    typeof rawType === "string"
+      ? [rawType]
+      : Array.isArray(rawType)
+        ? rawType
+        : [];
+  if (typeList.includes("null") || property.nullable === true) {
+    result.nullable = true;
+  }
+
+  const format: unknown = property.format;
+  if (typeof format === "string") result.format = format;
+
+  if (typeof property.maxLength === "number")
+    result.maxLength = property.maxLength;
+
+  const relation = property["x-rastack-relation"];
+  if (relation && typeof relation === "object") {
+    result.relation = relation as RelationTarget;
   }
 
-  let isRequired = false;
-  if (validationSchema?.required) {
-    isRequired = validationSchema.required?.includes(fieldName);
+  const enumValues: unknown = property.enum;
+
+  // Choose the control kind. Enum wins over the raw scalar type (a constrained
+  // string is a picker, not a free text box); FK metadata is advisory and does
+  // not change the underlying scalar control.
+  if (Array.isArray(enumValues) && enumValues.length > 0) {
+    result.type = "select";
+    result.options = enumValues
+      .filter((v): v is string | number => v !== null && v !== undefined)
+      .map((v) => ({ label: String(v), value: v }));
+  } else if (typeList.includes("boolean")) {
+    result.type = "boolean";
+  } else if (typeList.includes("integer") || typeList.includes("number")) {
+    result.type = "number";
+  } else if (typeList.includes("array")) {
+    result.type = "array";
+  } else if (result.format === "date-time") {
+    result.type = "datetime";
+  } else if (result.format === "date") {
+    result.type = "date";
+  } else if (result.format === "email") {
+    result.type = "email";
+  } else if (result.format === "uri" || result.format === "url") {
+    result.type = "url";
+  } else {
+    result.type = "text";
   }
-  return { isRequired, type };
+
+  const required: unknown = schema?.required;
+  if (Array.isArray(required)) {
+    result.isRequired = required.includes(fieldName);
+  }
+
+  return result;
 }

package/hooks/query/delete.ts

@@ -32,7 +32,9 @@ export function useDeleteQuery<TResult>({
       }
 
       const response: AxiosResponse = await API.delete(url);
-      return response.data.results;
+      // A delete may return 204 No Content (no body) or a JSON envelope; don't
+      // assume `.results` exists on an empty body.
+      return response.data?.results ?? response.data ?? null;
     },
     {
       onSuccess: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rastack",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "",
   "main": "runtime.ts",
   "types": "runtime.ts",

package/src/rastack-wasm-build.ts

@@ -4,7 +4,7 @@
  * `rastack wasm` — compile the Rust API to WebAssembly for in-browser local dev.
  *
  * Pipeline:
- *   1. cargo build -p rad-wasm --release --target wasm32-unknown-unknown
+ *   1. cargo build -p rastack-wasm --release --target wasm32-unknown-unknown
  *   2. wasm-bindgen --target web  → stack/wasm/rastack_wasm.js + rastack_wasm_bg.wasm
  *   3. wasm-opt -Oz (if available) to shrink the binary
  *
@@ -56,13 +56,13 @@ function has(cmd: string): boolean {
   return spawnSync(cmd, ["--version"], { stdio: "ignore" }).status === 0;
 }
 
-console.log("→ cargo build -p rad-wasm --release (wasm32-unknown-unknown)");
+console.log("→ cargo build -p rastack-wasm --release (wasm32-unknown-unknown)");
 run(
   "cargo",
   [
     "build",
     "-p",
-    "rad-wasm",
+    "rastack-wasm",
     "--release",
     "--target",
     "wasm32-unknown-unknown",

package/test/components.spec.ts

@@ -0,0 +1,386 @@
+/**
+ * Tests for the pure cores behind `rastack/components` — the logic that decides
+ * how a component renders itself from a hook. The React `.tsx` render layer is
+ * thin and ships as source (like `rastack/theme`); everything that makes a
+ * decision (field datatype → control, data → columns, hook → model) lives in
+ * plain modules exercised here.
+ */
+
+import { getFieldStructure } from "../hooks/form/structure";
+import { cssVar, tokens } from "../components/style";
+import { humanizeKey } from "../components/util";
+import { resolveColumns, formatCell } from "../components/data-table/columns";
+import { buildDataTableModel } from "../components/data-table/use-data-table";
+import {
+  inputKindForFieldType,
+  resolveFieldSpecs,
+} from "../components/auto-form/fields";
+import { buildAutoFormModel } from "../components/auto-form/use-auto-form";
+import type {
+  TableQuery,
+  AutoFormLike,
+  AutoFormField,
+} from "../components/types";
+
+// A write JSON Schema like the `Deref{Name}` the form hook validates against.
+const schema = {
+  properties: {
+    name: { type: "string", maxLength: 120 },
+    active: { type: "boolean" },
+    seats: { type: "integer" },
+    price: { type: "number" },
+    created: { type: "string", format: "date-time" },
+    birthday: { type: "string", format: "date" },
+    email: { type: "string", format: "email" },
+    site: { type: "string", format: "uri" },
+    status: { type: "string", enum: ["draft", "active", "archived"] },
+    airport: {
+      type: "integer",
+      "x-rastack-relation": { app: "airports", model: "airport" },
+    },
+    nickname: { type: ["string", "null"] },
+    tags: { type: "array" },
+  },
+  required: ["name", "seats"],
+} as const;
+
+describe("getFieldStructure — datatype derivation from the write schema", () => {
+  const fieldType = (name: string) =>
+    getFieldStructure(schema as any, name).type;
+
+  it("maps JSON Schema types/formats to control kinds", () => {
+    expect(fieldType("name")).toBe("text");
+    expect(fieldType("active")).toBe("boolean");
+    expect(fieldType("seats")).toBe("number");
+    expect(fieldType("price")).toBe("number");
+    expect(fieldType("created")).toBe("datetime");
+    expect(fieldType("birthday")).toBe("date");
+    expect(fieldType("email")).toBe("email");
+    expect(fieldType("site")).toBe("url");
+    expect(fieldType("tags")).toBe("array");
+  });
+
+  it("treats an enum as a select and exposes its options", () => {
+    const s = getFieldStructure(schema as any, "status");
+    expect(s.type).toBe("select");
+    expect(s.options).toEqual([
+      { label: "draft", value: "draft" },
+      { label: "active", value: "active" },
+      { label: "archived", value: "archived" },
+    ]);
+  });
+
+  it("keeps a foreign key as its scalar but exposes the relation target", () => {
+    const s = getFieldStructure(schema as any, "airport");
+    expect(s.type).toBe("number");
+    expect(s.relation).toEqual({ app: "airports", model: "airport" });
+  });
+
+  it("reads maxLength, nullability and required", () => {
+    expect(getFieldStructure(schema as any, "name").maxLength).toBe(120);
+    expect(getFieldStructure(schema as any, "nickname").nullable).toBe(true);
+    expect(getFieldStructure(schema as any, "name").isRequired).toBe(true);
+    expect(getFieldStructure(schema as any, "active").isRequired).toBe(false);
+  });
+
+  it("falls back to a non-required text field for unknown/absent fields", () => {
+    expect(getFieldStructure(undefined, "whatever")).toEqual({
+      isRequired: false,
+      type: "text",
+    });
+    expect(getFieldStructure(schema as any, "missing")).toEqual({
+      isRequired: false,
+      type: "text",
+    });
+  });
+});
+
+describe("cssVar + tokens", () => {
+  it("renders a token path as a CSS variable reference", () => {
+    expect(cssVar("color.surface")).toBe("var(--color-surface)");
+    expect(cssVar("space.md")).toBe("var(--space-md)");
+    expect(cssVar("color.surface-alt")).toBe("var(--color-surface-alt)");
+  });
+
+  it("includes a fallback when given", () => {
+    expect(cssVar("color.danger", "#E5484D")).toBe(
+      "var(--color-danger, #E5484D)",
+    );
+  });
+
+  it("exposes semantic tokens with fallbacks baked in", () => {
+    expect(tokens.color.accent).toBe("var(--color-accent, #4f6bff)");
+    expect(tokens.radius.md).toBe("var(--radius-md, 10px)");
+  });
+});
+
+describe("humanizeKey", () => {
+  it("turns field keys into labels", () => {
+    expect(humanizeKey("first_name")).toBe("First name");
+    expect(humanizeKey("createdAt")).toBe("Created at");
+    expect(humanizeKey("code")).toBe("Code");
+    expect(humanizeKey("airport-id")).toBe("Airport id");
+  });
+});
+
+describe("resolveColumns", () => {
+  it("prefers explicit columns and fills defaults", () => {
+    const cols = resolveColumns<{ code: string }>({
+      columns: [
+        { key: "code" },
+        { key: "name", header: "Full name", align: "right" },
+      ],
+    });
+    expect(cols.map((c) => c.key)).toEqual(["code", "name"]);
+    expect(cols[0].header).toBe("Code");
+    expect(cols[1].header).toBe("Full name");
+    expect(cols[1].align).toBe("right");
+  });
+
+  it("uses the server header when present", () => {
+    const cols = resolveColumns({
+      header: [
+        { key: "code", name: "Code" },
+        { key: "name", name: "Name" },
+      ],
+    });
+    expect(cols.map((c) => c.key)).toEqual(["code", "name"]);
+    expect(cols[0].header).toBe("Code");
+  });
+
+  it("infers columns from the first row when there is no header", () => {
+    const cols = resolveColumns({ rows: [{ code: "LHR", city: "London" }] });
+    expect(cols.map((c) => c.key)).toEqual(["code", "city"]);
+    expect(cols[1].header).toBe("City");
+  });
+
+  it("honours the sortable default only for inferred columns", () => {
+    const inferred = resolveColumns({
+      rows: [{ a: 1 }],
+      sortableByDefault: true,
+    });
+    expect(inferred[0].sortable).toBe(true);
+    const explicit = resolveColumns({
+      columns: [{ key: "a", sortable: false }],
+      sortableByDefault: true,
+    });
+    expect(explicit[0].sortable).toBe(false);
+  });
+
+  it("returns nothing when there is no source of columns", () => {
+    expect(resolveColumns({ rows: [] })).toEqual([]);
+    expect(resolveColumns({})).toEqual([]);
+  });
+});
+
+describe("formatCell", () => {
+  it("formats values conservatively", () => {
+    expect(formatCell(null)).toBe("—");
+    expect(formatCell(undefined)).toBe("—");
+    expect(formatCell(true)).toBe("Yes");
+    expect(formatCell(false)).toBe("No");
+    expect(formatCell(42)).toBe("42");
+    expect(formatCell("LHR")).toBe("LHR");
+    expect(formatCell({ a: 1 })).toBe('{"a":1}');
+  });
+});
+
+describe("buildDataTableModel — normalizing the two hook families", () => {
+  it("drives a rich REST list hook (search + sort + pagination)", () => {
+    const sortField = jest.fn();
+    const setSearchText = jest.fn();
+    const query = {
+      data: [{ code: "LHR" }, { code: "JFK" }],
+      isLoading: false,
+      header: [{ key: "code", name: "Code" }],
+      searching: { searchText: "lo", setSearchText },
+      sorting: { sortField, getSortingDirection: () => "asc" },
+      pagination: {
+        currentPage: 2,
+        pageSize: 20,
+        pageCount: 5,
+        itemCount: 100,
+        nextPage: jest.fn(),
+        previousPage: jest.fn(),
+        setPageSize: jest.fn(),
+      },
+    } as unknown as TableQuery<{ code: string }>;
+
+    const model = buildDataTableModel(query);
+    expect(model.columns.map((c) => c.key)).toEqual(["code"]);
+    expect(model.columns[0].sortable).toBe(true);
+    expect(model.rows).toHaveLength(2);
+    expect(model.isLoading).toBe(false);
+    expect(model.isEmpty).toBe(false);
+
+    expect(model.search?.value).toBe("lo");
+    model.search?.setValue("");
+    expect(setSearchText).toHaveBeenCalledWith(undefined); // empty box clears the search
+
+    expect(model.sort?.directionOf("code")).toBe("asc");
+    model.sort?.by("code");
+    expect(sortField).toHaveBeenCalledWith("code");
+
+    expect(model.pagination).toMatchObject({
+      current: 2,
+      count: 5,
+      canPrev: true,
+      canNext: true,
+    });
+  });
+
+  it("drives a minimal sync list hook (no search/sort/pagination)", () => {
+    const query = {
+      data: [{ id: "1", title: "A" }],
+      isLoading: false,
+      isReady: true,
+    } as unknown as TableQuery<{ id: string; title: string }>;
+
+    const model = buildDataTableModel(query);
+    expect(model.columns.map((c) => c.key)).toEqual(["id", "title"]);
+    expect(model.columns[0].sortable).toBe(false); // no sorting capability → not sortable
+    expect(model.search).toBeUndefined();
+    expect(model.sort).toBeUndefined();
+    expect(model.pagination).toBeUndefined();
+  });
+
+  it("reports loading and empty states", () => {
+    const loading = buildDataTableModel({
+      data: undefined,
+      isLoading: true,
+    } as TableQuery);
+    expect(loading.isLoading).toBe(true);
+    expect(loading.isEmpty).toBe(false);
+
+    const empty = buildDataTableModel({
+      data: [],
+      isLoading: false,
+    } as TableQuery);
+    expect(empty.isEmpty).toBe(true);
+  });
+});
+
+describe("inputKindForFieldType", () => {
+  it("maps every datatype to a control", () => {
+    expect(inputKindForFieldType("boolean")).toBe("checkbox");
+    expect(inputKindForFieldType("number")).toBe("number");
+    expect(inputKindForFieldType("date")).toBe("date");
+    expect(inputKindForFieldType("datetime")).toBe("datetime-local");
+    expect(inputKindForFieldType("select")).toBe("select");
+    expect(inputKindForFieldType("email")).toBe("email");
+    expect(inputKindForFieldType("url")).toBe("url");
+    expect(inputKindForFieldType("array")).toBe("textarea");
+    expect(inputKindForFieldType("text")).toBe("text");
+  });
+});
+
+describe("resolveFieldSpecs", () => {
+  const names = ["code", "name", "active"];
+
+  it("defaults to the value keys in order", () => {
+    expect(resolveFieldSpecs(names).map((s) => s.name)).toEqual([
+      "code",
+      "name",
+      "active",
+    ]);
+  });
+
+  it("honours an explicit ordered field list with config", () => {
+    const specs = resolveFieldSpecs(names, {
+      fields: ["name", { name: "code", label: "Airport code" }],
+    });
+    expect(specs.map((s) => s.name)).toEqual(["name", "code"]);
+    expect(specs[1].label).toBe("Airport code");
+  });
+
+  it("applies excludes", () => {
+    expect(
+      resolveFieldSpecs(names, { exclude: ["active"] }).map((s) => s.name),
+    ).toEqual(["code", "name"]);
+  });
+});
+
+describe("buildAutoFormModel — wiring a form hook into field descriptors", () => {
+  // Minimal stand-in for a `useForm()` result.
+  const makeField = (over: Partial<AutoFormField>): AutoFormField =>
+    ({
+      value: "",
+      error: "",
+      type: "text",
+      isChecked: false,
+      isError: false,
+      isDisabled: false,
+      isRequired: false,
+      setValue: jest.fn(),
+      setTouched: jest.fn(),
+      ...over,
+    }) as AutoFormField;
+
+  const fieldsByName: Record<string, AutoFormField> = {
+    code: makeField({
+      type: "text",
+      isRequired: true,
+      value: "LHR",
+      maxLength: 3,
+    }),
+    active: makeField({ type: "boolean", value: true }),
+    status: makeField({
+      type: "select",
+      options: [{ label: "Draft", value: "draft" }],
+    }),
+  };
+
+  const onSubmit = jest.fn();
+  const resetForm = jest.fn();
+  const form: AutoFormLike = {
+    formValues: { code: "LHR", active: true, status: "draft" },
+    getFormField: (name: string) => fieldsByName[name],
+    onSubmit,
+    resetForm,
+    isSubmitDisabled: false,
+    isSubmitting: false,
+    errors: {},
+  };
+
+  it("produces one descriptor per field with the control picked from the datatype", () => {
+    const model = buildAutoFormModel(form);
+    expect(model.fields.map((f) => f.name)).toEqual([
+      "code",
+      "active",
+      "status",
+    ]);
+    expect(model.fields.map((f) => f.input)).toEqual([
+      "text",
+      "checkbox",
+      "select",
+    ]);
+    expect(model.fields[0].label).toBe("Code");
+    expect(model.fields[0].id).toBe("af-code");
+    expect(model.fields[2].options).toEqual([
+      { label: "Draft", value: "draft" },
+    ]);
+  });
+
+  it("computes submit-ability and wires submit/reset", () => {
+    const model = buildAutoFormModel(form);
+    expect(model.canSubmit).toBe(true);
+    model.submit();
+    model.reset();
+    expect(onSubmit).toHaveBeenCalled();
+    expect(resetForm).toHaveBeenCalled();
+  });
+
+  it("blocks submission while invalid or submitting", () => {
+    expect(
+      buildAutoFormModel({ ...form, isSubmitDisabled: true }).canSubmit,
+    ).toBe(false);
+    expect(buildAutoFormModel({ ...form, isSubmitting: true }).canSubmit).toBe(
+      false,
+    );
+  });
+
+  it("respects field selection options", () => {
+    const model = buildAutoFormModel(form, { exclude: ["status"] });
+    expect(model.fields.map((f) => f.name)).toEqual(["code", "active"]);
+  });
+});