@isi-ui7/bos7-shared 0.2.4 → 0.2.6

package/src/form-renderer.tsx

@@ -12,6 +12,7 @@ import {
   Toggle,
 } from "@carbon/react";
 import { LookupInput } from "@isi-ui7/lookup-input";
+import { EditableTable } from "@isi-ui7/editable-table";
 import { useI18n } from "@isi-ui7/i18n";
 import type { Ui7Locale } from "@isi-ui7/i18n";
 import {
@@ -27,7 +28,7 @@ import {
   UI7_FORM_VISUAL_CLASSNAMES,
   UI7_FORM_VISUAL_TOKENS,
 } from "./style-contract";
-import type { Ui7FormDensity } from "./style-contract";
+import type { Ui7FormDensity, Ui7FormWidth } from "./style-contract";
 import { useBosSharedI18n } from "./i18n";
 import type { FormField, FormMode, FormSection } from "./form-types";
 
@@ -44,6 +45,8 @@ export type SchemaFormRendererProps<TData extends Record<string, unknown>> = {
   scopeClassName?: string;
   /** Form layout density. Defaults to "compact". */
   density?: Ui7FormDensity;
+  /** Desktop form-panel width. Defaults to "two-thirds". */
+  width?: Ui7FormWidth;
 };
 
 function clampSpan(span: number | undefined, defaultSpan: number): number {
@@ -80,7 +83,27 @@ function makeDisplayRenderer(
   ): ReactNode {
     if (field.format) return field.format(value as never, data as never);
     if (field.type === "checkbox") return value ? labels.boolYes : labels.boolNo;
-    if (field.type === "toggle") return value ? labels.toggleOn : labels.toggleOff;
+    if (field.type === "toggle") {
+      // valueOn / valueOff override the default boolean truthiness check
+      // for non-boolean stored values (e.g., "Y"/"N").
+      if (field.toggle && field.toggle.valueOn !== undefined) {
+        return value === field.toggle.valueOn ? labels.toggleOn : labels.toggleOff;
+      }
+      return value ? labels.toggleOn : labels.toggleOff;
+    }
+    if (field.type === "lookup") {
+      // View/read-only mode mirrors the LookupInput initialDisplay logic:
+      // when initialDisplayFields is set and all referenced FormData
+      // values are non-empty, render the compound "kode - nama". Falls
+      // back to the raw primary key when companion fields are missing.
+      const lookup = field.lookup;
+      if (lookup?.initialDisplayFields?.length) {
+        const sep = lookup.initialDisplaySeparator ?? " ";
+        const parts = lookup.initialDisplayFields.map((k) => asString(data[String(k)]));
+        if (parts.every((p) => p !== "")) return parts.join(sep);
+      }
+      return asString(value) || labels.emptyValue;
+    }
     if (field.type === "number" && typeof value === "number") {
       const nloc = locale === "en" ? "en-US" : "id-ID";
       const numeric = field.numeric;
@@ -158,6 +181,7 @@ function NumericField({
   value,
   numericKind,
   prec,
+  currencyCode,
   locale,
   size,
   disabled,
@@ -172,6 +196,13 @@ function NumericField({
   value: number;
   numericKind: "currency" | "percent" | "integer" | "decimal";
   prec?: number;
+  /**
+   * Currency ISO code (e.g. "IDR", "USD") — only used when numericKind ===
+   * "currency". When set, the code is shown as a subdued suffix next to the
+   * field label so the user sees which currency they're entering, mirroring
+   * the view-mode renderer which shows `Rp 1.000.000` / `IDR 1.000.000`.
+   */
+  currencyCode?: string;
   locale: Ui7Locale;
   size?: "sm" | "md" | "lg";
   disabled?: boolean;
@@ -209,19 +240,94 @@ function NumericField({
     return parsed.ok ? parsed.value : 0;
   };
 
+  /**
+   * Input-time sanitizer — drops any character the user types that isn't part
+   * of a valid number in the active locale. Without this, typing "abc" would
+   * stick in the textbox (because `raw` stores the user's verbatim keystrokes)
+   * while the parsed numeric value silently becomes 0. Filtering at input gives
+   * immediate visual feedback: rejected chars never appear at all.
+   *
+   * Rules:
+   * - Integer: 0–9 plus a single leading minus.
+   * - Decimal / currency / percent: 0–9, thousand separator, a single decimal
+   *   separator, leading minus. Decimal separator is rejected entirely when
+   *   `prec === 0` (no fractional part allowed), and excess fraction digits
+   *   beyond `prec` are clipped on the fly so users see the limit enforced.
+   */
+  const sanitizeInput = (input: string): string => {
+    let out = "";
+    let seenMinus = false;
+    if (numericKind === "integer") {
+      for (let i = 0; i < input.length; i++) {
+        const c = input[i];
+        if (c >= "0" && c <= "9") out += c;
+        else if (c === "-" && out === "" && !seenMinus) {
+          out += c;
+          seenMinus = true;
+        }
+      }
+      return out;
+    }
+    let seenDecimal = false;
+    const allowDecimal = prec === undefined || prec > 0;
+    for (let i = 0; i < input.length; i++) {
+      const c = input[i];
+      if (c >= "0" && c <= "9") out += c;
+      else if (c === decimalSep && !seenDecimal && allowDecimal) {
+        out += c;
+        seenDecimal = true;
+      } else if (c === thousandSep) out += c;
+      else if (c === "-" && out === "" && !seenMinus) {
+        out += c;
+        seenMinus = true;
+      }
+    }
+    // Clip excess fraction digits to declared precision.
+    if (typeof prec === "number" && prec > 0 && seenDecimal) {
+      const decIdx = out.indexOf(decimalSep);
+      const intPart = out.slice(0, decIdx);
+      const fracPart = out.slice(decIdx + 1);
+      if (fracPart.length > prec) {
+        out = intPart + decimalSep + fracPart.slice(0, prec);
+      }
+    }
+    return out;
+  };
+
   const displayValue = raw !== null ? raw : formatDisplay(value);
 
-  return (
+  // Auto helper-text for currency fields with non-zero precision — surfaces
+  // the decimal limit to the user so the silent truncation in parseRaw
+  // doesn't surprise them. Skipped when prec === 0 (the display format
+  // already shows no decimal separator, no extra explanation needed) or
+  // when caller already supplied a helperText.
+  const autoCurrencyHelper = (() => {
+    if (helperText !== undefined) return undefined;
+    if (numericKind !== "currency" || !currencyCode) return undefined;
+    const p = prec ?? 0;
+    if (p <= 0) return undefined;
+    if (locale === "en") {
+      return `Up to ${p} decimal place${p > 1 ? "s" : ""}`;
+    }
+    return `Maksimal ${p} angka desimal`;
+  })();
+  const effectiveHelperText = helperText ?? autoCurrencyHelper;
+
+  const input = (
     <TextInput
       id={id}
       labelText={labelText}
-      helperText={helperText}
+      helperText={effectiveHelperText}
       value={displayValue}
       onFocus={() => {
         setRaw(value === 0 ? "" : String(value).replace(".", decimalSep));
       }}
       onChange={(e) => {
-        const next = e.target.value;
+        // Filter non-numeric input at the source so the textbox can never
+        // visibly display characters that aren't part of a valid number.
+        // Caret behaviour stays natural because we only ever DROP chars —
+        // never reorder.
+        const next = sanitizeInput(e.target.value);
         setRaw(next);
         onChange(parseRaw(next));
       }}
@@ -238,6 +344,79 @@ function NumericField({
       placeholder={placeholder}
     />
   );
+
+  // Currency chip — rendered to the right of the TextInput, height + Y position
+  // matched to the actual input field. We anchor via `align-items: flex-end` so
+  // the chip bottom sits flush with the input bottom (which is just above the
+  // helper-text / invalid-text row), then offset the chip up past those rows
+  // so its bottom lands on the input bottom edge regardless of whether the
+  // label wraps to two lines. `box-sizing: border-box` keeps height parity
+  // with the Carbon input (which also includes its 1px border in 2rem/2.5rem).
+  if (numericKind === "currency" && currencyCode) {
+    // Resolve locale-aware currency display so the chip matches what view-mode
+    // shows — `Intl.NumberFormat(... style:'currency')` renders IDR as "Rp" in
+    // id-ID and as "IDR" in en-US.
+    const chipText = (() => {
+      try {
+        const parts = new Intl.NumberFormat(nloc, {
+          style: "currency",
+          currency: currencyCode,
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        }).formatToParts(0);
+        const sym = parts.find((p) => p.type === "currency")?.value;
+        return sym && sym.trim() ? sym.trim() : currencyCode;
+      } catch {
+        return currencyCode;
+      }
+    })();
+
+    // Chip height + horizontal min-width follow the same CSS variable that the
+    // form contract uses to size .cds--text-input (1.75rem compact / 2.5rem
+    // comfortable). Fallback covers the rare host that mounts NumericField
+    // outside the .ui7-form-contract scope; map by Carbon `size` so the chip
+    // still matches Carbon's native input height there.
+    const chipHeightFallback = size === "lg" ? "3rem" : size === "md" ? "2.5rem" : "1.75rem";
+    const chipHeight = `var(--ui7-form-control-height, ${chipHeightFallback})`;
+    // `.cds--form-requirement` (invalid) ~1rem + 0.25rem margin; same for
+    // `.cds--form__helper-text`. Offset the chip up by that combined ~1.25rem
+    // so its bottom sits flush with the input bottom regardless of subtext.
+    const subtextRowOffset =
+      invalid && invalidText ? "1.25rem" : effectiveHelperText ? "1.25rem" : "0";
+
+    return (
+      <div style={{ display: "flex", alignItems: "flex-end", gap: "0.5rem" }}>
+        <div style={{ flex: "1 1 auto", minWidth: 0 }}>{input}</div>
+        <span
+          aria-label={`Mata uang: ${chipText}`}
+          title={currencyCode}
+          style={{
+            flex: "0 0 auto",
+            boxSizing: "border-box",
+            marginBlockEnd: subtextRowOffset,
+            height: chipHeight,
+            minWidth: chipHeight,
+            paddingInline: "0.625rem",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "0.75rem",
+            fontWeight: 500,
+            letterSpacing: "0.02em",
+            color: "var(--cds-text-primary, #161616)",
+            background: "var(--cds-layer-accent-01, #e8e8e8)",
+            border: "1px solid var(--cds-border-subtle, #e0e0e0)",
+            whiteSpace: "nowrap",
+            userSelect: "none",
+          }}
+        >
+          {chipText}
+        </span>
+      </div>
+    );
+  }
+
+  return input;
 }
 
 export function SchemaFormRenderer<TData extends Record<string, unknown>>({
@@ -251,12 +430,13 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
   showSectionHeader = true,
   scopeClassName,
   density = "compact",
+  width,
 }: SchemaFormRendererProps<TData>) {
   const isView = mode === "view";
   const dt = UI7_FORM_DENSITY_TOKENS[density];
   const carbonSize = density === "compact" ? "sm" : "md";
   const rootClassName =
-    scopeClassName ?? getUi7FormContractClassName({ density, readonly: isView });
+    scopeClassName ?? getUi7FormContractClassName({ density, width, readonly: isView });
   const labels = useBosSharedI18n();
   const { locale } = useI18n();
   const renderDisplayValue = makeDisplayRenderer(labels, locale);
@@ -338,11 +518,65 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                   Boolean(field.validation?.required) && !effectiveReadonly;
                 const invalidText = errors?.[field.key];
                 const span = clampSpan(field.span, defaultSpan);
+                // `breakBefore` forces a new row by pinning to column 1.
+                // Without it, CSS grid auto-flow may fit the field on the
+                // current row if remaining columns are enough for `span`.
                 const wrapperStyle = {
-                  gridColumn: `span ${span} / span ${span}`,
+                  gridColumn: field.breakBefore
+                    ? `1 / span ${span}`
+                    : `span ${span} / span ${span}`,
                   minWidth: 0,
                 } as const;
 
+                // ── Detail-rows (master-detail editor) ──────────────────────
+                // Rendered BEFORE the readonly branch so view / edit / create
+                // share the same `<EditableTable>` instance — the table
+                // renders rows even when `readOnly={true}` and just hides
+                // the add/delete affordances. Default span = 12 (full width)
+                // because tables rarely look right in a half-column.
+                if (field.type === "detail-rows") {
+                  const detail = field.detailRows;
+                  if (!detail) return [];
+                  const rows = Array.isArray(rawValue)
+                    ? (rawValue as Record<string, unknown>[])
+                    : [];
+                  const detailSpan = clampSpan(field.span, 12);
+                  const detailWrapperStyle = {
+                    gridColumn: field.breakBefore
+                      ? `1 / span ${detailSpan}`
+                      : `span ${detailSpan} / span ${detailSpan}`,
+                    minWidth: 0,
+                  } as const;
+                  return [
+                    <div
+                      key={key}
+                      className={UI7_FORM_VISUAL_CLASSNAMES.column}
+                      style={detailWrapperStyle}
+                    >
+                      <FieldShell
+                        label={field.label}
+                        required={effectiveRequired}
+                        helperText={field.helperText}
+                      >
+                        <EditableTable
+                          columns={detail.columns}
+                          value={rows}
+                          onChange={(newRows) =>
+                            setValue(
+                              field.key,
+                              (newRows as unknown) as TData[keyof TData],
+                            )
+                          }
+                          newRowFactory={detail.newRowFactory}
+                          maxRows={detail.maxRows}
+                          readOnly={effectiveReadonly}
+                          validateRow={detail.validateRow}
+                        />
+                      </FieldShell>
+                    </div>,
+                  ];
+                }
+
                 // ── View / readonly ─────────────────────────────────────────
                 if (effectiveReadonly) {
                   return [
@@ -376,6 +610,18 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                 // ── Lookup ──────────────────────────────────────────────────
                 if (field.type === "lookup") {
                   const lookup = field.lookup;
+                  // Compose initialDisplay from sibling form fields, e.g.
+                  // ["kode_cabang","branch_name"] → "001 KANTOR CABANG …".
+                  // Falls back to undefined if any referenced field is
+                  // empty so LookupInput uses its default (the key value).
+                  let initialDisplay: string | undefined;
+                  if (lookup?.initialDisplayFields?.length) {
+                    const sep = lookup.initialDisplaySeparator ?? " ";
+                    const parts = lookup.initialDisplayFields.map((k) => asString(value[k]));
+                    if (parts.every((p) => p !== "")) {
+                      initialDisplay = parts.join(sep);
+                    }
+                  }
                   return [
                     <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
                       <FieldShell label={field.label} required={effectiveRequired} helperText={field.helperText} htmlFor={key}>
@@ -383,6 +629,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                           id={key}
                           labelText=""
                           value={asString(rawValue)}
+                          initialDisplay={initialDisplay}
                           onChange={(next: string) => setValue(field.key, next as TData[keyof TData])}
                           onDataSelected={(row: Record<string, unknown>) => {
                             if (lookup?.onDataPatch) {
@@ -465,10 +712,12 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                   const numeric = field.numeric;
                   let numericKind: "currency" | "percent" | "integer" | "decimal" = "decimal";
                   let prec: number | undefined;
+                  let currencyCode: string | undefined;
 
                   if (numeric?.kind === "currency") {
                     numericKind = "currency";
                     const code = String(value[numeric.currencyField] ?? "");
+                    currencyCode = code || undefined;
                     prec = getCurrencyPrecision(code, {
                       precisionByCurrency: numeric.precisionByCurrency,
                       defaultPrecision: numeric.defaultPrecision,
@@ -480,20 +729,46 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                     numericKind = "integer";
                   }
 
+                  // Live min/max validation — surfaces invalidText immediately
+                  // as the user types instead of waiting for Save. Falls back
+                  // to the submit-time error from the form host's errors map
+                  // when the value is within bounds (or no bounds declared).
+                  const numericValue = typeof rawValue === "number" ? rawValue : 0;
+                  let liveInvalidText: string | undefined;
+                  const v = field.validation;
+                  if (v?.min !== undefined) {
+                    const minV = Array.isArray(v.min) ? v.min[0] : v.min;
+                    if (numericValue < minV) {
+                      liveInvalidText = Array.isArray(v.min)
+                        ? v.min[1]
+                        : labels.validMin(minV);
+                    }
+                  }
+                  if (!liveInvalidText && v?.max !== undefined) {
+                    const maxV = Array.isArray(v.max) ? v.max[0] : v.max;
+                    if (numericValue > maxV) {
+                      liveInvalidText = Array.isArray(v.max)
+                        ? v.max[1]
+                        : labels.validMax(maxV);
+                    }
+                  }
+                  const effectiveInvalidText = invalidText ?? liveInvalidText;
+
                   return [
                     <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
                       <NumericField
                         id={key}
                         labelText={mkLabel(field.label, effectiveRequired)}
                         helperText={field.helperText}
-                        value={typeof rawValue === "number" ? rawValue : 0}
+                        value={numericValue}
                         numericKind={numericKind}
                         prec={prec}
+                        currencyCode={currencyCode}
                         locale={locale}
                         size={carbonSize}
                         disabled={disabled}
-                        invalid={Boolean(invalidText)}
-                        invalidText={invalidText}
+                        invalid={Boolean(effectiveInvalidText)}
+                        invalidText={effectiveInvalidText}
                         placeholder={field.placeholder}
                         onChange={(v) => setValue(field.key, v as TData[keyof TData])}
                       />
@@ -520,6 +795,19 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
 
                 // ── Toggle ──────────────────────────────────────────────────
                 if (field.type === "toggle") {
+                  // Optional valueOn/valueOff for non-boolean stored state
+                  // (e.g., "Y"/"N"). When unset, falls back to plain Boolean.
+                  const hasCustomMapping =
+                    field.toggle && field.toggle.valueOn !== undefined;
+                  const toggled = hasCustomMapping
+                    ? rawValue === field.toggle!.valueOn
+                    : Boolean(rawValue);
+                  const onValue: unknown = hasCustomMapping
+                    ? field.toggle!.valueOn
+                    : true;
+                  const offValue: unknown = hasCustomMapping
+                    ? field.toggle!.valueOff
+                    : false;
                   return [
                     <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
                       <FieldShell label={field.label} required={effectiveRequired} helperText={field.helperText}>
@@ -529,9 +817,12 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                             labelText=""
                             labelA={labels.toggleOff}
                             labelB={labels.toggleOn}
-                            toggled={Boolean(rawValue)}
+                            toggled={toggled}
                             onToggle={(checked) =>
-                              setValue(field.key, Boolean(checked) as TData[keyof TData])
+                              setValue(
+                                field.key,
+                                (checked ? onValue : offValue) as TData[keyof TData]
+                              )
                             }
                             disabled={disabled}
                           />

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;