@isi-ui7/bos7-shared 0.4.5 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -70,10 +70,10 @@
   "peerDependencies": {
     "@carbon/icons-react": "^11.71.0",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/corporate-themes": ">=0.2.15",
+    "@isi-ui7/corporate-themes": ">=0.2.17",
     "@isi-ui7/data-table": ">=0.2.5",
     "@isi-ui7/editable-table": ">=0.2.3",
-    "@isi-ui7/i18n": ">=0.2.3",
+    "@isi-ui7/i18n": ">=0.2.4",
     "@isi-ui7/lookup-input": ">=0.2.4",
     "@isi-ui7/modal-manager": ">=0.2.0",
     "@isi-ui7/realtime": ">=0.2.0",
@@ -106,14 +106,14 @@
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
     "vitest": "^1.0.0",
-    "@isi-ui7/corporate-themes": "0.2.15",
+    "@isi-ui7/corporate-themes": "0.2.17",
     "@isi-ui7/data-table": "0.2.5",
-    "@isi-ui7/editable-table": "0.2.3",
     "@isi-ui7/lookup-input": "0.2.4",
     "@isi-ui7/realtime": "0.2.3",
     "@isi-ui7/modal-manager": "0.2.2",
-    "@isi-ui7/ui-shell": "0.2.8",
-    "@isi-ui7/i18n": "0.2.3"
+    "@isi-ui7/i18n": "0.2.4",
+    "@isi-ui7/editable-table": "0.2.3",
+    "@isi-ui7/ui-shell": "0.2.8"
   },
   "dependencies": {
     "@carbon/icons-react": "^11.71.0",
@@ -126,9 +126,9 @@
     "jose": "^5.9.6",
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.7",
-    "@isi-ui7/data-table": "0.2.5",
+    "@isi-ui7/lookup-input": "0.2.4",
     "@isi-ui7/editable-table": "0.2.3",
-    "@isi-ui7/lookup-input": "0.2.4"
+    "@isi-ui7/data-table": "0.2.5"
   },
   "scripts": {
     "build": "vite build",

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.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/i18n-toggle-locale.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { SHARED_DICTIONARIES } from "@isi-ui7/i18n";
+
+// Butir 1.8 (DG-00): satu medan boolean menampilkan DUA kosakata di modul yang
+// sama, karena dua widget membaca dua kunci —
+//
+//   LIST  is_printed -> "Ya" / "Tidak"   (checkbox -> boolYes/boolNo)
+//   VIEW  is_printed -> "On" / "Off"     (toggle   -> toggleOn/toggleOff)
+//
+// Locale bawaan estate `id`, dan "Ya"/"Tidak" SUDAH ada di kamus itu, nol
+// terpakai oleh toggle.
+//
+// ⚠️ Kaidah user (ditekan 4x): "sel menampilkan DESKRIPSI, bukan nilai
+// mentah". "On" memenuhi hurufnya dan meleset dari maksudnya — deskripsi yang
+// berbahasa lain dari layarnya nol lebih terbaca dari `true`.
+describe("kamus toggle — bahasa mengikuti locale-nya", () => {
+  const id = SHARED_DICTIONARIES.id;
+  const en = SHARED_DICTIONARIES.en;
+
+  it("KONTROL POSITIF: kedua kamus terbaca dan berisi", () => {
+    // Tanpa ini, setiap asersi di bawah bisa lulus atas objek kosong.
+    expect(Object.keys(id).length).toBeGreaterThan(20);
+    expect(Object.keys(en).length).toBeGreaterThan(20);
+  });
+
+  it("ID: toggle memakai Ya/Tidak, bukan On/Off", () => {
+    expect(id["bos7.toggleOn"]).toBe("Ya");
+    expect(id["bos7.toggleOff"]).toBe("Tidak");
+  });
+
+  it("KONTROL (+): boolYes/boolNo NOL berubah — LIST tetap Ya/Tidak", () => {
+    // Perbaikan ini menyentuh toggle saja. Kalau checkbox ikut berubah, yang
+    // terjadi bukan penyeragaman melainkan kerusakan di tempat lain.
+    expect(id["bos7.boolYes"]).toBe("Ya");
+    expect(id["bos7.boolNo"]).toBe("Tidak");
+  });
+
+  it("KONTROL (−): kamus EN TETAP On/Off — di sana ia benar", () => {
+    expect(en["bos7.toggleOn"]).toBe("On");
+    expect(en["bos7.toggleOff"]).toBe("Off");
+    expect(en["bos7.boolYes"]).toBe("Yes");
+    expect(en["bos7.boolNo"]).toBe("No");
+  });
+
+  it("ID nol memuat kata Inggris On/Off di keempat kunci boolean", () => {
+    // Asersi yang MEMISAHKAN: ia merah pada keadaan lama, dan tetap merah
+    // kalau seseorang "memperbaiki" satu kunci dan melupakan pasangannya.
+    for (const k of ["bos7.toggleOn", "bos7.toggleOff", "bos7.boolYes", "bos7.boolNo"]) {
+      expect(["On", "Off", "Yes", "No"], `${k} berbahasa Inggris di kamus ID`).not.toContain(id[k]);
+    }
+  });
+});

package/src/i18n.tsx

@@ -81,8 +81,14 @@ export function useBosSharedI18n(): BosSharedLabels {
 
     boolYes: t("bos7.boolYes", "Ya"),
     boolNo: t("bos7.boolNo", "Tidak"),
-    toggleOn: t("bos7.toggleOn", "On"),
-    toggleOff: t("bos7.toggleOff", "Off"),
+    // Fallback Indonesia, sama dengan boolYes/boolNo dua baris di atas.
+    //
+    // 🔴 Sebelumnya "On"/"Off" — fallback berbahasa INGGRIS di blok yang tiap
+    // baris lainnya berbahasa Indonesia. Ia cacat KEDUA dari temuan yang
+    // sama: memperbaiki kamus saja meninggalkan jalur ini, dan jalur ini yang
+    // dipakai kapan pun kuncinya nol ada di kamus locale aktif.
+    toggleOn: t("bos7.toggleOn", "Ya"),
+    toggleOff: t("bos7.toggleOff", "Tidak"),
     emptyValue: t("bos7.emptyValue", "—"),
     showInactive: t("bos7.showInactive", "Tampilkan Nonaktif"),