@isi-ui7/bos7-shared 0.3.3 → 0.3.5

package/dist/form-types.d.ts

@@ -145,6 +145,39 @@ export type FormSection<TData extends Record<string, unknown>> = {
     /** Number of equal columns in the section grid. Default 1. */
     columns?: 1 | 2 | 3;
     fields: FormField<TData>[];
+    /**
+     * Jalan keluar: render konten sendiri MENGGANTIKAN grid `fields`.
+     *
+     * Ada untuk panel yang harus MEMBACA dan MENULIS state form sekaligus, yang
+     * tidak bisa dinyatakan sebagai field — mis. panel "Cek Identitas" pada
+     * registrasi nasabah, yang memanggil backend lalu menyetel penanda hasilnya
+     * agar gerbang `canLeavePage` bisa membacanya.
+     *
+     * `description` sudah ReactNode, tapi ia tidak punya akses ke `value` maupun
+     * cara menulis balik — jadi tidak cukup untuk keperluan ini.
+     *
+     * Opsional: section tanpa `render` dirender persis seperti sebelumnya.
+     * `fields` tetap wajib (pakai `[]`) supaya tipe section tidak bercabang dua.
+     */
+    render?: (ctx: {
+        value: TData;
+        setValue: (patch: Partial<TData>) => void;
+        mode: FormMode;
+        disabled: boolean;
+    }) => ReactNode;
+    /**
+     * Sembunyikan SELURUH section — judul, deskripsi, dan isinya.
+     *
+     * Bentuknya sengaja sama persis dengan `FormField.hidden` supaya tidak ada
+     * dua idiom untuk hal yang sama.
+     *
+     * Ada karena menyembunyikan tiap field satu per satu TIDAK cukup: judul dan
+     * deskripsi section tetap terender, meninggalkan kepala panel kosong yang
+     * terlihat seperti bug — dan pada form yang panelnya memang harus terkunci
+     * dulu, kepala kosong itu justru mengiklankan keberadaan bagian yang belum
+     * boleh diisi.
+     */
+    hidden?: boolean | ((mode: FormMode, data: TData) => boolean);
 };
 export type FormPageDef<TData extends Record<string, unknown>> = {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {

package/src/form-renderer.tsx

@@ -484,6 +484,13 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
       style={{ display: "grid", gap: dt.sectionGap }}
     >
       {sections.map((section, sectionIndex) => {
+        // Section tersembunyi mengembalikan null — React tidak merender apa
+        // pun untuknya, termasuk judul & deskripsinya.
+        const sectionHidden =
+          typeof section.hidden === "function"
+            ? section.hidden(mode, value)
+            : section.hidden === true;
+        if (sectionHidden) return null;
         const cols = section.columns ?? 1;
         const defaultSpan = Math.floor(12 / cols);
 
@@ -521,6 +528,14 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
               </div>
             ) : null}
 
+            {section.render ? (
+              section.render({
+                value,
+                setValue: (patch) => onChange?.(patch),
+                mode,
+                disabled,
+              })
+            ) : (
             <div
               className={UI7_FORM_VISUAL_CLASSNAMES.row}
               style={{
@@ -978,6 +993,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                 ];
               })}
             </div>
+            )}
           </section>
         );
       })}

package/src/form-section-hidden.test.tsx

@@ -0,0 +1,87 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SchemaFormRenderer } from "./form-renderer";
+import type { FormSection } from "./form-types";
+
+type D = Record<string, unknown>;
+
+// `FormSection.hidden` — menyembunyikan SELURUH section, bukan hanya field-nya.
+//
+// Menyembunyikan tiap field satu per satu tidak cukup: judul dan deskripsi
+// section tetap terender, meninggalkan kepala panel kosong. Pada form yang
+// panelnya memang harus terkunci dulu, kepala kosong itu justru mengiklankan
+// bagian yang belum boleh diisi.
+
+const locked: FormSection<D> = {
+  title: "Data Diri",
+  description: "Terbuka setelah verifikasi",
+  fields: [{ key: "nama", label: "Nama Lengkap", type: "text", span: 4 }],
+  hidden: (_mode, data) => data.verified !== true,
+};
+
+const always: FormSection<D> = {
+  title: "Verifikasi Identitas",
+  fields: [{ key: "nik", label: "Nomor Identitas", type: "text", span: 4 }],
+};
+
+function renderWith(value: D) {
+  return render(
+    <SchemaFormRenderer<D>
+      mode="create"
+      value={value}
+      sections={[always, locked]}
+      onChange={() => {}}
+    />,
+  );
+}
+
+describe("FormSection.hidden", () => {
+  it("menyembunyikan JUDUL dan DESKRIPSI, bukan cuma field-nya", () => {
+    renderWith({ verified: false });
+    expect(screen.queryByText("Data Diri")).toBeNull();
+    expect(screen.queryByText("Terbuka setelah verifikasi")).toBeNull();
+    expect(screen.queryByLabelText("Nama Lengkap")).toBeNull();
+  });
+
+  it("menampilkan section ketika predikatnya false", () => {
+    renderWith({ verified: true });
+    expect(screen.getByText("Data Diri")).toBeTruthy();
+    expect(screen.getByLabelText("Nama Lengkap")).toBeTruthy();
+  });
+
+  it("KONTROL: section tetangga tanpa hidden tidak ikut terpengaruh", () => {
+    // Kalau kontrol ini ikut gagal, yang diukur bukan `hidden` melainkan
+    // perenderan section secara umum.
+    renderWith({ verified: false });
+    expect(screen.getByText("Verifikasi Identitas")).toBeTruthy();
+    expect(screen.getByLabelText("Nomor Identitas")).toBeTruthy();
+  });
+
+  it("menerima boolean, bukan hanya fungsi — bentuknya sama dgn FormField.hidden", () => {
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{}}
+        sections={[{ title: "Selalu Tersembunyi", fields: [], hidden: true }]}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.queryByText("Selalu Tersembunyi")).toBeNull();
+  });
+
+  it("predikat menerima mode — section bisa disembunyikan hanya saat create", () => {
+    const s: FormSection<D> = {
+      title: "Hanya Saat Edit",
+      fields: [],
+      hidden: (mode) => mode === "create",
+    };
+    const { unmount } = render(
+      <SchemaFormRenderer<D> mode="create" value={{}} sections={[s]} onChange={() => {}} />,
+    );
+    expect(screen.queryByText("Hanya Saat Edit")).toBeNull();
+    unmount();
+
+    render(<SchemaFormRenderer<D> mode="edit" value={{}} sections={[s]} onChange={() => {}} />);
+    expect(screen.getByText("Hanya Saat Edit")).toBeTruthy();
+  });
+});

package/src/form-section-render.test.tsx

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SchemaFormRenderer } from "./form-renderer";
+import type { FormSection } from "./form-types";
+
+type D = Record<string, unknown>;
+
+// Kait `render` pada FormSection — jalan keluar untuk panel yang harus MEMBACA
+// dan MENULIS state form sekaligus (mis. "Cek Identitas" di registrasi
+// nasabah), yang tidak bisa dinyatakan sebagai field.
+//
+// Dua hal yang diuji, dan yang KEDUA sama pentingnya: perubahan ini menyentuh
+// jalur render SETIAP section di seluruh platform. Kalau section tanpa `render`
+// ikut berubah, kerusakannya menyebar ke semua form sekaligus — dan bentuknya
+// bukan galat, melainkan field yang diam-diam hilang.
+
+const fieldsOnly: FormSection<D> = {
+  title: "Biasa",
+  fields: [{ key: "nama", label: "Nama Lengkap", type: "text", span: 4 }],
+};
+
+describe("FormSection.render", () => {
+  it("section BER-render menampilkan konten kustom dan TIDAK merender fields-nya", () => {
+    const section: FormSection<D> = {
+      title: "Verifikasi",
+      fields: [{ key: "nama", label: "Nama Lengkap", type: "text", span: 4 }],
+      render: () => <div>PANEL KUSTOM</div>,
+    };
+
+    render(
+      <SchemaFormRenderer<D> mode="create" value={{}} sections={[section]} onChange={() => {}} />,
+    );
+
+    expect(screen.getByText("PANEL KUSTOM")).toBeTruthy();
+    // `fields` sengaja tetap diisi di atas: kalau grid-nya ikut terender,
+    // panel dan field akan tampil bersamaan — bukan itu maksud "menggantikan".
+    expect(screen.queryByLabelText("Nama Lengkap")).toBeNull();
+  });
+
+  it("menerima value & mode, dan setValue meneruskan patch ke onChange", () => {
+    const onChange = vi.fn();
+    const seen: Record<string, unknown>[] = [];
+
+    const section: FormSection<D> = {
+      title: "Verifikasi",
+      fields: [],
+      render: (ctx) => {
+        seen.push({ value: ctx.value, mode: ctx.mode, disabled: ctx.disabled });
+        return <button onClick={() => ctx.setValue({ verify_status: "NEW" })}>Cek</button>;
+      },
+    };
+
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{ identity_number: "327101" }}
+        sections={[section]}
+        onChange={onChange}
+      />,
+    );
+
+    expect(seen[0].value).toEqual({ identity_number: "327101" });
+    expect(seen[0].mode).toBe("create");
+    expect(seen[0].disabled).toBe(false);
+
+    screen.getByText("Cek").click();
+    expect(onChange).toHaveBeenCalledWith({ verify_status: "NEW" });
+  });
+
+  it("KONTROL REGRESI: section TANPA render tetap merender field-nya seperti sebelumnya", () => {
+    render(
+      <SchemaFormRenderer<D> mode="create" value={{}} sections={[fieldsOnly]} onChange={() => {}} />,
+    );
+    expect(screen.getByLabelText("Nama Lengkap")).toBeTruthy();
+  });
+
+  it("KONTROL REGRESI: dua section bercampur — yang polos tidak terpengaruh tetangganya", () => {
+    const custom: FormSection<D> = {
+      title: "Verifikasi",
+      fields: [],
+      render: () => <div>PANEL KUSTOM</div>,
+    };
+
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{}}
+        sections={[custom, fieldsOnly]}
+        onChange={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("PANEL KUSTOM")).toBeTruthy();
+    expect(screen.getByLabelText("Nama Lengkap")).toBeTruthy();
+  });
+});

package/src/form-types.ts

@@ -157,6 +157,39 @@ export type FormSection<TData extends Record<string, unknown>> = {
   /** Number of equal columns in the section grid. Default 1. */
   columns?: 1 | 2 | 3;
   fields: FormField<TData>[];
+  /**
+   * Jalan keluar: render konten sendiri MENGGANTIKAN grid `fields`.
+   *
+   * Ada untuk panel yang harus MEMBACA dan MENULIS state form sekaligus, yang
+   * tidak bisa dinyatakan sebagai field — mis. panel "Cek Identitas" pada
+   * registrasi nasabah, yang memanggil backend lalu menyetel penanda hasilnya
+   * agar gerbang `canLeavePage` bisa membacanya.
+   *
+   * `description` sudah ReactNode, tapi ia tidak punya akses ke `value` maupun
+   * cara menulis balik — jadi tidak cukup untuk keperluan ini.
+   *
+   * Opsional: section tanpa `render` dirender persis seperti sebelumnya.
+   * `fields` tetap wajib (pakai `[]`) supaya tipe section tidak bercabang dua.
+   */
+  render?: (ctx: {
+    value: TData;
+    setValue: (patch: Partial<TData>) => void;
+    mode: FormMode;
+    disabled: boolean;
+  }) => ReactNode;
+  /**
+   * Sembunyikan SELURUH section — judul, deskripsi, dan isinya.
+   *
+   * Bentuknya sengaja sama persis dengan `FormField.hidden` supaya tidak ada
+   * dua idiom untuk hal yang sama.
+   *
+   * Ada karena menyembunyikan tiap field satu per satu TIDAK cukup: judul dan
+   * deskripsi section tetap terender, meninggalkan kepala panel kosong yang
+   * terlihat seperti bug — dan pada form yang panelnya memang harus terkunci
+   * dulu, kepala kosong itu justru mengiklankan keberadaan bagian yang belum
+   * boleh diisi.
+   */
+  hidden?: boolean | ((mode: FormMode, data: TData) => boolean);
 };
 
 // ── Layout ────────────────────────────────────────────────────────────────────