@isi-ui7/bos7-shared 0.4.3 → 0.4.4

package/dist/form-renderer-utils.d.ts

@@ -4,6 +4,24 @@ import { BosSharedLabels } from './i18n';
 export declare function resolveApiPath(path: ApiPath, params: Record<string, string>): string;
 type ValidationI18n = Pick<BosSharedLabels, "validRequired" | "validMinLength" | "validMaxLength" | "validMin" | "validMax" | "validPattern">;
 export declare function runFieldValidation<TData extends Record<string, unknown>>(fields: FormField<TData>[], data: TData, mode: FormMode, i18n?: Partial<ValidationI18n>): Partial<Record<keyof TData, string>>;
+/**
+ * Merangkum `fieldErrors` jadi satu kalimat yang MENYEBUT medannya.
+ *
+ * 🔑 Ada karena daftar medannya SUDAH dihitung dan nol pernah sampai ke layar.
+ * Spanduk lama satu string tetap ("Periksa field wajib") untuk seluruh galat,
+ * jadi "medan kosong" dan "medan terisi tapi format salah" terbaca identik —
+ * dan medan yang nol punya field ter-render terbaca sama pula.
+ *
+ * Ongkosnya terukur: dua medan (`cif_number`, `branch_code`) menahan create
+ * Nasabah Perorangan 21 hari (2026-08-15 s/d 09-05). Keduanya duduk di
+ * `fieldErrors` sepanjang waktu itu. Satu penyelidikan penuh dihabiskan untuk
+ * mencari nama yang aplikasinya sudah tahu sejak detik pertama.
+ *
+ * Label dipakai bila ada; kalau nol ada, JATUH ke kuncinya — jangan sel kosong
+ * dan jangan sembunyikan barisnya, karena medan tanpa label justru yang paling
+ * mungkin jadi medan yatim seperti di atas.
+ */
+export declare function ringkasGalatMedan<TData extends Record<string, unknown>>(fieldErrors: Partial<Record<keyof TData, string>>, fields: FormField<TData>[], maks?: number): string | null;
 export declare function collectAllFields<TData extends Record<string, unknown>>(layout: FormLayout<TData>): FormField<TData>[];
 /**
  * Field yang BOLEH divalidasi pada satu halaman.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -70,7 +70,7 @@
   "peerDependencies": {
     "@carbon/icons-react": "^11.71.0",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/corporate-themes": ">=0.2.13",
+    "@isi-ui7/corporate-themes": ">=0.2.14",
     "@isi-ui7/data-table": ">=0.2.5",
     "@isi-ui7/editable-table": ">=0.2.3",
     "@isi-ui7/i18n": ">=0.2.3",
@@ -106,14 +106,14 @@
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
     "vitest": "^1.0.0",
-    "@isi-ui7/corporate-themes": "0.2.13",
     "@isi-ui7/data-table": "0.2.5",
     "@isi-ui7/editable-table": "0.2.3",
     "@isi-ui7/i18n": "0.2.3",
+    "@isi-ui7/corporate-themes": "0.2.14",
     "@isi-ui7/lookup-input": "0.2.4",
     "@isi-ui7/modal-manager": "0.2.2",
-    "@isi-ui7/realtime": "0.2.3",
-    "@isi-ui7/ui-shell": "0.2.8"
+    "@isi-ui7/ui-shell": "0.2.8",
+    "@isi-ui7/realtime": "0.2.3"
   },
   "dependencies": {
     "@carbon/icons-react": "^11.71.0",

package/src/form-renderer-utils.ts

@@ -113,6 +113,46 @@ export function runFieldValidation<TData extends Record<string, unknown>>(
   return errors;
 }
 
+/**
+ * Merangkum `fieldErrors` jadi satu kalimat yang MENYEBUT medannya.
+ *
+ * 🔑 Ada karena daftar medannya SUDAH dihitung dan nol pernah sampai ke layar.
+ * Spanduk lama satu string tetap ("Periksa field wajib") untuk seluruh galat,
+ * jadi "medan kosong" dan "medan terisi tapi format salah" terbaca identik —
+ * dan medan yang nol punya field ter-render terbaca sama pula.
+ *
+ * Ongkosnya terukur: dua medan (`cif_number`, `branch_code`) menahan create
+ * Nasabah Perorangan 21 hari (2026-08-15 s/d 09-05). Keduanya duduk di
+ * `fieldErrors` sepanjang waktu itu. Satu penyelidikan penuh dihabiskan untuk
+ * mencari nama yang aplikasinya sudah tahu sejak detik pertama.
+ *
+ * Label dipakai bila ada; kalau nol ada, JATUH ke kuncinya — jangan sel kosong
+ * dan jangan sembunyikan barisnya, karena medan tanpa label justru yang paling
+ * mungkin jadi medan yatim seperti di atas.
+ */
+export function ringkasGalatMedan<TData extends Record<string, unknown>>(
+  fieldErrors: Partial<Record<keyof TData, string>>,
+  fields: FormField<TData>[],
+  maks = 5,
+): string | null {
+  const kunci = Object.keys(fieldErrors).filter((k) => fieldErrors[k as keyof TData]);
+  if (kunci.length === 0) return null;
+
+  const label = new Map<string, string>();
+  for (const f of fields) {
+    const k = String(f.key);
+    const l = typeof f.label === "string" ? f.label.trim() : "";
+    if (l && !label.has(k)) label.set(k, l);
+  }
+
+  const butir = kunci.slice(0, maks).map((k) => {
+    const nama = label.get(k) || k; // JATUH ke kunci, bukan kosong
+    return `${nama}: ${fieldErrors[k as keyof TData]}`;
+  });
+  const sisa = kunci.length - butir.length;
+  return butir.join(" · ") + (sisa > 0 ? ` · +${sisa} lagi` : "");
+}
+
 // ── Layout helpers ────────────────────────────────────────────────────────────
 
 export function collectAllFields<TData extends Record<string, unknown>>(

package/src/spanduk-galat-medan.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { ringkasGalatMedan } from "./form-renderer-utils";
+import type { FormField } from "./form-types";
+
+type D = Record<string, unknown>;
+const f = (key: string, label?: string) => ({ key, label, type: "text" } as unknown as FormField<D>);
+
+describe("spanduk galat menyebut MEDANNYA", () => {
+  it("menyebut label + alasan, bukan satu kalimat tetap", () => {
+    const s = ringkasGalatMedan<D>(
+      { identity_number: "NIK harus 16 digit angka", birth_date: "Tanggal Lahir wajib diisi" },
+      [f("identity_number", "NIK"), f("birth_date", "Tanggal Lahir")],
+    );
+    expect(s).toContain("NIK");
+    expect(s).toContain("16 digit");
+    expect(s).toContain("Tanggal Lahir");
+  });
+
+  it("PEMANCAR: nol ada galat -> spanduk DIAM (null), bukan kalimat kosong", () => {
+    expect(ringkasGalatMedan<D>({}, [f("a", "A")])).toBeNull();
+    expect(ringkasGalatMedan<D>({ a: undefined } as never, [f("a", "A")])).toBeNull();
+  });
+
+  it("medan tanpa label JATUH ke kuncinya — nol disembunyikan", () => {
+    // Justru medan tanpa label yang paling mungkin jadi medan yatim
+    // (cif_number/branch_code, cacat 21 hari). Ia WAJIB kelihatan.
+    const s = ringkasGalatMedan<D>({ branch_code: "Cabang wajib diisi" }, []);
+    expect(s).toContain("branch_code");
+    expect(s).toContain("Cabang wajib diisi");
+  });
+
+  it("dipotong kalau panjang, dan SEBUT berapa yang tersisa", () => {
+    const errs: Record<string, string> = {};
+    const fields: FormField<D>[] = [];
+    for (let i = 0; i < 9; i++) { errs["k" + i] = "wajib diisi"; fields.push(f("k" + i, "L" + i)); }
+    const s = ringkasGalatMedan<D>(errs, fields, 5)!;
+    expect(s.split(" · ").filter((x) => !x.startsWith("+")).length).toBe(5);
+    expect(s).toContain("+4 lagi");
+  });
+
+  it("label kosong/spasi diperlakukan sbg TIDAK ADA", () => {
+    expect(ringkasGalatMedan<D>({ x: "wajib" }, [f("x", "   ")])).toContain("x:");
+  });
+});

package/src/workflow/use-crud-form-spanduk.test.tsx

@@ -0,0 +1,66 @@
+import { describe, it, expect } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import { useCrudForm } from "./use-crud-form";
+import type { CrudForm } from "../form-types";
+
+type D = Record<string, unknown>;
+
+/**
+ * Spanduk galat diuji lewat PERILAKU `handleSave`, bukan lewat helper-nya.
+ *
+ * Uji atas `ringkasGalatMedan` sendirian TETAP HIJAU meski nilai balik `error`
+ * nol pernah memakainya — diukur: mencabut penyambungan di `use-crud-form`
+ * meninggalkan 154 uji hijau. Yang membedakan "terpasang" dari "sekadar ada"
+ * cuma membaca `error` yang benar-benar keluar dari hook.
+ */
+function schema(): CrudForm<D> {
+  return {
+    title: { create: "c", edit: "e", view: "v" },
+    emptyData: { nik: "", lahir: "", yatim: "" } as D,
+    createApiPath: "/api/x",
+    layout: {
+      type: "single-page",
+      sections: [
+        {
+          title: "s",
+          fields: [
+            { key: "nik", label: "NIK", type: "text", span: 4, validation: { required: true } },
+            { key: "lahir", label: "Tanggal Lahir", type: "text", span: 4, validation: { required: true } },
+          ],
+        },
+      ],
+    },
+    // Menuntut medan yang NOL punya field — cacat cif_number/branch_code.
+    validate: (d: D) => (String(d.yatim ?? "").trim() ? {} : { yatim: "Cabang wajib diisi" }),
+  } as unknown as CrudForm<D>;
+}
+
+describe("spanduk galat: PERILAKU handleSave", () => {
+  it("menyebut LABEL medan yang gagal, bukan satu kalimat tetap", async () => {
+    const { result } = renderHook(() => useCrudForm<D>({ schema: schema(), mode: "create" }));
+    await act(async () => { await result.current.handleSave(); });
+
+    const e = String(result.current.error ?? "");
+    expect(e).toContain("NIK");
+    expect(e).toContain("Tanggal Lahir");
+    expect(e).not.toBe("Periksa field wajib");
+  });
+
+  it("medan YATIM (dituntut validate, nol punya field) tetap DISEBUT", async () => {
+    const { result } = renderHook(() => useCrudForm<D>({ schema: schema(), mode: "create" }));
+    await act(async () => { await result.current.handleSave(); });
+    // Justru inilah yang menahan create Nasabah Perorangan 21 hari tanpa nama.
+    expect(String(result.current.error ?? "")).toContain("yatim");
+  });
+
+  it("PEMANCAR: nol ada galat validasi -> spanduk DIAM", async () => {
+    const { result } = renderHook(() => useCrudForm<D>({ schema: schema(), mode: "create" }));
+    act(() => { result.current.setForm({ nik: "1", lahir: "2", yatim: "3" } as D); });
+    await act(async () => { await result.current.handleSave(); });
+    // Save akan gagal di jaringan (nol ada server) -> itu serverError, BUKAN
+    // spanduk validasi. Yang diasersi: ia nol lagi berbunyi soal medan.
+    const e = String(result.current.error ?? "");
+    expect(e).not.toContain("NIK:");
+    expect(e).not.toContain("Tanggal Lahir:");
+  });
+});

package/src/workflow/use-crud-form.ts

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import type { CrudForm, FormMode } from "../form-types";
 import {
   collectAllFields,
+  ringkasGalatMedan,
   collectPageFields,
   getLayoutPageCount,
   resolveApiPath,
@@ -206,7 +207,12 @@ export function useCrudForm<TData extends Record<string, unknown>>({
     setForm,
     loading,
     saving,
-    error: hasValidationError ? labels.validationError : serverError,
+    // Cabang validasi MENYEBUT medannya; cabang serverError nol tersentuh —
+    // keduanya menjawab pertanyaan berbeda dan nol boleh dilebur.
+    error: hasValidationError
+      ? ringkasGalatMedan(fieldErrors, collectAllFields(schema.layout)) ??
+        labels.validationError
+      : serverError,
     fieldErrors,
     isDirty,
     page,