@isi-ui7/bos7-shared 0.3.9 → 0.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -9,11 +9,11 @@
     "directory": "packages/bos7-shared"
   },
   "type": "module",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
+    ".": "./dist/index.js",
     "./auth7": "./src/auth7/index.ts",
     "./page-layout": "./src/page-layout.tsx",
     "./modal-layout": "./src/modal-layout.tsx",
@@ -50,85 +50,28 @@
     "./bff/health": "./src/bff/health.ts",
     "./observability/otel-init": "./src/observability/otel-init.ts",
     "./form-types": "./src/form-types.ts",
-    "./form-value-schema": "./src/form-value-schema.ts",
     "./form-numeric": "./src/form-numeric.ts",
     "./form-renderer": "./src/form-renderer.tsx",
     "./form-renderer-utils": "./src/form-renderer-utils.ts",
     "./form-rules": "./src/form-rules.ts",
     "./i18n": "./src/i18n.tsx",
     "./workflow/use-crud-form": "./src/workflow/use-crud-form.ts",
-    "./styles": "./src/form-contract.css"
+    "./styles": "./src/form-contract.css",
+    "./form-value-schema": "./src/form-value-schema.ts"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
-    "access": "public",
-    "main": "dist/index.js",
-    "module": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "exports": {
-      ".": "./dist/index.js",
-      "./auth7": "./src/auth7/index.ts",
-      "./page-layout": "./src/page-layout.tsx",
-      "./modal-layout": "./src/modal-layout.tsx",
-      "./form-layout": "./src/form-layout.tsx",
-      "./backend": "./src/backend.ts",
-      "./export": "./src/export.ts",
-      "./types/notification": "./src/types/notification.ts",
-      "./nats/client": "./src/nats/client.ts",
-      "./event-bus": "./src/event-bus/index.ts",
-      "./event-bus/useEventBus": "./src/event-bus/useEventBus.ts",
-      "./api": "./src/api.ts",
-      "./types/core": "./src/types/core.ts",
-      "./style-contract": "./src/style-contract.ts",
-      "./crud-components": "./src/crud-components.tsx",
-      "./workflow/backend": "./src/workflow/backend.ts",
-      "./workflow/notif7": "./src/workflow/notif7.ts",
-      "./workflow/api-client": "./src/workflow/api-client.ts",
-      "./workflow/starter": "./src/workflow/starter.ts",
-      "./workflow/use-workflow-tracker": "./src/workflow/use-workflow-tracker.ts",
-      "./workflow/crud-client": "./src/workflow/crud-client.ts",
-      "./data-table/cursor-adapter": "./src/data-table/cursor-adapter.ts",
-      "./data-table/proxy": "./src/data-table/proxy.ts",
-      "./notification/routing": "./src/notification/routing.ts",
-      "./shell/interaction": "./src/shell/interaction.ts",
-      "./shell/branch": "./src/shell/branch.ts",
-      "./notif7": "./src/notif7.ts",
-      "./shell/provider": "./src/shell/provider.tsx",
-      "./shell/app-shell-layout": "./src/shell/app-shell-layout.tsx",
-      "./notifications-bff": "./src/notifications-bff.ts",
-      "./bff/auth-me": "./src/bff/auth-me.ts",
-      "./bff/auth-refresh": "./src/bff/auth-refresh.ts",
-      "./bff/auth-logout": "./src/bff/auth-logout.ts",
-      "./bff/auth-preferences": "./src/bff/auth-preferences.ts",
-      "./bff/health": "./src/bff/health.ts",
-      "./observability/otel-init": "./src/observability/otel-init.ts",
-      "./form-types": "./src/form-types.ts",
-      "./form-numeric": "./src/form-numeric.ts",
-      "./form-renderer": "./src/form-renderer.tsx",
-      "./form-renderer-utils": "./src/form-renderer-utils.ts",
-      "./form-rules": "./src/form-rules.ts",
-      "./i18n": "./src/i18n.tsx",
-      "./workflow/use-crud-form": "./src/workflow/use-crud-form.ts",
-      "./styles": "./src/form-contract.css",
-      "./form-value-schema": "./src/form-value-schema.ts"
-    }
+    "access": "public"
   },
   "files": [
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "vite build",
-    "prepublishOnly": "pnpm run build",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "test": "vitest run --passWithNoTests",
-    "typecheck": "tsc --noEmit"
-  },
   "peerDependencies": {
     "@carbon/icons-react": "^11.71.0",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/corporate-themes": ">=0.2.6",
-    "@isi-ui7/data-table": ">=0.2.4",
+    "@isi-ui7/corporate-themes": ">=0.2.7",
+    "@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",
@@ -144,14 +87,6 @@
     "@carbon/react": "^1.97.0",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.39.0",
-    "@isi-ui7/corporate-themes": "workspace:*",
-    "@isi-ui7/data-table": "workspace:*",
-    "@isi-ui7/editable-table": "workspace:*",
-    "@isi-ui7/i18n": "workspace:*",
-    "@isi-ui7/lookup-input": "workspace:*",
-    "@isi-ui7/modal-manager": "workspace:*",
-    "@isi-ui7/realtime": "workspace:*",
-    "@isi-ui7/ui-shell": "workspace:*",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.0",
@@ -170,14 +105,19 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
-    "vitest": "^1.0.0"
+    "vitest": "^1.0.0",
+    "@isi-ui7/corporate-themes": "0.2.7",
+    "@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/ui-shell": "0.2.8",
+    "@isi-ui7/realtime": "0.2.3"
   },
   "dependencies": {
     "@carbon/icons-react": "^11.71.0",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/data-table": "workspace:*",
-    "@isi-ui7/editable-table": "workspace:*",
-    "@isi-ui7/lookup-input": "workspace:*",
     "@opentelemetry/auto-instrumentations-node": "^0.57.0",
     "@opentelemetry/exporter-trace-otlp-http": "^0.57.0",
     "@opentelemetry/sdk-node": "^0.57.0",
@@ -185,6 +125,15 @@
     "exceljs": "^4.4.0",
     "jose": "^5.9.6",
     "jspdf": "^4.2.1",
-    "jspdf-autotable": "^5.0.7"
+    "jspdf-autotable": "^5.0.7",
+    "@isi-ui7/data-table": "0.2.5",
+    "@isi-ui7/editable-table": "0.2.3",
+    "@isi-ui7/lookup-input": "0.2.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/crud-components.tsx

@@ -10,8 +10,6 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
-  ProgressIndicator,
-  ProgressStep,
   Select,
   SelectItem,
   TextArea,
@@ -489,6 +487,34 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
 
   const layout = schema.layout;
 
+  /**
+   * Wizard adalah alat bantu PENGISIAN, bukan cara menyusun halaman.
+   *
+   * Ia ada untuk memandu petugas melalui formulir panjang yang belum pernah
+   * diisi, dan — pada registrasi nasabah — untuk MENAHAN langkah berikutnya
+   * sampai gerbang `canLeavePage` terpenuhi. Kedua alasan itu hanya berlaku
+   * saat data DIBUAT.
+   *
+   * Pada `edit` dan `view` datanya sudah ada dan sudah lolos gerbangnya.
+   * Memaksa operator melangkah lima kali untuk membaca satu field di langkah
+   * 5 bukan panduan, ia penghalang — dan pada `view` bahkan tidak bisa
+   * dilewati: footer mode-view sengaja nol tombol Lanjut, jadi satu-satunya
+   * jalan maju adalah menebak bahwa stepper-nya bisa diklik.
+   *
+   * Karena itu di luar `create` wizard dirender DATAR: seluruh halaman
+   * berurutan dalam satu aliran, tanpa stepper dan tanpa Lanjut/Kembali.
+   * Yang HILANG hanya navigasinya; isinya tidak ada yang dibuang.
+   *
+   * Aman terhadap validasi: `handleSave` memakai `validateAll()`, yang sudah
+   * mengumpulkan field dari SELURUH halaman tanpa peduli halaman aktif —
+   * jadi menyimpan dari bentuk datar memeriksa hal yang sama persis.
+   *
+   * Keputusan PM 2026-08-19. Sengaja dipasang di sini, BUKAN di skema tiap
+   * app: ini keputusan tentang cara me-render sebuah layout, dan menaruhnya
+   * di skema berarti tiap app harus mengingat untuk mengulanginya.
+   */
+  const wizardNav = layout.type === "wizard" && mode === "create";
+
   const renderBody = () => {
     if (layout.type === "single-page") {
       return (
@@ -570,6 +596,76 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
       );
     }
 
+    // Wizard di luar `create` — datar, tanpa stepper. Lihat `wizardNav`.
+    //
+    // Syaratnya ditulis LENGKAP (`layout.type === "wizard" && !wizardNav`),
+    // bukan `!wizardNav` saja. Keduanya setara hari ini, tapi bentuk pendek
+    // benar hanya karena `single-page` dan `tabs` sudah return di atas — ia
+    // cabang *sisa*, bukan cabang *wizard*. Varian layout ke-5 yang lupa
+    // ditaruh di atas sini akan ikut dirender datar tanpa galat, tanpa lint,
+    // tanpa uji yang menahan. Dengan bentuk lengkap, kelalaian yang sama
+    // menjadi galat `tsc` di `layout.pages` beberapa baris di bawah.
+    if (layout.type === "wizard" && !wizardNav) {
+      return (
+        <PageBody>
+          {errBanner}
+          {layout.pages.map((pg, i) => (
+            <div key={i} style={{ marginBottom: "2.5rem" }}>
+              {/* Label halaman tetap dirender — sebagai JUDUL KELOMPOK, bukan
+                  navigasi. Membuang steppernya tidak boleh ikut membuang satu-
+                  satunya tempat `pg.label`/`pg.sublabel` pernah tampil: pada
+                  form 5 langkah, hasilnya 13 panel beruntun tanpa satu pun
+                  pemisah tingkat-halaman. Yang dilarang PM adalah navigasinya,
+                  bukan judulnya. */}
+              <div
+                style={{
+                  marginBottom: "1rem",
+                  paddingBottom: "0.5rem",
+                  borderBottom: "1px solid var(--cds-border-subtle-01, #e0e0e0)",
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: "1rem",
+                    fontWeight: 600,
+                    color: "var(--cds-text-primary, #161616)",
+                  }}
+                >
+                  {pg.label}
+                </div>
+                {pg.sublabel ? (
+                  <div
+                    style={{
+                      fontSize: "0.75rem",
+                      color: "var(--cds-text-secondary, #525252)",
+                      marginTop: "0.125rem",
+                    }}
+                  >
+                    {pg.sublabel}
+                  </div>
+                ) : null}
+              </div>
+              <SchemaFormRenderer
+                mode={mode}
+                value={form}
+                sections={pg.sections}
+                errors={fieldErrors}
+                disabled={saving}
+                onChange={setForm}
+                density={density}
+                // `width` apa adanya, BUKAN `width ?? "full"` seperti cabang
+                // wizard. `full` di sana berarti "penuhi kolom KIRI", jalan
+                // keluar untuk ruang yang dipersempit stepper. Di sini nol
+                // stepper, jadi alasannya hilang dan default kontrak
+                // ("two-thirds") kembali berlaku.
+                width={width}
+              />
+            </div>
+          ))}
+        </PageBody>
+      );
+    }
+
     const currentPage = layout.pages[page];
     return (
       <PageBody>
@@ -640,7 +736,9 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
       );
     }
 
-    if (layout.type === "wizard") {
+    // Lanjut/Kembali hanya saat wizard benar-benar memandu — lihat `wizardNav`.
+    // Di `edit`, footer jatuh ke bentuk baku: satu tombol Simpan.
+    if (wizardNav) {
       return (
         <PageFooter spread>
           <Button kind="secondary" size="sm" onClick={onBack} disabled={saving}>
@@ -657,7 +755,13 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
                 kind="primary"
                 size="sm"
                 onClick={handleSave}
-                disabled={saving || (mode === "edit" && !isDirty)}
+                // Nol penjaga `isDirty` di sini: blok ini kini hanya terjangkau
+                // saat `create` (lihat `wizardNav`), dan form baru yang belum
+                // disentuh memang belum "kotor" — memakai penjaga edit di sini
+                // akan mematikan tombol Simpan pada satu-satunya mode yang
+                // masih memakainya. tsc menandainya sebagai perbandingan yang
+                // tak mungkin benar; ia benar.
+                disabled={saving}
               >
                 {saving ? labels.saving : submitLabel}
               </Button>

package/src/vitest.setup.ts

@@ -0,0 +1,22 @@
+// Tambalan lingkungan jsdom — BUKAN tambalan produk.
+//
+// jsdom nol mengimplementasikan `Element.prototype.scrollIntoView`. Carbon
+// `ComposedModal` memanggilnya saat memindahkan fokus, jadi setiap uji yang
+// membuka modal melempar `TypeError` di luar rantai promise uji. Vitest
+// menghitungnya sebagai *unhandled error*, bukan sebagai uji gagal — hasilnya
+// `Tests 108 passed` berdampingan dengan `Errors 11` dan **exit code 1**.
+//
+// 🔑 Itu bentuk kegagalan yang paling mudah dilaporkan keliru: ringkasan yang
+// dibaca manusia berbunyi hijau sepenuhnya, sementara gerbang CI yang membaca
+// exit code menolak paket ini. Sesi yang menambahkan tambalan ini sempat
+// melaporkan "105/105 lulus" atas suite yang MERAH, dan baru tahu setelah
+// verifikasi adversarial memeriksa exit code-nya secara terpisah.
+//
+// Fungsinya no-op: yang diuji adalah apa yang terender, bukan apakah browser
+// menggulir. Menambal di lapisan lingkungan menjaga kode produk tetap bersih
+// dari pengetahuan tentang jsdom.
+if (typeof Element !== "undefined" && !Element.prototype.scrollIntoView) {
+  Element.prototype.scrollIntoView = function scrollIntoView() {
+    /* no-op: jsdom nol punya viewport untuk digulir */
+  };
+}

package/src/wizard-mode-nav.test.tsx

@@ -0,0 +1,136 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+
+// Dimock supaya mode `edit`/`view` tidak menggantung di InlineLoading: tanpa
+// `loadApiPath` yang selesai, `loading` tidak pernah kembali false dan yang
+// terender hanya spinner — uji akan "lulus" karena stepper-nya memang belum
+// sempat dirender, bukan karena perbaikannya bekerja. Itu lulus palsu.
+vi.mock("./workflow/crud-client", () => ({
+  fetchDetailData: vi.fn(async () => ({ f1: "satu", f2: "dua", f3: "tiga" })),
+  submitWorkflowForm: vi.fn(async () => "wf-1"),
+}));
+
+import { CrudSchemaPage } from "./crud-components";
+import type { CrudForm } from "./form-types";
+
+type D = { f1: string; f2: string; f3: string };
+
+const schema: CrudForm<D> = {
+  title: { create: "Baru", edit: "Ubah", view: "Lihat" },
+  emptyData: { f1: "", f2: "", f3: "" },
+  createApiPath: "/api/x/create",
+  updateApiPath: () => "/api/x/1",
+  loadApiPath: () => "/api/x/1",
+  layout: {
+    type: "wizard",
+    pages: [
+      { label: "Langkah Satu", sublabel: "Sub Satu", sections: [{ title: "S1", fields: [{ key: "f1", label: "Field Satu", type: "text", span: 4 }] }] },
+      { label: "Langkah Dua", sublabel: "Sub Dua", sections: [{ title: "S2", fields: [{ key: "f2", label: "Field Dua", type: "text", span: 4 }] }] },
+      { label: "Langkah Tiga", sublabel: "Sub Tiga", sections: [{ title: "S3", fields: [{ key: "f3", label: "Field Tiga", type: "text", span: 4 }] }] },
+    ],
+  },
+};
+
+// Stepper dirender sebagai <nav aria-label=…> — satu-satunya landmark navigasi
+// di halaman ini, jadi role "navigation" cukup untuk membedakannya.
+const stepper = () => screen.queryByRole("navigation");
+
+// Pada `view` field dirender sebagai nilai baca-saja, BUKAN input berlabel —
+// jadi getByLabelText hanya bekerja di create/edit. Query teks label bekerja di
+// ketiga mode, sehingga uji ini membandingkan hal yang sama di semua mode.
+const fieldTampil = (nama: string) => screen.queryByText(nama) !== null;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("navigasi wizard hanya pada mode create", () => {
+  it("create — stepper TAMPIL dan hanya halaman aktif yang dirender", async () => {
+    render(<CrudSchemaPage schema={schema} mode="create" />);
+
+    expect(stepper(), "stepper harus ada saat membuat data baru").not.toBeNull();
+    expect(screen.getByText("Langkah Tiga")).toBeTruthy(); // ada di stepper…
+    expect(fieldTampil("Field Satu")).toBe(true);
+    // …tapi field-nya belum, karena halaman 3 belum dibuka.
+    expect(fieldTampil("Field Tiga")).toBe(false);
+  });
+
+  it("view — stepper TIDAK ada, dan SELURUH halaman terbaca sekaligus", async () => {
+    render(<CrudSchemaPage schema={schema} mode="view" />);
+    await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+
+    expect(stepper(), "view tidak boleh punya navigasi langkah").toBeNull();
+    // Inti perbaikannya: nol navigasi TIDAK boleh berarti isi yang hilang.
+    // Sebelum ini, `view` merender satu halaman saja sementara footernya nol
+    // tombol Lanjut — jadi langkah 2-5 tidak bisa dibaca sama sekali.
+    for (const label of ["Field Satu", "Field Dua", "Field Tiga"]) {
+      expect(fieldTampil(label), `${label} harus terbaca di view`).toBe(true);
+    }
+  });
+
+  // Ditambahkan setelah verifikasi adversarial membantah klaim "nol isi yang
+  // hilang": versi pertama perbaikan ini me-`flatMap` seluruh section dan
+  // membuang `pg.label`/`pg.sublabel` — 10 string konkret lenyap dari layar
+  // perorangan, dan uji versi pertama nol memeriksanya karena ia hanya
+  // menanyakan field dan stepper.
+  it.each(["view", "edit"] as const)(
+    "%s — label & sublabel halaman TETAP terbaca sebagai judul kelompok",
+    async (mode) => {
+      render(<CrudSchemaPage schema={schema} mode={mode} />);
+      await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+
+      expect(stepper(), "judul kelompok bukan navigasi").toBeNull();
+      for (const l of ["Langkah Satu", "Langkah Dua", "Langkah Tiga"]) {
+        expect(fieldTampil(l), `${l} hilang dari ${mode}`).toBe(true);
+      }
+      for (const s of ["Sub Satu", "Sub Dua", "Sub Tiga"]) {
+        expect(fieldTampil(s), `sublabel ${s} hilang dari ${mode}`).toBe(true);
+      }
+    },
+  );
+
+  it("edit — stepper TIDAK ada, seluruh halaman terbaca, nol tombol Lanjut", async () => {
+    render(<CrudSchemaPage schema={schema} mode="edit" />);
+    await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+
+    expect(stepper(), "edit tidak boleh punya navigasi langkah").toBeNull();
+    expect(fieldTampil("Field Tiga")).toBe(true);
+
+    const tombol = screen.getAllByRole("button").map((b) => b.textContent ?? "");
+    expect(tombol.some((t) => /lanjut|next/i.test(t)), `masih ada tombol Lanjut: ${tombol.join("|")}`).toBe(false);
+    expect(tombol.some((t) => /kembali|prev/i.test(t)), `masih ada tombol Kembali: ${tombol.join("|")}`).toBe(false);
+  });
+
+  // Kontrol kedua, dan ini yang penting: `tabs` juga punya `pages`, jadi ia
+  // kandidat paling mungkin ikut terseret kalau urutan cabang render bergeser.
+  // Tanpa kontrol ini, memindahkan cabang datar ke atas cabang `tabs` akan
+  // meratakan 4 layar bos7-enterprise/bos7-financing tanpa satu pun galat.
+  it("kontrol negatif — layout tabs tetap bertab, tidak ikut diratakan", async () => {
+    const tabs: CrudForm<D> = {
+      ...schema,
+      layout: {
+        type: "tabs",
+        pages: [
+          { label: "Tab Satu", sections: [{ title: "T1", fields: [{ key: "f1", label: "Field Satu", type: "text", span: 4 }] }] },
+          { label: "Tab Dua", sections: [{ title: "T2", fields: [{ key: "f2", label: "Field Dua", type: "text", span: 4 }] }] },
+        ],
+      },
+    };
+    render(<CrudSchemaPage schema={tabs} mode="view" />);
+    await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+
+    // Tab masih tab: tombol role=tab ada, dan hanya tab aktif yang terlihat.
+    expect(screen.getAllByRole("tab").length, "tab hilang — cabang datar menelan layout tabs").toBe(2);
+    expect(stepper()).toBeNull();
+  });
+
+  it("kontrol negatif — layout single-page tidak ikut berubah", async () => {
+    const single: CrudForm<D> = {
+      ...schema,
+      layout: { type: "single-page", sections: [{ title: "S", fields: [{ key: "f1", label: "Field Satu", type: "text", span: 4 }] }] },
+    };
+    render(<CrudSchemaPage schema={single} mode="view" />);
+    await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+    expect(stepper()).toBeNull();
+  });
+});