@isi-ui7/bos7-shared 0.4.4 → 0.4.6

package/src/detail-rows-invalid-text.test.tsx

@@ -0,0 +1,125 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+import { SchemaFormRenderer } from "./form-renderer";
+import type { FormSection } from "./form-types";
+
+afterEach(cleanup);
+
+type D = Record<string, unknown>;
+
+// Medan `detail-rows` NOL meneruskan `invalidText` sampai 2026-09-06, sementara
+// saudaranya `detail-modal` SUDAH (detail-modal-field.tsx:277).
+//
+// 🔴 Akibatnya: sebuah aturan validasi yang keyed ke medan detail-rows
+// DIHITUNG, MENAHAN SUBMIT (use-crud-form.ts:167 `if (Object.keys(errs).length)
+// return`), lalu NOL PERNAH DITAMPILKAN. Petugas melihat spanduk generik
+// "Check required fields" dan tabel yang bersih — pesannya sudah ditulis, sudah
+// benar, dan invisible.
+//
+// Terukur pada Produk Pembiayaan (bos7-financing, errors.costs). Radius ledak
+// lintas estate: 5 formulir yang benar-benar menyetel error pada kunci
+// detail-rows (financing ×2 `costs`, treasury ×3 `items`/`items`/`mappings`);
+// 12 dari 17 berkas ber-detail-rows lainnya nol menyetelnya dan karena itu nol
+// dapat melihat perbedaan.
+
+const PESAN = "Setiap baris biaya harus memilih Element Biaya";
+
+const section: FormSection<D> = {
+  title: "Parameter Biaya",
+  fields: [
+    {
+      key: "costs",
+      label: "Daftar Biaya",
+      type: "detail-rows",
+      span: 12,
+      detailRows: {
+        columns: [{ key: "cost_element_id", label: "Element Biaya", type: "text" }],
+        newRowFactory: () => ({ cost_element_id: "" }),
+      },
+    },
+  ],
+};
+
+// 🔴 Menghitung SEMUA [role=alert] mengukur populasi yang salah: Carbon's
+// TextInput selalu merender <span class="cds--text-input__counter-alert"> yang
+// KOSONG, jadi asersi "tepat satu alert" gagal karena alasan yang nol
+// berhubungan. Terukur saat menulis berkas ini — uji "galat nol bocor" berbunyi
+// 2 padahal cuma satu medan bergalat.
+//
+// Yang dihitung: alert yang BERISI teks. Itu populasi yang pertanyaannya
+// maksud.
+function alertsBerteks(root: HTMLElement) {
+  return Array.from(root.querySelectorAll('[role="alert"]')).filter(
+    (el) => (el.textContent ?? "").trim() !== "",
+  );
+}
+
+function renderWith(errors: Record<string, string>) {
+  return render(
+    <SchemaFormRenderer<D>
+      mode="create"
+      value={{ costs: [] }}
+      sections={[section]}
+      errors={errors}
+      onChange={() => {}}
+    />,
+  );
+}
+
+describe("detail-rows menampilkan galat medannya", () => {
+  // ARAH 1 — merah sebelum perbaikan: pesannya nol pernah muncul.
+  it("error DISETEL ⇒ pesannya MUNCUL, dan isinya menyebut biaya", () => {
+    renderWith({ costs: PESAN });
+    const el = screen.getByText(PESAN);
+    expect(el).toBeTruthy();
+    // 🔴 Diasersi ISINYA, bukan "pesannya berubah". Generik yang diganti
+    // generik lain akan lulus asersi "bukan lagi Check required fields"
+    // sambil nol menutup AC-nya.
+    expect(el.textContent).toContain("baris biaya");
+    // Bentuk yang sama dgn DetailModalField: role=alert supaya pembaca layar
+    // mengumumkannya, bukan sekadar teks merah.
+    expect(el.getAttribute("role")).toBe("alert");
+  });
+
+  // ARAH 2 — dan ini yang menjaga treasury: perubahan yang cuma dapat MENAMBAH
+  // nol dapat meregresi. Formulir yang nol menyetel error nol boleh melihat
+  // apa pun yang baru.
+  it("error KOSONG ⇒ NOL ada yang muncul, dan nol ada elemen alert", () => {
+    const { container } = renderWith({});
+    expect(screen.queryByText(PESAN)).toBeNull();
+    expect(alertsBerteks(container).length).toBe(0);
+  });
+
+  // KONTROL POSITIF utk instrumen: tabelnya memang dirender di kedua keadaan,
+  // jadi "nol ada alert" di atas berarti "nol ada galat", bukan "nol ada apa-apa".
+  it("KONTROL: tabelnya dirender di KEDUA keadaan", () => {
+    const a = renderWith({ costs: PESAN });
+    expect(a.container.querySelector("table")).toBeTruthy();
+    cleanup();
+    const b = renderWith({});
+    expect(b.container.querySelector("table")).toBeTruthy();
+  });
+
+  // Medan LAIN di section yang sama nol boleh ikut menampilkan galat medan ini.
+  it("galat detail-rows nol bocor ke medan lain", () => {
+    const dua: FormSection<D> = {
+      ...section,
+      fields: [
+        ...section.fields,
+        { key: "catatan", label: "Catatan", type: "text", span: 6 },
+      ],
+    };
+    const { container } = render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{ costs: [], catatan: "" }}
+        sections={[dua]}
+        errors={{ costs: PESAN }}
+        onChange={() => {}}
+      />,
+    );
+    expect(alertsBerteks(container).length).toBe(1);
+    expect(alertsBerteks(container)[0].textContent).toBe(PESAN);
+  });
+});

package/src/detail-rows-renders-existing.test.tsx

@@ -0,0 +1,176 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+import { SchemaFormRenderer } from "./form-renderer";
+import type { FormSection } from "./form-types";
+
+afterEach(cleanup);
+
+type D = Record<string, unknown>;
+
+// Medan `detail-rows` MENAMPILKAN baris yang sudah ada — dan sampai berkas ini,
+// NOL ADA satu uji pun di paket ini yang mengasersinya.
+//
+// ── Celah yang ditutup ───────────────────────────────────────────────────────
+//
+// Satu-satunya uji yang pernah merender `detail-rows` dengan nilai TAK-KOSONG
+// adalah `detail-modal-field.test.tsx:444` (`value={{ limits: [{kode:
+// "CASH_IN"}] }}`), dan asersinya:
+//
+//     getByText("Limit Transaksi")                       <- LABEL medannya
+//     getByRole("button", {name:"Tambah Ahli Waris"})    <- tombol medan LAIN
+//
+// `CASH_IN` sendiri nol pernah disentuh. Uji itu jujur — ia berjudul "tetap
+// jalan berdampingan" dan memang mengukur koeksistensi. Yang salah adalah nol
+// ada yang lain. `detail-rows-invalid-text.test.tsx` (2026-09-06) juga nol
+// menutupnya: ia merender `value={{ costs: [] }}` — nol baris.
+//
+// ── Kenapa kelas ini mahal ───────────────────────────────────────────────────
+//
+// form-renderer.tsx:623
+//
+//     const rows = Array.isArray(rawValue) ? rawValue : [];
+//
+// Fallback `[]` itu DIAM. Dan setiap konsumen `detail-rows` di estate ini
+// menulis dengan semantik GANTI-SEMUA — backend menghapus seluruh anak lalu
+// menyisipkan ulang apa yang dikirim. Gabungannya:
+//
+//     nilai non-array (atau nol ter-bind) ⇒ tabel render KOSONG
+//                                        ⇒ Save mengirim []
+//                                        ⇒ ganti-semua MENGHAPUS SEMUANYA
+//                                        ⇒ dan layarnya SUKSES
+//
+// ── Siapa yang dijaga berkas ini ─────────────────────────────────────────────
+//
+// Uji yang nol menyebut konsumennya akan dihapus oleh orang yang mengira ia
+// mengukur satu instans. Keempatnya:
+//
+//     holidays   bos7-enterprise  calendar/_schema.ts   (DeleteCalendarHolidays + Insert)
+//     costs      bos7-financing   produk pembiayaan     (2 layar)
+//     items      bos7-accounting  controlling/budgets   (DeleteBudgetItemsByBudget + Insert)
+//                bos7-treasury    journal-template, pof-account-group
+//     mappings   bos7-treasury    pof
+//
+// ⚠️ `detail-modal` (form-renderer.tsx:737) punya fallback `[]` yang IDENTIK dan
+// tetap tanpa penjaga. Di luar lingkup berkas ini — sengaja disebut, bukan
+// diam-diam dilewati.
+
+const BARIS = [
+  { description: "Idul Fitri", holiday_type: "NATIONAL" },
+  { description: "Natal", holiday_type: "NATIONAL" },
+];
+
+const section: FormSection<D> = {
+  title: "Hari Libur",
+  fields: [
+    {
+      key: "holidays",
+      label: "Daftar Hari Libur",
+      type: "detail-rows",
+      span: 12,
+      detailRows: {
+        columns: [
+          { field: "description", header: "Keterangan", columnType: { type: "text" } },
+          { field: "holiday_type", header: "Tipe", columnType: { type: "text" } },
+        ],
+        newRowFactory: () => ({ description: "", holiday_type: "" }),
+      },
+    },
+  ],
+};
+
+function renderRows(rows: unknown, mode: "edit" | "view" = "edit") {
+  return render(
+    <SchemaFormRenderer<D>
+      mode={mode}
+      value={{ holidays: rows }}
+      sections={[section]}
+      onChange={() => {}}
+    />,
+  );
+}
+
+/** Sel-sel `<td>` sebuah tabel sebagai teks — populasi yang pertanyaannya maksud. */
+function selTabel(root: HTMLElement): string[] {
+  return Array.from(root.querySelectorAll("tbody td")).map((td) =>
+    (td.textContent ?? "").trim(),
+  );
+}
+
+describe("detail-rows menampilkan baris yang sudah ada", () => {
+  // ── ARAH 1 — yang merah kalau perendernya berhenti mem-bind nilainya.
+  //
+  // 🔴 Diasersi ISI SELNYA, bukan JUMLAH BARIS. "2 baris" dapat dipenuhi dua
+  // baris KOSONG — tepat kelas yang sama dengan uji lama yang mengasersi label,
+  // satu tingkat lebih halus.
+  it("dua baris terisi ⇒ isi tiap selnya muncul", () => {
+    const { container } = renderRows(BARIS);
+
+    // Nilai yang UNIK per baris: membuktikan KEDUANYA dirender, bukan satu
+    // baris yang kebetulan cocok dua kali.
+    expect(screen.getByText("Idul Fitri")).toBeTruthy();
+    expect(screen.getByText("Natal")).toBeTruthy();
+
+    // Kolom kedua sengaja bernilai SAMA di kedua baris — jadi ia hanya lulus
+    // kalau perendernya benar-benar mengulang per baris.
+    expect(screen.getAllByText("NATIONAL").length).toBe(2);
+
+    // Dan keduanya harus duduk di <tr> yang BERBEDA. Tanpa ini, sebuah
+    // perender yang menumpuk semua nilai di satu baris tetap lulus di atas.
+    const barisIdul = screen.getByText("Idul Fitri").closest("tr");
+    const barisNatal = screen.getByText("Natal").closest("tr");
+    expect(barisIdul).toBeTruthy();
+    expect(barisNatal).toBeTruthy();
+    expect(barisIdul).not.toBe(barisNatal);
+
+    expect(container.querySelectorAll("tbody tr").length).toBe(2);
+  });
+
+  // ── ARAH 2 — KONTROL yang membedakan "menampilkan yang ada" dari
+  // "selalu menampilkan sesuatu".
+  //
+  // Tanpa arah ini, sebuah perender yang MENGARANG baris (mis. selalu
+  // menyisipkan satu baris kosong dari newRowFactory) akan lulus arah 1 dan
+  // nol pernah merah. Dan nol-baris BUKAN kegagalan — ia keadaan sah sebuah
+  // kalender tanpa hari libur.
+  it("KONTROL: nol baris ⇒ nol sel, dan itu BUKAN kegagalan", () => {
+    const { container } = renderRows([]);
+    expect(selTabel(container)).toEqual([]);
+    expect(container.querySelectorAll("tbody tr").length).toBe(0);
+    expect(screen.queryByText("Idul Fitri")).toBeNull();
+    // Tabelnya sendiri TETAP dirender — jadi "nol ada sel" di atas berarti
+    // "nol ada baris", bukan "medannya nol ada".
+    expect(container.querySelector("table")).toBeTruthy();
+    expect(screen.getByText("Keterangan")).toBeTruthy(); // header kolom
+  });
+
+  // ── ARAH 3 — jalur yang mengubah fallback diam jadi TERUKUR.
+  //
+  // `Array.isArray(rawValue) ? rawValue : []` memperlakukan nilai non-array
+  // sebagai nol-baris tanpa satu galat pun. Itu perilaku yang DISENGAJA
+  // (perender nol boleh melempar atas data cacat), tapi ia harus punya uji —
+  // kalau suatu hari ia berubah jadi melempar, atau jadi merender sesuatu,
+  // seseorang harus melihatnya di sini.
+  it("nilai non-array diperlakukan sebagai nol-baris, tanpa melempar", () => {
+    for (const buruk of [undefined, null, "Idul Fitri", 42, { description: "Idul Fitri" }]) {
+      const { container } = renderRows(buruk);
+      expect(container.querySelector("table")).toBeTruthy();
+      expect(container.querySelectorAll("tbody tr").length).toBe(0);
+      // 🔴 Ini kalimat yang harus dibaca orang berikutnya: string
+      // "Idul Fitri" dan objek ber-`description` TIDAK muncul. Digabung
+      // ganti-semua, keadaan ini = hapus senyap.
+      expect(screen.queryByText("Idul Fitri")).toBeNull();
+      cleanup();
+    }
+  });
+
+  // ── ARAH 4 — layar `view` memakai <EditableTable> yang SAMA (readOnly).
+  // Kalau binding-nya putus hanya di jalur readonly, checker melihat tabel
+  // kosong pada layar approval sementara datanya utuh.
+  it("mode view: baris tetap muncul (readOnly, bukan kosong)", () => {
+    const { container } = renderRows(BARIS, "view");
+    expect(screen.getByText("Idul Fitri")).toBeTruthy();
+    expect(screen.getByText("Natal")).toBeTruthy();
+    expect(container.querySelectorAll("tbody tr").length).toBe(2);
+  });
+});

package/src/form-renderer-utils.ts

@@ -155,13 +155,36 @@ export function ringkasGalatMedan<TData extends Record<string, unknown>>(
 
 // ── 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/form-renderer.tsx

@@ -186,12 +186,21 @@ function FieldShell({
   required,
   children,
   helperText,
+  invalidText,
   htmlFor,
 }: {
   label: ReactNode;
   required?: boolean;
   children: ReactNode;
   helperText?: ReactNode;
+  /**
+   * Galat tingkat-medan. Bentuknya SAMA PERSIS dgn DetailModalField
+   * (detail-modal-field.tsx:277) — role="alert", kelas helper, token warna
+   * galat, dirender DI ATAS helperText. Tipe medan itu SUDAH menampilkan
+   * galatnya dan `detail-rows` NOL; ini menyamakan, bukan menciptakan bentuk
+   * kedua.
+   */
+  invalidText?: ReactNode;
   htmlFor?: string;
 }) {
   const labelStyle = { color: "var(--cds-text-secondary, #525252)", display: "flex", alignItems: "center", gap: "0.25rem" } as const;
@@ -211,6 +220,15 @@ function FieldShell({
         <div className={UI7_FORM_VISUAL_CLASSNAMES.label} style={labelStyle}>{labelContent}</div>
       )}
       {children}
+      {invalidText ? (
+        <div
+          role="alert"
+          className={UI7_FORM_VISUAL_CLASSNAMES.helper}
+          style={{ color: "var(--cds-text-error, #da1e28)" }}
+        >
+          {invalidText}
+        </div>
+      ) : null}
       {helperText ? (
         <div className={UI7_FORM_VISUAL_CLASSNAMES.helper}>{helperText}</div>
       ) : null}
@@ -622,6 +640,13 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         label={field.label}
                         required={effectiveRequired}
                         helperText={field.helperText}
+                        // 🔴 `detail-rows` NOL meneruskan ini sampai 2026-09-06, sementara
+                        // saudaranya `detail-modal` SUDAH. Akibatnya aturan validasi yang
+                        // keyed ke medan detail-rows DIHITUNG, MENAHAN SUBMIT, lalu NOL
+                        // PERNAH DITAMPILKAN — petugas melihat spanduk generik "Check
+                        // required fields" dan tabel yang bersih. Terukur pada Produk
+                        // Pembiayaan (errors.costs, bos7-financing#200).
+                        invalidText={invalidText}
                       >
                         <EditableTable
                           columns={detail.columns}

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.ts

@@ -109,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) };
     }