@isi-ui7/bos7-shared 0.4.0 → 0.4.2

package/src/date-field-render.test.tsx

@@ -0,0 +1,83 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SchemaFormRenderer } from "./form-renderer";
+import type { FormSection } from "./form-types";
+
+type D = Record<string, unknown>;
+
+// Laporan DG-00 (agent7, 2026-08-31): field "date" di form-renderer.tsx punya
+// DUA cacat. Cacat B (TERBUKTI + DIPERBAIKI di sini): `value={asString(rawValue)}`
+// mengirim string ISO mentah ke DatePicker Carbon (flatpickr) yang
+// dikonfigurasi dateFormat="d-m-Y", jadi flatpickr mem-parse ULANG string ISO
+// itu SEOLAH ia format d-m-Y — tanggal TERSIMPAN tampil SALAH saat re-render.
+// Diperbaiki dgn `fromLocalISODate()` (Date, bukan string) di form-renderer.tsx.
+//
+// Cacat A (diklaim DG-00 dari fiber React browser sungguhan: tanggal yg
+// DIKETIK nol pernah masuk state) — TIDAK bisa direproduksi di tes terisolasi
+// ini, bahkan pada kode SEBELUM perbaikan (lihat ledger dg-05 2026-08-31):
+// `allowInput` Carbon versi ini SUDAH default `true` (DatePicker.js:377,
+// `allowInput ?? true`), dan `fireEvent.blur` mengonfirmasi commit-on-blur
+// bekerja di kedua kode lama & baru. Tes di bawah HANYA membuktikan alur
+// commit bekerja di form-renderer terisolasi — ia BUKAN bukti Cacat A sudah
+// tuntas di halaman produksi (mungkin bergantung interaksi re-render field
+// lain yg tak tercakup harness minimal ini). Perlu re-verifikasi Tester/
+// DG-00 langsung di browser thd kode yg sudah diperbaiki.
+
+const dateSection: FormSection<D> = {
+  title: "Tanggal",
+  fields: [{ key: "tanggal_lahir", label: "Tanggal Lahir", type: "date", span: 4 }],
+};
+
+describe("field date — re-render dari value tersimpan (Cacat B)", () => {
+  it("ISO tersimpan tampil sbg tanggal yg SAMA dlm format d-m-Y, bukan digeser", () => {
+    render(
+      <SchemaFormRenderer<D>
+        mode="edit"
+        value={{ tanggal_lahir: "1990-06-15" }}
+        sections={[dateSection]}
+        onChange={() => {}}
+      />,
+    );
+    const input = screen.getByLabelText("Tanggal Lahir") as HTMLInputElement;
+    // Harus 15-06-1990 (hari yg SAMA, cuma beda format tampilan) — BUKAN
+    // tanggal lain hasil salah-parse "1990-06-15" seolah format d-m-Y.
+    expect(input.value).toBe("15-06-1990");
+  });
+
+  it("kontrol: tanggal akhir-tahun tetap utuh (bukan kebetulan lolos di satu kasus)", () => {
+    render(
+      <SchemaFormRenderer<D>
+        mode="edit"
+        value={{ tanggal_lahir: "2026-12-31" }}
+        sections={[dateSection]}
+        onChange={() => {}}
+      />,
+    );
+    const input = screen.getByLabelText("Tanggal Lahir") as HTMLInputElement;
+    expect(input.value).toBe("31-12-2026");
+  });
+});
+
+describe("field date — ketik tangan lalu commit (Cacat A)", () => {
+  it("tanggal yg DIKETIK (bukan dipilih dari kalender) masuk ke onChange", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{}}
+        sections={[dateSection]}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByLabelText("Tanggal Lahir") as HTMLInputElement;
+    await user.type(input, "15-06-1990");
+    fireEvent.blur(input); // commit alami operator (pindah fokus keluar kotak)
+
+    const patches = onChange.mock.calls.map((c) => c[0]);
+    const got = patches.find((p) => p?.tanggal_lahir);
+    expect(got?.tanggal_lahir).toBe("1990-06-15");
+  });
+});

package/src/form-renderer-utils.ts

@@ -185,3 +185,37 @@ export function toLocalISODate(date: Date | undefined | null): string {
   const d = String(date.getDate()).padStart(2, "0");
   return `${y}-${m}-${d}`;
 }
+
+/**
+ * Kebalikan `toLocalISODate` — mem-parse "YYYY-MM-DD" jadi `Date` lokal
+ * (bukan `new Date(iso)` yang mem-parse sbg UTC dan bisa menggeser sehari,
+ * kelas bug yang sama dgn di atas, arah terbalik).
+ *
+ * Dipakai supaya prop `value` DatePicker Carbon menerima `Date`, BUKAN
+ * string ISO mentah — string ISO yang diberikan ke DatePicker dgn
+ * `dateFormat="d-m-Y"` di-parse ULANG flatpickr SEOLAH ia format d-m-Y,
+ * menghasilkan tanggal lain sama sekali (laporan DG-00, agent7 2026-08-31).
+ */
+export function fromLocalISODate(iso: string | undefined | null): Date | undefined {
+  if (!iso) return undefined;
+  // Regex TIDAK ber-akhiran `$` dengan sengaja: field "date" (bukan
+  // "datetime") menerima "YYYY-MM-DD" polos MAUPUN RFC3339 penuh
+  // ("2029-12-31T00:00:00Z" atau ber-offset) — keduanya nyata dikirim
+  // backend, tergantung tipe kolom Go di sisi server (time.Time vs string
+  // yang sudah diformat). Sebelum perbaikan ini, RFC3339 gagal match diam-
+  // diam dan DatePicker menerima `undefined` — field tampak KOSONG tanpa
+  // satu pun galat (laporan PM, ditemukan lewat verifikasi browser
+  // sungguhan atas core7-service-cif FT-573/574, 2026-08-31).
+  //
+  // Ambil HANYA digit tanggalnya, JANGAN `new Date(iso)` — itu persis bug
+  // asli yang diperbaiki lewat fungsi ini (lihat komentar di atas):
+  // `new Date("2029-12-31T00:00:00Z")` mem-parse sbg UTC, dan di zona
+  // timur UTC (WIB) itu bisa MUNDUR sehari. Regex + konstruktor
+  // komponen-lokal di bawah membaca digitnya apa adanya, sama seperti
+  // jalur "YYYY-MM-DD" polos.
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(iso);
+  if (!m) return undefined;
+  const [, y, mo, d] = m;
+  const date = new Date(Number(y), Number(mo) - 1, Number(d));
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}

package/src/form-renderer.tsx

@@ -33,7 +33,7 @@ import {
 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 { toLocalISODate, fromLocalISODate } from "./form-renderer-utils";
 import { DetailModalField } from "./detail-modal-field";
 
 export type SchemaFormRendererProps<TData extends Record<string, unknown>> = {
@@ -847,7 +847,12 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         // DISIMPAN tetap ISO. Dua hal berbeda: yang satu untuk
                         // dibaca manusia, yang satu kontrak dgn backend.
                         dateFormat="d-m-Y"
-                        value={asString(rawValue)}
+                        // `value` HARUS `Date`, bukan string ISO — string ISO
+                        // di sini di-parse ULANG flatpickr seolah format
+                        // tampilan (d-m-Y), menghasilkan tanggal lain sama
+                        // sekali pada setiap re-render (laporan DG-00,
+                        // agent7 2026-08-31, kena SEMUA field tanggal).
+                        value={fromLocalISODate(asString(rawValue))}
                         onChange={([date]) =>
                           setValue(field.key, toLocalISODate(date) as TData[keyof TData])
                         }