@isi-ui7/bos7-shared 0.2.0

package/src/crud-components.tsx

@@ -0,0 +1,580 @@
+"use client";
+
+import { type ReactNode, useCallback, useState } from "react";
+import { Add } from "@carbon/icons-react";
+import {
+  Button,
+  ComposedModal,
+  InlineLoading,
+  InlineNotification,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ProgressIndicator,
+  ProgressStep,
+  ToastNotification,
+} from "@carbon/react";
+import { ServerDataTable } from "@isi-ui7/data-table";
+import type { CrudCustomActionSchema, CrudDeleteSchema, CrudListSchema } from "./crud-types";
+import type { CrudForm, FormMode } from "./form-types";
+import type { Ui7FormDensity } from "./style-contract";
+import { SchemaFormRenderer } from "./form-renderer";
+import { PageBody, PageFooter, PageHeader, PageLayout } from "./page-layout";
+import { submitWorkflowDelete, submitWorkflowForm } from "./workflow/crud-client";
+import { useCrudForm } from "./workflow/use-crud-form";
+import { useWorkflowTracker } from "./workflow/use-workflow-tracker";
+import { useBosSharedI18n } from "./i18n";
+
+// ── List page (bare) ──────────────────────────────────────────────────────────
+
+export function SharedCrudListPage({
+  schema,
+  tableKey,
+  onAdd,
+  onPopupClick
+}: {
+  schema: CrudListSchema;
+  tableKey?: number;
+  onAdd: () => void;
+  onPopupClick: (row: Record<string, unknown>, actionId: string) => void;
+}) {
+  const labels = useBosSharedI18n();
+  return (
+    <PageLayout>
+      <PageHeader title={schema.title} subtitle={schema.subtitle} />
+      <PageBody>
+        <ServerDataTable
+          key={tableKey}
+          apiPath={schema.apiPath}
+          columns={schema.columns as any}
+          showSearch={schema.showSearch ?? true}
+          showSort={schema.showSort ?? true}
+          popupMenu={{ src: "local", items: schema.popupMenuItems as any, onClick: onPopupClick }}
+          toolbarActions={
+            <Button renderIcon={Add} size="sm" onClick={onAdd}>
+              {schema.addButtonLabel || labels.next}
+            </Button>
+          }
+        />
+      </PageBody>
+    </PageLayout>
+  );
+}
+
+// ── Schema-driven list page ───────────────────────────────────────────────────
+// Handles popup routing + delete modal (built-in) + custom action modal (L2) internally.
+// Unknown action IDs fall through to onCustomAction (L1).
+
+export function CrudSchemaListPage<TData extends Record<string, unknown>>({
+  listSchema,
+  deleteSchema,
+  onAdd,
+  onView,
+  onEdit,
+  deleteApiPath,
+  onCustomAction,
+}: {
+  listSchema: CrudListSchema;
+  deleteSchema?: CrudDeleteSchema<TData>;
+  onAdd: () => void;
+  onView?: (id: string) => void;
+  onEdit?: (id: string) => void;
+  deleteApiPath?: (id: string) => string;
+  /**
+   * Level 1: called for any popup action id not handled by built-in logic
+   * (view / edit / delete) and not in listSchema.customActionSchemas (Level 2).
+   */
+  onCustomAction?: (id: string, row: Record<string, unknown>, actionId: string) => void;
+}) {
+  const labels = useBosSharedI18n();
+  const [tableKey, setTableKey] = useState(0);
+  const [deleteRow, setDeleteRow] = useState<Record<string, unknown> | null>(null);
+  const [deleting, setDeleting] = useState(false);
+
+  // Level 2 custom action state
+  const [customActionId, setCustomActionId] = useState<string | null>(null);
+  const [customActionRow, setCustomActionRow] = useState<Record<string, unknown> | null>(null);
+  const [customActioning, setCustomActioning] = useState(false);
+  const [customActionError, setCustomActionError] = useState<string | null>(null);
+
+  // Workflow completion toast
+  const [wfToast, setWfToast] = useState<{ kind: 'success' | 'error'; title: string; subtitle?: string } | null>(null);
+
+  const tracker = useWorkflowTracker({
+    onComplete: useCallback((_id: string, result: { status: 'success' | 'error'; message?: string }) => {
+      if (result.status === 'success') {
+        setWfToast({ kind: 'success', title: 'Proses berhasil', subtitle: result.message });
+        setTableKey((v) => v + 1);
+      } else {
+        const title = listSchema.title ? `${listSchema.title}: proses gagal` : 'Proses gagal';
+        setWfToast({ kind: 'error', title, subtitle: result.message });
+      }
+    }, [listSchema.title]),
+  });
+
+  const onPopupClick = useCallback(
+    (row: Record<string, unknown>, actionId: string) => {
+      const rid = encodeURIComponent(String(row.id ?? ""));
+      if (!rid) return;
+      if (actionId === "view") { onView?.(rid); return; }
+      if (actionId === "edit") { onEdit?.(rid); return; }
+      if (actionId === "delete") { setDeleteRow(row); return; }
+
+      // Level 2: schema-driven confirmation modal
+      if (listSchema.customActionSchemas?.[actionId]) {
+        setCustomActionId(actionId);
+        setCustomActionRow(row);
+        setCustomActionError(null);
+        return;
+      }
+
+      // Level 1: delegate to caller
+      onCustomAction?.(rid, row, actionId);
+    },
+    [onView, onEdit, listSchema.customActionSchemas, onCustomAction],
+  );
+
+  const doDelete = useCallback(async () => {
+    const id = String(deleteRow?.id ?? "");
+    if (!id || !deleteApiPath) return;
+    setDeleting(true);
+    try {
+      const instanceId = await submitWorkflowDelete(deleteApiPath(id));
+      setDeleteRow(null);
+      setTableKey((v) => v + 1);
+      tracker.track(instanceId);
+    } catch {
+      // error shown inline by modal
+    } finally {
+      setDeleting(false);
+    }
+  }, [deleteRow, deleteApiPath, tracker]);
+
+  const doCustomAction = useCallback(async () => {
+    if (!customActionId || !customActionRow) return;
+    const schema: CrudCustomActionSchema | undefined =
+      listSchema.customActionSchemas?.[customActionId];
+    if (!schema) return;
+    const id = String(customActionRow.id ?? "");
+    const path = typeof schema.apiPath === "function" ? schema.apiPath(id) : schema.apiPath;
+    setCustomActioning(true);
+    setCustomActionError(null);
+    try {
+      const instanceId = await submitWorkflowForm(path, schema.method ?? "POST", {});
+      setCustomActionId(null);
+      setCustomActionRow(null);
+      setTableKey((v) => v + 1);
+      tracker.track(instanceId);
+    } catch (e: unknown) {
+      setCustomActionError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setCustomActioning(false);
+    }
+  }, [customActionId, customActionRow, listSchema.customActionSchemas, tracker]);
+
+  const activeCustomSchema =
+    customActionId ? listSchema.customActionSchemas?.[customActionId] : undefined;
+  const customDescription = activeCustomSchema
+    ? (typeof activeCustomSchema.description === "function"
+        ? activeCustomSchema.description(customActionRow ?? {})
+        : activeCustomSchema.description)
+    : "";
+
+  return (
+    <>
+      <SharedCrudListPage
+        schema={listSchema}
+        tableKey={tableKey}
+        onAdd={onAdd}
+        onPopupClick={onPopupClick}
+      />
+
+      {wfToast ? (
+        <div style={{ position: 'fixed', bottom: '1rem', right: '1rem', zIndex: 9000 }}>
+          <ToastNotification
+            kind={wfToast.kind}
+            title={wfToast.title}
+            subtitle={wfToast.subtitle ?? ''}
+            timeout={5000}
+            onClose={() => setWfToast(null)}
+          />
+        </div>
+      ) : null}
+
+      {/* Built-in delete modal */}
+      {deleteSchema ? (
+        <SharedCrudDeleteModal
+          open={Boolean(deleteRow)}
+          row={deleteRow as never}
+          schema={deleteSchema as never}
+          deleting={deleting}
+          onClose={() => !deleting && setDeleteRow(null)}
+          onConfirm={() => void doDelete()}
+        />
+      ) : null}
+
+      {/* Level 2: generic custom action confirmation modal */}
+      {activeCustomSchema ? (
+        <ComposedModal
+          open={Boolean(customActionRow)}
+          onClose={() => !customActioning && setCustomActionId(null)}
+          size="sm"
+        >
+          <ModalHeader title={activeCustomSchema.title} />
+          <ModalBody hasScrollingContent={false}>
+            <div style={{ display: "grid", gap: "0.5rem", fontSize: "0.875rem" }}>
+              <p>{customDescription}</p>
+              {customActionError ? (
+                <InlineNotification
+                  kind="error"
+                  title={labels.errorTitle}
+                  subtitle={customActionError}
+                  lowContrast
+                />
+              ) : null}
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              kind="secondary"
+              onClick={() => setCustomActionId(null)}
+              disabled={customActioning}
+            >
+              {activeCustomSchema.cancelLabel ?? labels.cancel}
+            </Button>
+            <Button
+              kind="primary"
+              onClick={() => void doCustomAction()}
+              disabled={customActioning || !customActionRow}
+            >
+              {customActioning ? labels.saving : (activeCustomSchema.confirmLabel ?? labels.next)}
+            </Button>
+          </ModalFooter>
+        </ComposedModal>
+      ) : null}
+    </>
+  );
+}
+
+// ── Form page shell ───────────────────────────────────────────────────────────
+
+export function SharedCrudFormPage({
+  title,
+  subtitle,
+  children,
+  footer
+}: {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  footer: ReactNode;
+}) {
+  return (
+    <PageLayout>
+      <PageHeader title={title} subtitle={subtitle} />
+      <PageBody>{children}</PageBody>
+      {footer ? <PageFooter>{footer}</PageFooter> : null}
+    </PageLayout>
+  );
+}
+
+// ── Schema-driven full page (single-page / tabs / wizard) ─────────────────────
+
+export function CrudSchemaPage<TData extends Record<string, unknown>>({
+  schema,
+  mode,
+  params = {},
+  onBack,
+  onSuccess,
+  density: densityProp,
+}: {
+  schema: CrudForm<TData>;
+  mode: FormMode;
+  params?: Record<string, string>;
+  onBack?: () => void;
+  onSuccess?: (instanceId: string) => void;
+  /** Override schema.density. Both default to "compact". */
+  density?: Ui7FormDensity;
+}) {
+  const labels = useBosSharedI18n();
+  const density = densityProp ?? schema.density ?? "compact";
+  const {
+    form,
+    setForm,
+    loading,
+    saving,
+    error,
+    fieldErrors,
+    isDirty,
+    page,
+    isLastPage,
+    canGoPrev,
+    goNext,
+    goPrev,
+    handleSave,
+  } = useCrudForm({ schema, mode, params, onSuccess });
+
+  const [activeTab, setActiveTab] = useState(0);
+
+  const title = schema.title[mode];
+  const subtitleDefaults = { create: labels.subtitleCreate, edit: labels.subtitleEdit, view: labels.subtitleView };
+  const subtitle =
+    schema.subtitle === undefined
+      ? subtitleDefaults[mode]
+      : typeof schema.subtitle === "string"
+        ? schema.subtitle
+        : schema.subtitle[mode];
+  const isView = mode === "view";
+  const submitLabel =
+    mode === "create"
+      ? (schema.submitLabel?.create ?? labels.submitCreate)
+      : (schema.submitLabel?.edit ?? labels.submitEdit);
+  const backLabel = 
+    isView
+      ? (schema.backLabel?.view ?? labels.close)
+      : (schema.backLabel?.others ?? labels.cancel);
+
+  if (loading) {
+    return (
+      <PageLayout>
+        <PageHeader title={title} subtitle={subtitle} />
+        <PageBody>
+          <InlineLoading description={labels.loading} />
+        </PageBody>
+      </PageLayout>
+    );
+  }
+
+  const errBanner = error ? (
+    <InlineNotification
+      kind="error"
+      title={labels.errorTitle}
+      subtitle={error}
+      lowContrast
+      style={{ marginBottom: "1rem" }}
+    />
+  ) : null;
+
+  const layout = schema.layout;
+
+  const renderBody = () => {
+    if (layout.type === "single-page") {
+      return (
+        <PageBody>
+          {errBanner}
+          <SchemaFormRenderer
+            mode={mode}
+            value={form}
+            sections={layout.sections}
+            errors={fieldErrors}
+            disabled={saving}
+            onChange={setForm}
+            density={density}
+          />
+        </PageBody>
+      );
+    }
+
+    if (layout.type === "tabs") {
+      return (
+        <PageBody>
+          {errBanner}
+          <div>
+            <div
+              role="tablist"
+              style={{
+                display: "flex",
+                borderBottom: "1px solid var(--cds-border-subtle-01, #e0e0e0)",
+                marginBottom: 0,
+              }}
+            >
+              {layout.pages.map((pg, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  role="tab"
+                  aria-selected={i === activeTab}
+                  onClick={() => setActiveTab(i)}
+                  style={{
+                    padding: "0.75rem 1rem",
+                    background: "none",
+                    border: "none",
+                    borderBottom:
+                      i === activeTab
+                        ? "2px solid var(--cds-interactive-01, #0f62fe)"
+                        : "2px solid transparent",
+                    marginBottom: "-1px",
+                    cursor: "pointer",
+                    fontSize: "0.875rem",
+                    lineHeight: "1.25rem",
+                    fontWeight: i === activeTab ? 600 : 400,
+                    color:
+                      i === activeTab
+                        ? "var(--cds-text-primary, #161616)"
+                        : "var(--cds-text-secondary, #525252)",
+                  }}
+                >
+                  {pg.label}
+                </button>
+              ))}
+            </div>
+            {layout.pages.map((pg, i) => (
+              <div key={i} style={{ display: i === activeTab ? "block" : "none" }}>
+                <SchemaFormRenderer
+                  mode={mode}
+                  value={form}
+                  sections={pg.sections}
+                  errors={fieldErrors}
+                  disabled={saving}
+                  onChange={setForm}
+                  density={density}
+                />
+              </div>
+            ))}
+          </div>
+        </PageBody>
+      );
+    }
+
+    const currentPage = layout.pages[page];
+    return (
+      <PageBody>
+        {errBanner}
+        <ProgressIndicator currentIndex={page} style={{ marginBottom: "1.5rem" }}>
+          {layout.pages.map((pg, i) => (
+            <ProgressStep key={i} label={pg.label} />
+          ))}
+        </ProgressIndicator>
+        {currentPage ? (
+          <SchemaFormRenderer
+            mode={mode}
+            value={form}
+            sections={currentPage.sections}
+            errors={fieldErrors}
+            disabled={saving}
+            onChange={setForm}
+            density={density}
+          />
+        ) : null}
+      </PageBody>
+    );
+  };
+
+  const renderFooter = () => {
+    if (isView) {
+      return (
+        <PageFooter>
+          <Button kind="secondary" size="sm" onClick={onBack}>
+            {backLabel}
+          </Button>
+        </PageFooter>
+      );
+    }
+
+    if (layout.type === "wizard") {
+      return (
+        <PageFooter spread>
+          <Button kind="secondary" size="sm" onClick={onBack} disabled={saving}>
+            {backLabel}
+          </Button>
+          <div style={{ display: "flex", gap: "0.5rem" }}>
+            {canGoPrev ? (
+              <Button kind="secondary" size="sm" onClick={goPrev} disabled={saving}>
+                {labels.prev}
+              </Button>
+            ) : null}
+            {isLastPage ? (
+              <Button
+                kind="primary"
+                size="sm"
+                onClick={handleSave}
+                disabled={saving || (mode === "edit" && !isDirty)}
+              >
+                {saving ? labels.saving : submitLabel}
+              </Button>
+            ) : (
+              <Button kind="primary" size="sm" onClick={() => void goNext()} disabled={saving}>
+                {labels.next}
+              </Button>
+            )}
+          </div>
+        </PageFooter>
+      );
+    }
+
+    return (
+      <PageFooter>
+        <Button kind="secondary" size="sm" onClick={onBack} disabled={saving}>
+          {backLabel}
+        </Button>
+        <Button
+          kind="primary"
+          size="sm"
+          onClick={handleSave}
+          disabled={saving || (mode === "edit" && !isDirty)}
+        >
+          {saving ? labels.saving : submitLabel}
+        </Button>
+      </PageFooter>
+    );
+  };
+
+  return (
+    <PageLayout>
+      <PageHeader title={title} subtitle={subtitle} />
+      {renderBody()}
+      {renderFooter()}
+    </PageLayout>
+  );
+}
+
+// ── Delete modal ──────────────────────────────────────────────────────────────
+
+function fmt(value: unknown): string {
+  return value === null || value === undefined || value === "" ? "-" : String(value);
+}
+
+export function SharedCrudDeleteModal<TData extends Record<string, unknown>>({
+  open,
+  row,
+  schema,
+  deleting,
+  onClose,
+  onConfirm
+}: {
+  open: boolean;
+  row: TData | null;
+  schema: CrudDeleteSchema<TData>;
+  deleting?: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}) {
+  const labels = useBosSharedI18n();
+  return (
+    <ComposedModal open={open} onClose={onClose} size="sm">
+      <ModalHeader title={schema.title ?? labels.deleteTitle} />
+      <ModalBody hasScrollingContent={false}>
+        <div style={{ display: "grid", gap: "0.5rem", fontSize: "0.875rem", lineHeight: "1.25rem" }}>
+          <p>{schema.description ?? labels.deleteDescription}</p>
+          {schema.summary.map((item) => {
+            const raw = row ? row[item.key as keyof TData] : undefined;
+            const value = row ? (item.format ? item.format(raw, row) : fmt(raw)) : "-";
+            return (
+              <div key={String(item.key)}>
+                <b>{item.label}:</b> {value}
+              </div>
+            );
+          })}
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={onClose} disabled={deleting}>
+          {schema.cancelLabel ?? labels.cancel}
+        </Button>
+        <Button kind="danger" onClick={onConfirm} disabled={deleting || !row}>
+          {deleting ? labels.saving : (schema.confirmLabel ?? labels.deleteConfirm)}
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+}

package/src/crud-hooks.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { applyCrudFieldOverrides } from "./crud-hooks";
+
+describe("applyCrudFieldOverrides", () => {
+  it("applies readonly/required/helper override", () => {
+    const fields = [{ key: "a", readonly: false, required: true, helperText: "old" }];
+    const out = applyCrudFieldOverrides(fields, {
+      fieldOverrides: { a: { readonly: true, required: false, helperText: "new" } },
+    });
+
+    expect(out).toHaveLength(1);
+    expect(out[0].readonly).toBe(true);
+    expect(out[0].required).toBe(false);
+    expect(out[0].helperText).toBe("new");
+  });
+
+  it("drops hidden field", () => {
+    const fields = [{ key: "a" }, { key: "b" }];
+    const out = applyCrudFieldOverrides(fields, {
+      fieldOverrides: { b: { hidden: true } },
+    });
+    expect(out.map((f) => f.key)).toEqual(["a"]);
+  });
+
+  it("keeps original when override absent", () => {
+    const fields = [{ key: "a", required: true }];
+    const out = applyCrudFieldOverrides(fields, {
+      fieldOverrides: { b: { required: false } },
+    });
+    expect(out).toEqual(fields);
+  });
+});

package/src/crud-hooks.ts

@@ -0,0 +1,31 @@
+import type { CrudActionOverrideHooks } from "./crud-types";
+
+export async function runCrudHook<TData extends Record<string, unknown>, TResult>(
+  hook: ((data: TData, context: { mode: "create" | "edit" | "view" | "delete"; id?: string }) => Promise<TResult> | TResult) | undefined,
+  data: TData,
+  context: { mode: "create" | "edit" | "view" | "delete"; id?: string },
+): Promise<TResult | undefined> {
+  if (!hook) return undefined;
+  return hook(data, context);
+}
+
+export function applyCrudFieldOverrides<TField extends { key: string; readonly?: boolean; required?: boolean; helperText?: unknown }>(
+  fields: TField[],
+  hooks?: CrudActionOverrideHooks<Record<string, unknown>> | CrudActionOverrideHooks<any>,
+): TField[] {
+  if (!hooks?.fieldOverrides) return fields;
+
+  return fields
+    .filter((field) => hooks.fieldOverrides?.[field.key]?.hidden !== true)
+    .map((field) => {
+      const override = hooks.fieldOverrides?.[field.key];
+      if (!override) return field;
+
+      return {
+        ...field,
+        readonly: override.readonly ?? field.readonly,
+        required: override.required ?? field.required,
+        helperText: override.helperText ?? field.helperText,
+      };
+    });
+}