@isi-ui7/bos7-shared 0.2.3 → 0.2.6

package/src/form-types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
-import type { Ui7FormDensity } from "./style-contract";
+import type { Ui7FormDensity, Ui7FormWidth } from "./style-contract";
 import type { T_LookupTblStruct } from "@isi-ui7/lookup-input";
+import type { EditableColumnDef } from "@isi-ui7/editable-table";
 
 export type FormMode = "create" | "edit" | "view";
 
@@ -31,7 +32,8 @@ export type FieldValidation<TData extends Record<string, unknown>> = {
 
 export type FormFieldType =
   | "text" | "textarea" | "number" | "date"
-  | "select" | "lookup" | "checkbox" | "toggle";
+  | "select" | "lookup" | "checkbox" | "toggle"
+  | "detail-rows";
 
 export type FormFieldOption = { value: string; label: string };
 
@@ -45,6 +47,17 @@ export type FormFieldLookupConfig<TData extends Record<string, unknown>> = {
   dataSource?: "api" | "direct";
   /** Return a patch to merge into the form when a lookup row is selected. */
   onDataPatch?: (row: Record<string, unknown>, data: TData) => Partial<TData>;
+  /**
+   * Form field keys whose values combine into the initial display text on
+   * Edit load. Example: `["kode_cabang","branch_name"]` renders
+   * "001 KANTOR CABANG BANDUNG" instead of just "001". Typical pairing
+   * with an onDataPatch that stashes the picked row's name into a
+   * companion field. If any referenced field is empty, the lookup falls
+   * back to the field's own primary-key value.
+   */
+  initialDisplayFields?: (keyof TData)[];
+  /** Separator joining initialDisplayFields. Default: " " */
+  initialDisplaySeparator?: string;
 };
 
 export type FormFieldNumericConfig<TData extends Record<string, unknown>> =
@@ -53,11 +66,56 @@ export type FormFieldNumericConfig<TData extends Record<string, unknown>> =
   | { kind: "integer" }
   | { kind: "phone"; minDigits: number; maxDigits: number; allowedPrefixes?: string[] };
 
+/**
+ * Toggle field state mapping for non-boolean stored values.
+ *
+ * Example for a "Y" / "N" string column:
+ *   { type: "toggle", toggle: { valueOn: "Y", valueOff: "N" } }
+ *
+ * Toggled = (current value === valueOn). Flipping the toggle writes
+ * either `valueOn` or `valueOff` into the form data. Defaults to
+ * boolean true / false when omitted.
+ */
+export type FormFieldToggleConfig = {
+  valueOn?: unknown;
+  valueOff?: unknown;
+};
+
+/**
+ * Detail-rows config — embeds an inline `<EditableTable>` inside the form for
+ * master-detail entry. The field value at `key` must be an array of plain
+ * objects (e.g. `details: BucketRow[]`). The renderer reads / writes that
+ * array atomically via `onChange({ ...data, [key]: newRows })`.
+ *
+ * `columns`, `newRowFactory`, `validateRow`, `maxRows` mirror the props of
+ * `<EditableTable>` from `@isi-ui7/editable-table`.
+ */
+export type DetailRowsConfig = {
+  columns: EditableColumnDef[];
+  newRowFactory: () => Record<string, unknown>;
+  validateRow?: (
+    row: Record<string, unknown>,
+    index: number,
+  ) => Record<string, string>;
+  maxRows?: number;
+};
+
 export type FormField<TData extends Record<string, unknown>> = {
   key: keyof TData;
   label: ReactNode;
   type: FormFieldType;
   span?: number;
+  /**
+   * Force this field to start a new row even when the current row still
+   * has space for its `span`. Useful to break a logical group onto its
+   * own line (e.g. a wide picker that should sit alone, or a sub-group
+   * header pattern within one section).
+   *
+   * Implemented via `gridColumnStart: 1` — the CSS grid skips the
+   * remaining columns of the previous row and places this field at the
+   * left edge of a new row.
+   */
+  breakBefore?: boolean;
   /** Static or dynamic readonly. Function receives current mode + form data. */
   readonly?: boolean | ((mode: FormMode, data: TData) => boolean);
   /** Static or dynamic visibility. Hidden fields are skipped in validation. */
@@ -72,6 +130,8 @@ export type FormField<TData extends Record<string, unknown>> = {
   options?: FormFieldOption[];
   lookup?: FormFieldLookupConfig<TData>;
   numeric?: FormFieldNumericConfig<TData>;
+  toggle?: FormFieldToggleConfig;
+  detailRows?: DetailRowsConfig;
   format?: (value: TData[keyof TData], data: TData) => ReactNode;
   validation?: FieldValidation<TData>;
 };
@@ -111,6 +171,11 @@ export type CrudForm<TData extends Record<string, unknown>> = {
   backLabel?: { view?: string; others?: string};
   /** Form layout density. Defaults to "compact". */
   density?: Ui7FormDensity;
+  /**
+   * Desktop form-panel width — "half" | "two-thirds" | "full".
+   * Default "two-thirds". Tablet + mobile (<1056px) always stretch full.
+   */
+  width?: Ui7FormWidth;
 
   emptyData: TData;
 

package/src/form-value-schema.test.ts

@@ -0,0 +1,263 @@
+import { describe, expect, it } from "vitest";
+import { buildValueSections, type JSONSchema } from "./form-value-schema";
+import type { FormFieldNumericConfig } from "./form-types";
+
+// Mock translate: prefer the provided fallback, else echo the key.
+const t = (key: string, fallback?: string) => fallback ?? key;
+
+type ValueData = Record<string, unknown>;
+
+describe("buildValueSections — transaction_limit (two-limit + x-rules)", () => {
+  const schema: JSONSchema = {
+    type: "object",
+    required: ["transaction_limit", "authorization_limit", "currency"],
+    properties: {
+      transaction_limit: {
+        type: "number",
+        minimum: 0,
+        "x-ui": {
+          labelKey: "policy.value.txnLimit",
+          numeric: { kind: "currency", currencyField: "currency" },
+          span: 6,
+        },
+      },
+      authorization_limit: {
+        type: "number",
+        minimum: 0,
+        "x-ui": {
+          labelKey: "policy.value.authLimit",
+          numeric: { kind: "currency", currencyField: "currency" },
+          span: 6,
+        },
+      },
+      currency: {
+        type: "string",
+        enum: ["IDR"],
+        default: "IDR",
+        "x-ui": { widget: "select", labelKey: "policy.value.currency", span: 6 },
+      },
+      scope: {
+        type: "string",
+        enum: ["per_transaction", "per_day", "per_month"],
+        "x-ui": { widget: "select", labelKey: "policy.value.scope", span: 6 },
+      },
+    },
+    "x-ui": {
+      layout: {
+        sections: [
+          { titleKey: "policy.section.limits", fields: ["transaction_limit", "authorization_limit"] },
+          { titleKey: "policy.section.meta", fields: ["currency", "scope"] },
+        ],
+      },
+    },
+    "x-rules": [
+      {
+        op: "lte",
+        left: "authorization_limit",
+        right: "transaction_limit",
+        message: "Authorization limit must be ≤ transaction limit",
+      },
+    ],
+  };
+
+  it("groups properties into the two layout sections", () => {
+    const { sections } = buildValueSections(schema, t);
+    expect(sections).toHaveLength(2);
+    expect(sections[0].title).toBe("policy.section.limits");
+    expect(sections[0].fields.map((f) => f.key)).toEqual([
+      "transaction_limit",
+      "authorization_limit",
+    ]);
+    expect(sections[1].title).toBe("policy.section.meta");
+    expect(sections[1].fields.map((f) => f.key)).toEqual(["currency", "scope"]);
+  });
+
+  it("renders the two limits as side-by-side currency fields", () => {
+    const { sections } = buildValueSections(schema, t);
+    const [txn, auth] = sections[0].fields;
+    expect(txn.type).toBe("number");
+    expect(txn.span).toBe(6);
+    const num = txn.numeric as Extract<FormFieldNumericConfig<ValueData>, { kind: "currency" }>;
+    expect(num.kind).toBe("currency");
+    expect(num.currencyField).toBe("currency");
+    // precision defaults applied when x-ui omits them
+    expect(num.precisionByCurrency).toMatchObject({ IDR: 2 });
+    expect(auth.numeric).toMatchObject({ kind: "currency", currencyField: "currency" });
+  });
+
+  it("maps required + minimum into per-field validation", () => {
+    const { sections } = buildValueSections(schema, t);
+    const txn = sections[0].fields[0];
+    expect(txn.validation).toMatchObject({ required: true, min: 0 });
+  });
+
+  it("renders currency/scope as selects with enum options", () => {
+    const { sections } = buildValueSections(schema, t);
+    const [currency, scope] = sections[1].fields;
+    expect(currency.type).toBe("select");
+    expect(currency.options).toEqual([{ value: "IDR", label: "IDR" }]);
+    expect(scope.options?.map((o) => o.value)).toEqual([
+      "per_transaction",
+      "per_day",
+      "per_month",
+    ]);
+  });
+
+  it("produces an lte cross-field validator that blocks an over-limit value", () => {
+    const { validate } = buildValueSections(schema, t);
+    expect(validate({ transaction_limit: 1000, authorization_limit: 2000 })).toEqual({
+      authorization_limit: "Authorization limit must be ≤ transaction limit",
+    });
+    // valid case: auth ≤ txn → no error
+    expect(validate({ transaction_limit: 2000, authorization_limit: 1000 })).toEqual({});
+    // incomplete input → skip (per-field required handles emptiness)
+    expect(validate({ transaction_limit: 1000 })).toEqual({});
+  });
+});
+
+describe("buildValueSections — rate", () => {
+  const schema: JSONSchema = {
+    type: "object",
+    required: ["rate", "rate_unit"],
+    properties: {
+      rate: { type: "number", minimum: 0, "x-ui": { numeric: { kind: "percent", maxFractionDigits: 4 }, span: 6 } },
+      rate_unit: {
+        type: "string",
+        enum: ["percent_per_year", "percent_per_month"],
+        "x-ui": { widget: "select", span: 6 },
+      },
+      tenor_months: { type: "integer", minimum: 0, "x-ui": { numeric: { kind: "integer" }, span: 6 } },
+      calculation_method: {
+        type: "string",
+        enum: ["simple_interest", "compound"],
+        "x-ui": { widget: "select", span: 6 },
+      },
+    },
+  };
+
+  it("falls back to a single 'Value' section ordered by declaration", () => {
+    const { sections } = buildValueSections(schema, t);
+    expect(sections).toHaveLength(1);
+    expect(sections[0].title).toBe("Value");
+    expect(sections[0].fields.map((f) => f.key)).toEqual([
+      "rate",
+      "rate_unit",
+      "tenor_months",
+      "calculation_method",
+    ]);
+  });
+
+  it("maps percent + integer numeric kinds", () => {
+    const { sections } = buildValueSections(schema, t);
+    const [rate, , tenor] = sections[0].fields;
+    expect(rate.numeric).toEqual({ kind: "percent", maxFractionDigits: 4 });
+    expect(tenor.numeric).toEqual({ kind: "integer" });
+    expect(tenor.inputMode).toBe("numeric");
+  });
+
+  it("has no x-rules → validator returns no errors", () => {
+    const { validate } = buildValueSections(schema, t);
+    expect(validate({ rate: 5, rate_unit: "percent_per_year" })).toEqual({});
+  });
+});
+
+describe("buildValueSections — operational_hours", () => {
+  const schema: JSONSchema = {
+    type: "object",
+    required: ["day_of_week"],
+    properties: {
+      day_of_week: {
+        type: "string",
+        enum: ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"],
+        "x-ui": { widget: "select", span: 4 },
+      },
+      is_open: { type: "boolean", "x-ui": { widget: "toggle", span: 4 } },
+      open_time: { type: "string", pattern: "^[0-2][0-9]:[0-5][0-9]$", "x-ui": { placeholder: "HH:MM", span: 4 } },
+      close_time: { type: "string", pattern: "^[0-2][0-9]:[0-5][0-9]$", "x-ui": { placeholder: "HH:MM", span: 4 } },
+    },
+  };
+
+  it("infers toggle, select, and pattern-validated text fields", () => {
+    const { sections } = buildValueSections(schema, t);
+    const fields = sections[0].fields;
+    const byKey = Object.fromEntries(fields.map((f) => [f.key, f]));
+    expect(byKey.day_of_week.type).toBe("select");
+    expect(byKey.is_open.type).toBe("toggle");
+    expect(byKey.open_time.type).toBe("text");
+    expect(byKey.open_time.placeholder).toBe("HH:MM");
+    expect((byKey.open_time.validation?.pattern as RegExp).source).toBe("^[0-2][0-9]:[0-5][0-9]$");
+    expect(byKey.day_of_week.validation?.required).toBe(true);
+    expect(byKey.is_open.validation).toBeUndefined();
+  });
+});
+
+describe("buildValueSections — tiered array → detail-rows", () => {
+  const schema: JSONSchema = {
+    type: "object",
+    properties: {
+      tiers: {
+        type: "array",
+        items: {
+          type: "object",
+          required: ["tenor_months", "rate"],
+          properties: {
+            tenor_months: { type: "integer", "x-ui": { numeric: { kind: "integer" } } },
+            rate: { type: "number", "x-ui": { numeric: { kind: "percent", maxFractionDigits: 4 } } },
+          },
+        },
+        "x-ui": { widget: "detail-rows", labelKey: "policy.value.tiers", maxRows: 20, span: 12 },
+      },
+    },
+  };
+
+  it("maps an array-of-object property to a detail-rows field", () => {
+    const { sections } = buildValueSections(schema, t);
+    const field = sections[0].fields[0];
+    expect(field.type).toBe("detail-rows");
+    expect(field.span).toBe(12);
+    expect(field.label).toBe("tiers"); // mock t() returns the fallback (field name)
+    expect(field.detailRows?.maxRows).toBe(20);
+  });
+
+  it("derives columns + types from items.properties", () => {
+    const { sections } = buildValueSections(schema, t);
+    const detail = sections[0].fields[0].detailRows!;
+    expect(detail.columns.map((c) => c.field)).toEqual(["tenor_months", "rate"]);
+    expect(detail.columns[0].columnType).toMatchObject({ type: "number", decimals: 0 });
+    expect(detail.columns[1].columnType).toMatchObject({ type: "number", decimals: 4 });
+    expect(detail.columns.every((c) => c.required)).toBe(true);
+  });
+
+  it("newRowFactory seeds typed defaults; validateRow flags missing required", () => {
+    const { sections } = buildValueSections(schema, t);
+    const detail = sections[0].fields[0].detailRows!;
+    expect(detail.newRowFactory()).toEqual({ tenor_months: 0, rate: 0 });
+    expect(detail.validateRow?.({ tenor_months: "", rate: 5 }, 0)).toHaveProperty("tenor_months");
+    expect(detail.validateRow?.({ tenor_months: 12, rate: 5 }, 0)).toEqual({});
+  });
+});
+
+describe("buildXRulesValidator op coverage", () => {
+  it("handles gte / lt / gt / eq / required-if", () => {
+    const mk = (rule: NonNullable<JSONSchema["x-rules"]>[number]) =>
+      buildValueSections({ type: "object", properties: {}, "x-rules": [rule] }, t).validate;
+
+    expect(mk({ op: "gte", left: "a", right: "b", message: "ge" })({ a: 1, b: 2 })).toEqual({ a: "ge" });
+    expect(mk({ op: "lt", left: "a", value: 10, message: "lt" })({ a: 10 })).toEqual({ a: "lt" });
+    expect(mk({ op: "gt", left: "a", value: 0, message: "gt" })({ a: 0 })).toEqual({ a: "gt" });
+    expect(mk({ op: "eq", left: "a", value: "IDR", message: "eq" })({ a: "USD" })).toEqual({ a: "eq" });
+    expect(
+      mk({ op: "required-if", left: "reason", right: "kind", value: "OTHER", message: "req" })({
+        kind: "OTHER",
+        reason: "",
+      }),
+    ).toEqual({ reason: "req" });
+    // condition not met → no error
+    expect(
+      mk({ op: "required-if", left: "reason", right: "kind", value: "OTHER", message: "req" })({
+        kind: "NORMAL",
+        reason: "",
+      }),
+    ).toEqual({});
+  });
+});