@isi-ui7/bos7-shared 0.3.7 → 0.3.9

package/src/detail-modal-field.tsx

@@ -0,0 +1,342 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import {
+  Button,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@carbon/react";
+import { Add, Edit, TrashCan } from "@carbon/icons-react";
+import type { DetailModalConfig, FormMode, FormSection } from "./form-types";
+import { runFieldValidation } from "./form-renderer-utils";
+import type { BosSharedLabels } from "./i18n";
+import { UI7_FORM_VISUAL_CLASSNAMES } from "./style-contract";
+
+/**
+ * Tabel ringkas + modal form per baris — badan tipe field `detail-modal`.
+ *
+ * Semua gaya di sini INLINE (atau memakai kelas `ui7-form-*` yang sudah ikut
+ * `corporate-themes/dist/globals.css`), mengikuti `wizard-stepper.tsx`.
+ * Sengaja tidak ada berkas `.css` bersebelahan: `packages/bos7-shared` tidak
+ * punya `sideEffects`, tidak punya titik impor CSS, dan `form-contract.css`
+ * membuktikan jalur itu berakhir sebagai berkas yang tidak pernah dimuat siapa
+ * pun — komponennya tetap jalan, hanya tampilannya rusak, tanpa satu pun galat.
+ */
+
+export type DetailModalFieldProps = {
+  /** Dipakai untuk id/aria yang unik antar field dalam satu form. */
+  fieldKey: string;
+  label: ReactNode;
+  required?: boolean;
+  helperText?: ReactNode;
+  config: DetailModalConfig;
+  rows: Record<string, unknown>[];
+  mode: FormMode;
+  /** View mode atau field readonly: tabel tetap tampil, aksinya hilang. */
+  readOnly: boolean;
+  disabled: boolean;
+  labels: BosSharedLabels;
+  /** Pesan galat tingkat field dari validator form induk. */
+  invalidText?: string;
+  onChange: (rows: Record<string, unknown>[]) => void;
+  /**
+   * Perender form untuk isi modal.
+   *
+   * Disuntikkan dari `form-renderer.tsx` alih-alih di-import langsung supaya
+   * tidak ada lingkaran impor antara kedua modul — `form-renderer` sudah
+   * meng-import berkas ini.
+   */
+  renderForm: (props: {
+    value: Record<string, unknown>;
+    sections: FormSection<Record<string, unknown>>[];
+    mode: FormMode;
+    errors: Partial<Record<string, string>>;
+    disabled: boolean;
+    onChange: (patch: Partial<Record<string, unknown>>) => void;
+  }) => ReactNode;
+};
+
+export function DetailModalField({
+  fieldKey,
+  label,
+  required = false,
+  helperText,
+  config,
+  rows,
+  mode,
+  readOnly,
+  disabled,
+  labels,
+  invalidText,
+  onChange,
+  renderForm,
+}: DetailModalFieldProps) {
+  // `draft === null` berarti modal tertutup. State draft dipisah dari `rows`
+  // supaya Batal benar-benar membatalkan: baris asli tidak pernah tersentuh
+  // sampai Simpan lolos validasi.
+  const [draft, setDraft] = useState<Record<string, unknown> | null>(null);
+  // `null` = baris baru; angka = indeks baris yang sedang diubah.
+  const [draftIndex, setDraftIndex] = useState<number | null>(null);
+  const [errors, setErrors] = useState<Partial<Record<string, string>>>({});
+
+  const allowEdit = config.allowEdit ?? true;
+  const allowDelete = config.allowDelete ?? true;
+  const showActions = !readOnly && (allowEdit || allowDelete);
+  const atMax = config.maxRows !== undefined && rows.length >= config.maxRows;
+  const isOpen = draft !== null;
+
+  const openAdd = () => {
+    setDraft(config.newRowFactory());
+    setDraftIndex(null);
+    setErrors({});
+  };
+
+  const openEdit = (index: number) => {
+    // Salinan dangkal: menyunting objek baris langsung akan mengubah data form
+    // induk sebelum Simpan, sehingga Batal tidak lagi bisa mengembalikannya.
+    setDraft({ ...rows[index] });
+    setDraftIndex(index);
+    setErrors({});
+  };
+
+  const closeModal = () => {
+    setDraft(null);
+    setDraftIndex(null);
+    setErrors({});
+  };
+
+  const commit = () => {
+    if (draft === null) return;
+
+    // Validasi per-field memakai mesin yang SAMA dengan form biasa, dengan
+    // barisnya sebagai `TData`. Aturan `required` / `pattern` / `Rules.*` yang
+    // ditulis di section baris berlaku apa adanya, tanpa disalin ulang di sini.
+    const fields = config.sections.flatMap((s) => s.fields);
+    const fieldErrors = runFieldValidation(fields, draft, mode, labels);
+
+    // Baris baru divalidasi memakai posisi tempat ia AKAN mendarat, bukan -1,
+    // supaya aturan yang bergantung urutan (mis. nomor urut ahli waris) melihat
+    // indeks yang sama dengan yang akan dilihatnya setelah tersimpan.
+    const index = draftIndex ?? rows.length;
+    const rowErrors = config.validateRow?.(draft, index) ?? {};
+
+    const merged: Partial<Record<string, string>> = { ...fieldErrors, ...rowErrors };
+    if (Object.keys(merged).length > 0) {
+      setErrors(merged);
+      return;
+    }
+
+    onChange(
+      draftIndex === null
+        ? [...rows, draft]
+        : rows.map((row, i) => (i === draftIndex ? draft : row)),
+    );
+    closeModal();
+  };
+
+  const removeAt = (index: number) => {
+    onChange(rows.filter((_, i) => i !== index));
+  };
+
+  const renderCell = (
+    column: DetailModalConfig["columns"][number],
+    row: Record<string, unknown>,
+  ): ReactNode => {
+    const raw = row[column.field];
+    if (column.format) return column.format(raw, row);
+    if (raw === null || raw === undefined || raw === "") return labels.emptyValue;
+    return String(raw);
+  };
+
+  const columnCount = config.columns.length + 1 + (showActions ? 1 : 0);
+
+  return (
+    <div style={{ display: "grid", gap: "0.5rem" }}>
+      {/* Kepala panel: label kiri, tombol Tambah kanan — bentuk yang dipakai
+          contoh UI untuk Ahli Waris / Relasi / Beneficial Owner. */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: "1rem",
+        }}
+      >
+        <div className={UI7_FORM_VISUAL_CLASSNAMES.label}>
+          <span>{label}</span>
+          {required ? (
+            <span className={UI7_FORM_VISUAL_CLASSNAMES.labelRequired}> *</span>
+          ) : null}
+        </div>
+        {!readOnly ? (
+          <Button
+            size="sm"
+            renderIcon={Add}
+            onClick={openAdd}
+            disabled={disabled || atMax}
+          >
+            {config.addLabel ?? labels.detailAdd}
+          </Button>
+        ) : null}
+      </div>
+
+      <TableContainer>
+        <Table size="sm" useZebraStyles={false}>
+          <TableHead>
+            <TableRow>
+              <TableHeader style={{ width: "3rem" }}>{labels.detailNo}</TableHeader>
+              {config.columns.map((column) => (
+                <TableHeader
+                  key={column.field}
+                  style={column.width ? { width: `${column.width}px` } : undefined}
+                >
+                  {column.header}
+                </TableHeader>
+              ))}
+              {showActions ? (
+                <TableHeader style={{ width: "5.5rem" }}>
+                  {labels.detailActions}
+                </TableHeader>
+              ) : null}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columnCount}
+                  style={{
+                    textAlign: "center",
+                    fontStyle: "italic",
+                    color: "var(--cds-text-secondary, #525252)",
+                  }}
+                >
+                  {config.emptyText ?? labels.detailEmpty}
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((row, index) => (
+                <TableRow key={config.rowKey?.(row, index) ?? String(index)}>
+                  <TableCell>{index + 1}</TableCell>
+                  {config.columns.map((column) => (
+                    <TableCell
+                      key={column.field}
+                      style={
+                        column.align === "end" ? { textAlign: "right" } : undefined
+                      }
+                    >
+                      {renderCell(column, row)}
+                    </TableCell>
+                  ))}
+                  {showActions ? (
+                    <TableCell>
+                      <div style={{ display: "flex", gap: "0.25rem" }}>
+                        {allowEdit ? (
+                          <Button
+                            kind="ghost"
+                            size="sm"
+                            hasIconOnly
+                            renderIcon={Edit}
+                            iconDescription={labels.detailEdit}
+                            aria-label={`${labels.detailEdit} ${index + 1}`}
+                            disabled={disabled}
+                            onClick={() => openEdit(index)}
+                          />
+                        ) : null}
+                        {allowDelete ? (
+                          <Button
+                            kind="ghost"
+                            size="sm"
+                            hasIconOnly
+                            renderIcon={TrashCan}
+                            iconDescription={labels.detailDelete}
+                            aria-label={`${labels.detailDelete} ${index + 1}`}
+                            disabled={disabled}
+                            onClick={() => removeAt(index)}
+                          />
+                        ) : null}
+                      </div>
+                    </TableCell>
+                  ) : null}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      {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}
+
+      {/* Modal dipasang HANYA saat terbuka supaya setiap kali dibuka formnya
+          benar-benar baru — tidak ada sisa nilai dari baris yang dibuka
+          sebelumnya. */}
+      {isOpen ? (
+        <ComposedModal
+          open
+          onClose={closeModal}
+          size={config.modalSize ?? "lg"}
+          aria-label={String(
+            draftIndex === null
+              ? config.addModalTitle ?? labels.detailAddTitle
+              : config.editModalTitle ?? labels.detailEditTitle,
+          )}
+        >
+          <ModalHeader
+            title={
+              draftIndex === null
+                ? config.addModalTitle ?? labels.detailAddTitle
+                : config.editModalTitle ?? labels.detailEditTitle
+            }
+          />
+          <ModalBody hasScrollingContent>
+            {renderForm({
+              value: draft,
+              sections: config.sections,
+              // Baris selalu disunting dalam mode tulis. Mode `view` induk tidak
+              // pernah sampai ke sini — tombol Ubah sudah hilang saat readOnly.
+              mode: draftIndex === null ? "create" : "edit",
+              errors,
+              disabled,
+              onChange: (patch) =>
+                setDraft((prev) => (prev === null ? prev : { ...prev, ...patch })),
+            })}
+          </ModalBody>
+          <ModalFooter>
+            <Button kind="secondary" onClick={closeModal} disabled={disabled}>
+              {labels.cancel}
+            </Button>
+            <Button
+              kind="primary"
+              onClick={commit}
+              disabled={disabled}
+              data-testid={`detail-modal-save-${fieldKey}`}
+            >
+              {labels.submitCreate}
+            </Button>
+          </ModalFooter>
+        </ComposedModal>
+      ) : null}
+    </div>
+  );
+}

package/src/form-renderer.tsx

@@ -34,6 +34,7 @@ import type { Ui7FormDensity, Ui7FormWidth } from "./style-contract";
 import { useBosSharedI18n } from "./i18n";
 import type { FormField, FormMode, FormSection } from "./form-types";
 import { toLocalISODate } from "./form-renderer-utils";
+import { DetailModalField } from "./detail-modal-field";
 
 export type SchemaFormRendererProps<TData extends Record<string, unknown>> = {
   mode: FormMode;
@@ -663,6 +664,88 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                   ];
                 }
 
+                // ── Detail-modal (tabel ringkas + modal form per baris) ─────
+                // Sama seperti detail-rows: dirender SEBELUM cabang readonly
+                // supaya view / edit / create memakai satu komponen yang sama —
+                // yang readonly hanya kehilangan tombol Tambah dan kolom Aksi.
+                // Default span 12 karena tabel tidak pernah pas di setengah
+                // kolom.
+                if (field.type === "detail-modal") {
+                  const detailSpan = clampSpan(field.span, 12);
+                  const detailWrapperStyle = {
+                    gridColumn: field.breakBefore
+                      ? `1 / span ${detailSpan}`
+                      : `span ${detailSpan} / span ${detailSpan}`,
+                    minWidth: 0,
+                  } as const;
+
+                  // Config yang hilang TIDAK boleh membuat field lenyap diam-diam.
+                  // `detail-rows` mengembalikan [] di sini, dan akibatnya field
+                  // yang salah tulis hilang dari layar tanpa satu pun galat —
+                  // persis kelas kegagalan yang paling mahal di modul ini.
+                  const detail = field.detailModal;
+                  if (!detail) {
+                    return [
+                      <div
+                        key={key}
+                        className={UI7_FORM_VISUAL_CLASSNAMES.column}
+                        style={detailWrapperStyle}
+                      >
+                        <div role="alert" style={{ color: "var(--cds-text-error, #da1e28)" }}>
+                          {`Field "${key}" bertipe detail-modal tetapi tidak punya detailModal.`}
+                        </div>
+                      </div>,
+                    ];
+                  }
+
+                  const rows = Array.isArray(rawValue)
+                    ? (rawValue as Record<string, unknown>[])
+                    : [];
+
+                  return [
+                    <div
+                      key={key}
+                      className={UI7_FORM_VISUAL_CLASSNAMES.column}
+                      style={detailWrapperStyle}
+                    >
+                      <DetailModalField
+                        fieldKey={key}
+                        label={field.label}
+                        required={effectiveRequired}
+                        helperText={field.helperText}
+                        config={detail}
+                        rows={rows}
+                        mode={mode}
+                        readOnly={effectiveReadonly}
+                        disabled={disabled}
+                        labels={labels}
+                        invalidText={invalidText}
+                        onChange={(newRows) =>
+                          setValue(
+                            field.key,
+                            (newRows as unknown) as TData[keyof TData],
+                          )
+                        }
+                        renderForm={(p) => (
+                          <SchemaFormRenderer
+                            mode={p.mode}
+                            value={p.value}
+                            sections={p.sections}
+                            errors={p.errors}
+                            disabled={p.disabled}
+                            onChange={p.onChange}
+                            density={density}
+                            // Form baris mengisi lebar modal. Tanpa ini ia
+                            // mewarisi batas two-thirds milik form induk dan
+                            // menyisakan sepertiga modal kosong.
+                            width="full"
+                          />
+                        )}
+                      />
+                    </div>,
+                  ];
+                }
+
                 // ── View / readonly ─────────────────────────────────────────
                 if (effectiveReadonly) {
                   return [

package/src/form-types.ts

@@ -33,7 +33,7 @@ export type FieldValidation<TData extends Record<string, unknown>> = {
 export type FormFieldType =
   | "text" | "textarea" | "number" | "date" | "datetime"
   | "select" | "lookup" | "checkbox" | "toggle"
-  | "detail-rows";
+  | "detail-rows" | "detail-modal";
 
 /**
  * Select option. `value` may be a number for numeric-coded columns (e.g.
@@ -114,6 +114,98 @@ export type DetailRowsConfig = {
   lockExistingRows?: boolean;
 };
 
+/**
+ * Satu kolom pada tabel RINGKAS `detail-modal`.
+ *
+ * Sengaja BUKAN `EditableColumnDef`: kolom di sini hanya menampilkan, tidak
+ * pernah menyunting — penyuntingan seluruhnya terjadi di dalam modal. Memakai
+ * `EditableColumnDef` akan menuntut `columnType` untuk setiap kolom padahal
+ * tipe itu hanya menentukan editor sel yang tidak akan pernah dipakai.
+ */
+export type DetailModalColumn = {
+  /** Nama properti pada baris. */
+  field: string;
+  header: ReactNode;
+  /** Lebar kolom dalam piksel. Tanpa ini kolom ikut lebar isi. */
+  width?: number;
+  /** `end` untuk angka. Default `start`. */
+  align?: "start" | "end";
+  /**
+   * Ubah nilai mentah jadi tampilan. Tanpa ini nilai kosong tampil sebagai
+   * em-dash (`labels.emptyValue`) dan sisanya lewat `String(value)`.
+   *
+   * ⚠️ Kolom ringkas menampilkan nilai SIMPAN, bukan label. Untuk field
+   * `select`, `String(value)` menghasilkan kodenya ("M"), bukan "Laki-laki" —
+   * pakai `format` bila yang harus terbaca operator adalah labelnya.
+   */
+  format?: (value: unknown, row: Record<string, unknown>) => ReactNode;
+};
+
+/**
+ * Detail-modal config — tabel RINGKAS + tombol Tambah yang membuka modal
+ * berisi form penuh untuk SATU baris.
+ *
+ * Bedanya dengan `detail-rows`: `detail-rows` menyunting DI DALAM sel, jadi
+ * setiap field baris harus muat sebagai satu kolom. Begitu satu baris punya
+ * belasan field (Beneficial Owner: ~20 field + dua blok alamat), barisnya jadi
+ * selebar beberapa layar dan tidak ada tempat untuk alur per-baris seperti cek
+ * identitas. `detail-modal` memindahkan seluruh form baris ke modal, dan
+ * menyisakan hanya beberapa kolom penanda di tabel.
+ *
+ * Nilai field di `key` harus berupa array objek biasa; renderer membaca dan
+ * menulis array itu secara utuh lewat `onChange({ [key]: newRows })` — sama
+ * seperti `detail-rows`.
+ *
+ * Isi modal dirender oleh `SchemaFormRenderer` yang sama dengan form induknya,
+ * jadi SEMUA tipe field yang sudah ada (lookup, date, numeric, toggle, bahkan
+ * `FormSection.render`) langsung bisa dipakai di dalam baris tanpa tambahan
+ * apa pun di sini.
+ */
+export type DetailModalConfig = {
+  /**
+   * Form untuk SATU baris. Section-nya sama persis dengan section form biasa,
+   * dan `TData`-nya adalah barisnya — bukan form induk.
+   */
+  sections: FormSection<Record<string, unknown>>[];
+  /** Kolom yang tampil di tabel ringkas. Boleh sebagian kecil saja dari field baris. */
+  columns: DetailModalColumn[];
+  newRowFactory: () => Record<string, unknown>;
+  /**
+   * Aturan lintas-field untuk satu baris, dijalankan SETELAH validasi per-field
+   * milik `sections`. Kuncinya nama field; hasilnya menimpa error per-field.
+   *
+   * `index` adalah posisi baris — untuk baris baru, posisi tempat ia akan
+   * mendarat (`rows.length`).
+   */
+  validateRow?: (
+    row: Record<string, unknown>,
+    index: number,
+  ) => Record<string, string>;
+  /** Batas jumlah baris. Tombol Tambah nonaktif setelah tercapai. */
+  maxRows?: number;
+  /** Teks tombol tambah, mis. "Tambah Ahli Waris". Default: "Tambah". */
+  addLabel?: ReactNode;
+  /** Judul modal saat menambah. Default: "Tambah Data". */
+  addModalTitle?: ReactNode;
+  /** Judul modal saat mengubah. Default: "Ubah Data". */
+  editModalTitle?: ReactNode;
+  /** Teks saat tabel kosong. Default: "Belum ada data." */
+  emptyText?: ReactNode;
+  /** Lebar modal Carbon. Default `lg` — form baris biasanya padat. */
+  modalSize?: "xs" | "sm" | "md" | "lg";
+  /** Izinkan membuka baris yang sudah ada untuk diubah. Default `true`. */
+  allowEdit?: boolean;
+  /** Izinkan menghapus baris. Default `true`. */
+  allowDelete?: boolean;
+  /**
+   * Kunci React per baris. Default memakai indeks.
+   *
+   * Berguna bila baris punya identitas sendiri (mis. `person_id`) supaya state
+   * modal tidak nyangkut ke baris lain setelah penghapusan di tengah.
+   */
+  rowKey?: (row: Record<string, unknown>, index: number) => string;
+};
+
 export type FormField<TData extends Record<string, unknown>> = {
   key: keyof TData;
   label: ReactNode;
@@ -146,6 +238,7 @@ export type FormField<TData extends Record<string, unknown>> = {
   numeric?: FormFieldNumericConfig<TData>;
   toggle?: FormFieldToggleConfig;
   detailRows?: DetailRowsConfig;
+  detailModal?: DetailModalConfig;
   format?: (value: TData[keyof TData], data: TData) => ReactNode;
   validation?: FieldValidation<TData>;
 };

package/src/i18n.tsx

@@ -44,6 +44,16 @@ export type BosSharedLabels = {
   deleteTitle: string;
   deleteDescription: string;
   deleteConfirm: string;
+
+  /** Tipe field `detail-modal` — tabel ringkas + modal form per baris. */
+  detailAdd: string;
+  detailEdit: string;
+  detailDelete: string;
+  detailEmpty: string;
+  detailNo: string;
+  detailActions: string;
+  detailAddTitle: string;
+  detailEditTitle: string;
 };
 
 // ── Thin adapter — reads from @isi-ui7/i18n (wired in createShellProvider) ───
@@ -93,5 +103,14 @@ export function useBosSharedI18n(): BosSharedLabels {
     deleteTitle: t("bos7.deleteTitle", "Konfirmasi Hapus"),
     deleteDescription: t("bos7.deleteDescription", "Data berikut akan dihapus permanen."),
     deleteConfirm: t("bos7.deleteConfirm", "Hapus"),
+
+    detailAdd: t("bos7.detailAdd", "Tambah"),
+    detailEdit: t("bos7.detailEdit", "Ubah"),
+    detailDelete: t("bos7.detailDelete", "Hapus"),
+    detailEmpty: t("bos7.detailEmpty", "Belum ada data."),
+    detailNo: t("bos7.detailNo", "No"),
+    detailActions: t("bos7.detailActions", "Aksi"),
+    detailAddTitle: t("bos7.detailAddTitle", "Tambah Data"),
+    detailEditTitle: t("bos7.detailEditTitle", "Ubah Data"),
   };
 }

package/src/wizard-stepper.tsx

@@ -100,7 +100,7 @@ export function WizardStepper({
     <nav
       aria-label={title}
       style={{
-        width: "15rem",
+        width: "13.5rem",
         flexShrink: 0,
         display: "flex",
         flexDirection: "column",