@isi-ui7/bos7-shared 0.4.3 → 0.4.5

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

@@ -4,7 +4,46 @@ 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>>;
-export declare function collectAllFields<TData extends Record<string, unknown>>(layout: FormLayout<TData>): FormField<TData>[];
+/**
+ * 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;
+/**
+ * Seluruh field yang BOLEH divalidasi — section `hidden` DILEWATI, sama seperti
+ * `collectPageFields`.
+ *
+ * 🔴 Dulu ia nol menyaring apa pun, bahkan `hidden: true` literal. Akibatnya
+ * `validateAll` (Save) menuntut field yang aplikasinya sendiri sembunyikan,
+ * sementara `validatePage` (Next) melewatinya dengan benar — jadi operator
+ * lolos di setiap halaman lalu ditolak di langkah terakhir, untuk field yang
+ * nol ada di layar mana pun dan nol bisa diisi gestur apa pun.
+ *
+ * `mode`/`data` opsional supaya pemanggil lama tetap jalan; tanpa keduanya
+ * hanya `hidden: true` literal yang bisa dievaluasi — predikat fungsi
+ * diperlakukan TIDAK tersembunyi, arah aman untuk validasi.
+ *
+ * ⚠️ Konsekuensi yang wajib dijaga di sisi SKEMA: kalau satu key punya dua
+ * salinan field (satu tampil di `create`, satu di `edit`), keduanya WAJIB
+ * membawa `validation`. Sebelum perbaikan ini, salinan tersembunyi ikut
+ * divalidasi sehingga satu salinan bervalidasi terasa cukup — ketergantungan
+ * terbalik yang kini nol berlaku lagi. Skema yang bersandar padanya akan
+ * kehilangan "wajib diisi" tanpa satu galat pun.
+ */
+export declare function collectAllFields<TData extends Record<string, unknown>>(layout: FormLayout<TData>, mode?: FormMode, data?: 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.5",
   "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.15",
     "@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/corporate-themes": "0.2.15",
     "@isi-ui7/data-table": "0.2.5",
     "@isi-ui7/editable-table": "0.2.3",
-    "@isi-ui7/i18n": "0.2.3",
     "@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/modal-manager": "0.2.2",
+    "@isi-ui7/ui-shell": "0.2.8",
+    "@isi-ui7/i18n": "0.2.3"
   },
   "dependencies": {
     "@carbon/icons-react": "^11.71.0",

package/src/form-renderer-utils.ts

@@ -113,15 +113,78 @@ 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 ────────────────────────────────────────────────────────────
 
+/**
+ * Seluruh field yang BOLEH divalidasi — section `hidden` DILEWATI, sama seperti
+ * `collectPageFields`.
+ *
+ * 🔴 Dulu ia nol menyaring apa pun, bahkan `hidden: true` literal. Akibatnya
+ * `validateAll` (Save) menuntut field yang aplikasinya sendiri sembunyikan,
+ * sementara `validatePage` (Next) melewatinya dengan benar — jadi operator
+ * lolos di setiap halaman lalu ditolak di langkah terakhir, untuk field yang
+ * nol ada di layar mana pun dan nol bisa diisi gestur apa pun.
+ *
+ * `mode`/`data` opsional supaya pemanggil lama tetap jalan; tanpa keduanya
+ * hanya `hidden: true` literal yang bisa dievaluasi — predikat fungsi
+ * diperlakukan TIDAK tersembunyi, arah aman untuk validasi.
+ *
+ * ⚠️ Konsekuensi yang wajib dijaga di sisi SKEMA: kalau satu key punya dua
+ * salinan field (satu tampil di `create`, satu di `edit`), keduanya WAJIB
+ * membawa `validation`. Sebelum perbaikan ini, salinan tersembunyi ikut
+ * divalidasi sehingga satu salinan bervalidasi terasa cukup — ketergantungan
+ * terbalik yang kini nol berlaku lagi. Skema yang bersandar padanya akan
+ * kehilangan "wajib diisi" tanpa satu galat pun.
+ */
 export function collectAllFields<TData extends Record<string, unknown>>(
   layout: FormLayout<TData>,
+  mode?: FormMode,
+  data?: TData,
 ): FormField<TData>[] {
   const sections = layout.type === "single-page"
     ? layout.sections
     : layout.pages.flatMap((p) => p.sections);
-  return sections.flatMap((s) => s.fields);
+  return sections.filter((s) => !isSectionHidden(s, mode, data)).flatMap((s) => s.fields);
 }
 
 /**

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-hidden.test.tsx

@@ -0,0 +1,62 @@
+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>;
+
+/**
+ * `validateAll` (Save) dulu memakai `collectAllFields` TANPA mode, jadi ia
+ * menuntut field di section TERSEMBUNYI — sementara `validatePage` (Next)
+ * melewatinya dengan benar. Operator lolos di tiap halaman lalu ditolak di
+ * langkah terakhir, untuk field yang nol ada di layarnya.
+ *
+ * Diuji lewat PERILAKU handleSave, bukan lewat collectAllFields langsung:
+ * uji atas helper tetap hijau meski hook nol memakainya.
+ */
+function schema(sembunyi: boolean | ((m: string, d: D) => boolean)): CrudForm<D> {
+  return {
+    title: { create: "c", edit: "e", view: "v" },
+    emptyData: { tampak: "", tersembunyi: "" } as D,
+    createApiPath: "/api/x",
+    layout: {
+      type: "single-page",
+      sections: [
+        { title: "tampak", fields: [
+          { key: "tampak", label: "Tampak", type: "text", span: 4, validation: { required: true } }] },
+        { title: "rahasia", hidden: sembunyi as never, fields: [
+          { key: "tersembunyi", label: "Tersembunyi", type: "text", span: 4, validation: { required: true } }] },
+      ],
+    },
+  } as unknown as CrudForm<D>;
+}
+
+async function galat(s: CrudForm<D>, isi: D) {
+  const { result } = renderHook(() => useCrudForm<D>({ schema: s, mode: "create" }));
+  act(() => { result.current.setForm(isi); });
+  await act(async () => { await result.current.handleSave(); });
+  return { pesan: String(result.current.error ?? ""), medan: result.current.fieldErrors as Record<string,string> };
+}
+
+describe("Save nol menuntut field di section tersembunyi", () => {
+  it("hidden literal: field tersembunyi NOL memblokir Save", async () => {
+    const r = await galat(schema(true), { tampak: "x", tersembunyi: "" });
+    expect(r.medan.tersembunyi, "field tersembunyi nol boleh dituntut").toBeUndefined();
+  });
+
+  it("hidden predikat: sama", async () => {
+    const r = await galat(schema(() => true), { tampak: "x", tersembunyi: "" });
+    expect(r.medan.tersembunyi).toBeUndefined();
+  });
+
+  it("KONTROL POSITIF: section TERLIHAT tetap dituntut", async () => {
+    const r = await galat(schema(true), { tampak: "", tersembunyi: "" });
+    expect(r.medan.tampak, "penjaga masih menggigit utk yg terlihat").toBeTruthy();
+    expect(r.pesan).toContain("Tampak");
+  });
+
+  it("KONTROL POSITIF: section yang TIDAK tersembunyi tetap dituntut", async () => {
+    const r = await galat(schema(false), { tampak: "x", tersembunyi: "" });
+    expect(r.medan.tersembunyi, "hidden=false ⇒ tetap divalidasi").toBeTruthy();
+  });
+});

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,
@@ -108,7 +109,7 @@ export function useCrudForm<TData extends Record<string, unknown>>({
   };
 
   const validateAll = () => {
-    const errs = runFieldValidation(collectAllFields(schema.layout), form, mode, labels);
+    const errs = runFieldValidation(collectAllFields(schema.layout, mode, form), form, mode, labels);
     if (schema.validate) {
       return { ...errs, ...schema.validate(form) };
     }
@@ -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,