@isi-ui7/bos7-shared 0.2.0

package/src/crud-types.ts

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+
+export type CrudPopupMenuItem = {
+  id: string;
+  itemType: "item" | "separator";
+  caption?: string;
+};
+
+export type CrudActionMode = "create" | "edit" | "view" | "delete";
+
+export type CrudActionOverrideHooks<TData extends Record<string, unknown>> = {
+  beforeLoad?: (context: { mode: CrudActionMode; id?: string }) => Promise<void> | void;
+  afterLoad?: (data: TData, context: { mode: CrudActionMode; id?: string }) => Promise<TData> | TData;
+  beforeSubmit?: (data: TData, context: { mode: Extract<CrudActionMode, "create" | "edit">; id?: string }) => Promise<TData> | TData;
+  afterSubmit?: (result: unknown, context: { mode: Extract<CrudActionMode, "create" | "edit">; id?: string }) => Promise<void> | void;
+  mapRequest?: (data: TData, context: { mode: CrudActionMode; id?: string }) => unknown;
+  mapResponse?: (data: unknown, context: { mode: CrudActionMode; id?: string }) => TData;
+  fieldOverrides?: Partial<Record<string, { readonly?: boolean; required?: boolean; hidden?: boolean; helperText?: ReactNode }>>;
+};
+
+/**
+ * Level 2 custom action: schema-driven confirmation modal.
+ * Define in CrudListSchema.customActionSchemas keyed by popup menu item id.
+ * CrudSchemaListPage will handle the modal and API call automatically.
+ */
+export type CrudCustomActionSchema = {
+  title: string;
+  description: string | ((row: Record<string, unknown>) => string);
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** API endpoint — string or function receiving row id. */
+  apiPath: string | ((id: string) => string);
+  method?: "POST" | "PATCH" | "PUT";
+};
+
+export type CrudListSchema = {
+  title: string;
+  subtitle?: string;
+  apiPath: string;
+  columns: Record<string, unknown>;
+  popupMenuItems: CrudPopupMenuItem[];
+  addButtonLabel: string;
+  /** Enable column sorting. Defaults to true. */
+  showSort?: boolean;
+  /** Enable search bar. Defaults to true. */
+  showSearch?: boolean;
+  /**
+   * Level 2: schema-driven confirmation modals for custom popup actions.
+   * Keyed by popup menu item id. Actions not listed here fall through to onCustomAction (Level 1).
+   */
+  customActionSchemas?: Record<string, CrudCustomActionSchema>;
+};
+
+export type CrudDeleteSchema<TData extends Record<string, unknown>> = {
+  /** Omit to use i18n default ("Konfirmasi Hapus"). */
+  title?: string;
+  /** Omit to use i18n default ("Data berikut akan dihapus permanen."). */
+  description?: string;
+  summary: Array<{ label: string; key: keyof TData | string; format?: (value: unknown, row: TData) => ReactNode }>;
+  /** Omit to use i18n default ("Hapus"). */
+  confirmLabel?: string;
+  /** Omit to use i18n default ("Batal"). */
+  cancelLabel?: string;
+};

package/src/data-table/cursor-adapter.ts

@@ -0,0 +1,239 @@
+// BFF helper for `<ServerDataTable>` from `@isi-ui7/data-table`.
+//
+// Backends should expose cursor (keyset) pagination — performance stays flat
+// at any depth and stays stable under concurrent inserts. Each row in the
+// response carries an opaque `_cursor` field which the client echoes back
+// via topData/bottomData to walk next/prev/last.
+//
+// Backend contract:
+//
+//   GET /v1/<resource>
+//     ?limit=N
+//     &cursor=<opaque>              (omit on first page)
+//     &dir=next|prev|last           (defaults to next)
+//     &sort_by=col&sort_dir=asc|desc
+//     &q=<search>
+//     &<forwardFilters...>
+//
+//   Response: { data: [{ ..., _cursor }], meta: { has_next, has_prev, limit } }
+//
+// Typical usage in a Next.js route handler:
+//
+//   export async function POST(req: NextRequest) {
+//     return handleCursorTable(req, {
+//       backendUrl: process.env.BACKEND_URL ?? 'http://localhost:8091',
+//       resourcePath: '/v1/pejabat-cabang',
+//       forwardFilters: ['include_deleted', 'kode_cabang'],
+//       columnTypes: { kode_cabang: 'String', ... },
+//       altSortColumns: ['kode_cabang', 'nama_pejabat'],
+//       altSearchColumns: ['kode_cabang', 'nama_pejabat'],
+//     });
+//   }
+
+import { NextResponse } from 'next/server';
+import { exchangeUserToken } from '../auth7/token-exchange';
+
+/** Minimal subset of NextRequest used by cursor-adapter. Accepting this interface
+ *  instead of the concrete NextRequest prevents brand-marker conflicts when the
+ *  consumer app resolves next/ from a different pnpm instance than this library. */
+interface NextRequestLike {
+  cookies: { get(name: string): { value: string } | undefined };
+  nextUrl: { searchParams: URLSearchParams };
+  json(): Promise<unknown>;
+}
+
+export type CursorRequest = {
+  reqType?: 'next' | 'prev' | 'first' | 'last' | 'apply';
+  searchText?: string;
+  sortColumn?: { columnName: string; ascending?: boolean };
+  topData?: Record<string, unknown>;
+  bottomData?: Record<string, unknown>;
+  pageSize?: number;
+};
+
+/** Backend row shape. Carries an opaque `_cursor` used for next/prev anchors. */
+export type BackendRow = Record<string, unknown> & {
+  id?: string;
+  _cursor?: string;
+};
+
+export interface CursorAdapterOptions {
+  /** Absolute base URL of the backend (e.g. `http://localhost:8091`). */
+  backendUrl: string;
+  /** Resource path on the backend, with leading slash (e.g. `/v1/pejabat-cabang`). */
+  resourcePath: string;
+  /**
+   * Query-string filter keys forwarded verbatim from the *route's URL* into
+   * the backend query. Used for page-level filters set via
+   * `apiPath="/api/x?status=ACTIVE"` so they survive the POST.
+   */
+  forwardFilters?: string[];
+  /** Column-name → ServerDataTable column type map. */
+  columnTypes: Record<string, string>;
+  /** Whitelist of columns the user may sort by. */
+  altSortColumns: string[];
+  /** Whitelist of columns the search input matches against. */
+  altSearchColumns: string[];
+  /** Cookie name carrying the user JWT. Defaults to `access_token`. */
+  accessTokenCookie?: string;
+  /**
+   * If set, exchange the user token for a delegated token for this audience before
+   * calling the backend. Required when the backend mounts RequireDelegatedAuth().
+   */
+  audience?: string;
+}
+
+function getAccessToken(req: NextRequestLike, cookieName: string): string | null {
+  return req.cookies.get(cookieName)?.value ?? null;
+}
+
+interface BackendCursorResponse {
+  data: BackendRow[];
+  meta?: {
+    has_next?: boolean;
+    has_prev?: boolean;
+    limit?: number;
+  };
+}
+
+/**
+ * Translate a `<ServerDataTable>` POST cursor body into a backend cursor GET.
+ * Reads `bottomData._cursor` / `topData._cursor` to anchor next/prev requests,
+ * forwards sort + search + page-level filters, returns the table envelope.
+ */
+export async function handleCursorTable(
+  req: NextRequestLike,
+  opts: CursorAdapterOptions,
+): Promise<NextResponse> {
+  const cookieName = opts.accessTokenCookie ?? 'access_token';
+  const accessToken = getAccessToken(req, cookieName);
+  if (!accessToken) {
+    return NextResponse.json({ error: 'unauthorized' }, { status: 401 });
+  }
+
+  // P6 rollout: exchange for delegated token if audience is set.
+  let bearerToken = accessToken;
+  if (opts.audience) {
+    try {
+      const exchanged = await exchangeUserToken(accessToken, opts.audience, undefined, { failClosed: true });
+      bearerToken = exchanged.accessToken;
+    } catch {
+      return NextResponse.json({ error: 'token_exchange_failed', status: 502 }, { status: 502 });
+    }
+  }
+
+  let body: CursorRequest;
+  try {
+    body = (await req.json()) as CursorRequest;
+  } catch {
+    return NextResponse.json({ error: 'invalid_json' }, { status: 400 });
+  }
+
+  const pageSize = body.pageSize ?? 20;
+
+  // Resolve cursor + direction from the cursor-row already present in the
+  // table. ServerDataTable echoes whichever row was at the visible top/bottom.
+  let cursor = '';
+  let dir: 'next' | 'prev' | 'last' = 'next';
+  if (body.reqType === 'next' && body.bottomData?._cursor) {
+    cursor = String(body.bottomData._cursor);
+    dir = 'next';
+  } else if (body.reqType === 'prev' && body.topData?._cursor) {
+    cursor = String(body.topData._cursor);
+    dir = 'prev';
+  } else if (body.reqType === 'last') {
+    dir = 'last'; // backend returns the tail; no anchor needed
+  }
+  // reqType 'first' / 'apply' / undefined → no cursor, dir=next (= "from start")
+
+  const externalQS = req.nextUrl.searchParams;
+
+  const query = new URLSearchParams();
+  query.set('limit', String(pageSize));
+  if (cursor) query.set('cursor', cursor);
+  query.set('dir', dir);
+  if (body.searchText) query.set('q', body.searchText);
+  if (body.sortColumn?.columnName) {
+    query.set('sort_by', body.sortColumn.columnName);
+    query.set('sort_dir', body.sortColumn.ascending !== false ? 'asc' : 'desc');
+  }
+  for (const k of opts.forwardFilters ?? []) {
+    const v = externalQS.get(k);
+    if (v) query.set(k, v);
+  }
+
+  let backendRes: Response;
+  try {
+    backendRes = await fetch(`${opts.backendUrl}${opts.resourcePath}?${query.toString()}`, {
+      headers: { Authorization: `Bearer ${bearerToken}` },
+    });
+  } catch (e) {
+    return NextResponse.json({ error: String(e) }, { status: 502 });
+  }
+  if (!backendRes.ok) {
+    const text = await backendRes.text();
+    return NextResponse.json({ error: text }, { status: backendRes.status });
+  }
+
+  const json = (await backendRes.json()) as BackendCursorResponse;
+  const data = json.data ?? [];
+
+  return NextResponse.json({
+    data,
+    columnTypes: opts.columnTypes,
+    sortColumnName: body.sortColumn?.columnName,
+    sortAscending: body.sortColumn?.ascending ?? true,
+    altSortColumns: opts.altSortColumns,
+    altSearchColumns: opts.altSearchColumns,
+    allowNext: Boolean(json.meta?.has_next),
+    allowPrev: Boolean(json.meta?.has_prev),
+  });
+}
+
+/**
+ * Forward a backend GET verbatim. Useful for modal lookups and debug calls
+ * that don't need cursor translation.
+ */
+export async function proxyBackendGet(
+  req: NextRequestLike,
+  opts: {
+    backendUrl: string;
+    resourcePath: string;
+    accessTokenCookie?: string;
+    audience?: string;
+  },
+): Promise<NextResponse> {
+  const cookieName = opts.accessTokenCookie ?? 'access_token';
+  const accessToken = getAccessToken(req, cookieName);
+  if (!accessToken) {
+    return NextResponse.json({ error: 'unauthorized' }, { status: 401 });
+  }
+
+  // P6 rollout: exchange for delegated token if audience is set.
+  let bearerToken = accessToken;
+  if (opts.audience) {
+    try {
+      const exchanged = await exchangeUserToken(accessToken, opts.audience, undefined, { failClosed: true });
+      bearerToken = exchanged.accessToken;
+    } catch {
+      return NextResponse.json({ error: 'token_exchange_failed', status: 502 }, { status: 502 });
+    }
+  }
+
+  const qs = req.nextUrl.searchParams.toString();
+  const url = `${opts.backendUrl}${opts.resourcePath}${qs ? '?' + qs : ''}`;
+
+  try {
+    const res = await fetch(url, { headers: { Authorization: `Bearer ${bearerToken}` } });
+    const body = await res.text();
+    return new NextResponse(body, {
+      status: res.status,
+      headers: { 'Content-Type': res.headers.get('content-type') ?? 'application/json' },
+    });
+  } catch (e: unknown) {
+    return NextResponse.json(
+      { error: 'backend_unreachable', message: String(e) },
+      { status: 502 },
+    );
+  }
+}

package/src/event-bus/index.ts

@@ -0,0 +1,90 @@
+// lib/event-bus/index.ts — Event bus layer for bos7-template
+
+import { createClient, NatsClient, Message, MessageHandler } from '../nats/client';
+
+export interface EventBusConfig {
+  url: string;
+  name?: string;
+}
+
+export interface DomainEvent {
+  eventType: string;
+  subject: string;
+  occurredAt: Date;
+  id: string;
+  payload: Record<string, unknown>;
+}
+
+export type EventHandler = (event: DomainEvent) => void | Promise<void>;
+
+export interface EventBus {
+  publish(event: DomainEvent): Promise<void>;
+  subscribe(eventType: string, handler: EventHandler): Promise<void>;
+  unsubscribe(eventType: string): void;
+}
+
+class NatsEventBus implements EventBus {
+  private client: NatsClient;
+  private handlers: Map<string, MessageHandler> = new Map();
+  private subjects: Map<string, () => void> = new Map();
+
+  constructor(client: NatsClient) {
+    this.client = client;
+  }
+
+  async publish(event: DomainEvent): Promise<void> {
+    const subject = `notifications.${event.subject}`;
+    const data = JSON.stringify(event);
+
+    await this.client.publish(subject, data);
+    console.log('Event published:', event.eventType, 'to', subject);
+  }
+
+  async subscribe(eventType: string, handler: EventHandler): Promise<void> {
+    const subject = `notifications.*.${eventType}`;
+
+    const msgHandler: MessageHandler = (msg: Message) => {
+      if (msg.data) {
+        const eventData = typeof msg.data === 'string'
+          ? JSON.parse(msg.data)
+          : JSON.parse(new TextDecoder().decode(msg.data));
+        handler(eventData as DomainEvent);
+      }
+    };
+
+    const sub = await this.client.subscribe(subject, msgHandler);
+    this.handlers.set(eventType, msgHandler);
+    this.subjects.set(eventType, sub.unsubscribe);
+
+    console.log('Subscribed to:', subject);
+  }
+
+  unsubscribe(eventType: string): void {
+    const unsub = this.subjects.get(eventType);
+    if (unsub) {
+      unsub();
+      this.handlers.delete(eventType);
+      this.subjects.delete(eventType);
+    }
+  }
+}
+
+let globalBus: EventBus | null = null;
+
+export async function createEventBus(config: EventBusConfig): Promise<EventBus> {
+  const client = await createClient({
+    url: config.url,
+    name: config.name ?? 'bos7-event-bus',
+  });
+
+  globalBus = new NatsEventBus(client);
+  return globalBus;
+}
+
+export function getEventBus(): EventBus | null {
+  return globalBus;
+}
+
+export function useEventBus(): EventBus | null {
+  return globalBus;
+}

package/src/event-bus/useEventBus.ts

@@ -0,0 +1,93 @@
+// lib/event-bus/useEventBus.ts — React hook for event bus
+
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { getEventBus, type EventBus, type DomainEvent } from './index';
+
+export interface UseEventBusOptions {
+  autoConnect?: boolean;
+  url?: string;
+}
+
+export function useEventBus() {
+  const [bus, setBus] = useState<EventBus | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const eventBus = getEventBus();
+    if (eventBus) {
+      setBus(eventBus);
+      setIsConnected(true);
+    }
+  }, []);
+
+  const subscribe = useCallback(async (eventType: string, handler: (event: DomainEvent) => void) => {
+    if (!bus) {
+      console.warn('Event bus not initialized');
+      return;
+    }
+
+    try {
+      await bus.subscribe(eventType, handler);
+    } catch (err) {
+      setError(err as Error);
+    }
+  }, [bus]);
+
+  const unsubscribe = useCallback((eventType: string) => {
+    if (!bus) return;
+    bus.unsubscribe(eventType);
+  }, [bus]);
+
+  const publish = useCallback(async (event: DomainEvent) => {
+    if (!bus) {
+      console.warn('Event bus not initialized');
+      return;
+    }
+
+    try {
+      await bus.publish(event);
+    } catch (err) {
+      setError(err as Error);
+    }
+  }, [bus]);
+
+  return {
+    isConnected,
+    error,
+    subscribe,
+    unsubscribe,
+    publish,
+  };
+}
+
+export interface UseNotificationEventsOptions {
+  onNotification?: (event: DomainEvent) => void;
+}
+
+export function useNotificationEvents(options: UseNotificationEventsOptions = {}) {
+  const { onNotification } = options;
+  const [notifications, setNotifications] = useState<DomainEvent[]>([]);
+
+  const handleNotification = useCallback((event: DomainEvent) => {
+    setNotifications((prev) => [event, ...prev]);
+    onNotification?.(event);
+  }, [onNotification]);
+
+  const { isConnected, subscribe, unsubscribe } = useEventBus();
+
+  useEffect(() => {
+    if (isConnected) {
+      subscribe('notification', handleNotification);
+      return () => unsubscribe('notification');
+    }
+  }, [isConnected, subscribe, unsubscribe, handleNotification]);
+
+  return {
+    notifications,
+    isConnected,
+    clearNotifications: () => setNotifications([]),
+  };
+}

package/src/event-bus.ts

@@ -0,0 +1 @@
+export * from './event-bus/index';

package/src/export.ts

@@ -0,0 +1,62 @@
+// lib/export.ts — utility export Excel dan PDF untuk halaman laporan
+
+import * as XLSX from 'xlsx';
+
+export interface ExportColumn {
+  field: string;
+  title: string;
+  displayFormat?: string;
+}
+
+function cellValue(val: unknown, format?: string): unknown {
+  if (val === null || val === undefined) return '';
+  if (format === 'currency') return typeof val === 'number' ? val : Number(val) || 0;
+  if (format === 'date') return typeof val === 'string' ? val.slice(0, 10) : val;
+  return val;
+}
+
+export function exportToExcel<T extends Record<string, unknown>>(
+  data: T[],
+  columns: ExportColumn[],
+  sheetName: string
+): void {
+  const headers = columns.map((c) => c.title);
+  const rows = data.map((row) =>
+    columns.map((c) => cellValue(row[c.field], c.displayFormat))
+  );
+
+  const ws = XLSX.utils.aoa_to_sheet([headers, ...rows]);
+  const wb = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(wb, ws, sheetName.slice(0, 31));
+  XLSX.writeFile(wb, `${sheetName}.xlsx`);
+}
+
+export async function exportToPDF<T extends Record<string, unknown>>(
+  data: T[],
+  columns: ExportColumn[],
+  title: string
+): Promise<void> {
+  // Dynamic import — jsPDF is large, only load on demand
+  const { default: jsPDF } = await import('jspdf');
+  const { default: autoTable } = await import('jspdf-autotable');
+
+  const doc = new jsPDF({ orientation: 'landscape' });
+  doc.setFontSize(14);
+  doc.text(title, 14, 15);
+  doc.setFontSize(10);
+
+  autoTable(doc, {
+    head: [columns.map((c) => c.title)],
+    body: data.map((row) =>
+      columns.map((c) => {
+        const val = cellValue(row[c.field], c.displayFormat);
+        return String(val);
+      })
+    ),
+    startY: 22,
+    styles: { fontSize: 8 },
+    headStyles: { fillColor: [31, 97, 254] }, // Carbon blue
+  });
+
+  doc.save(`${title}.pdf`);
+}

package/src/form-contract.css

@@ -0,0 +1,52 @@
+/* Form contract — Carbon overrides scoped to .ui7-form-contract
+   Token source of truth: UI7_FORM_VISUAL_TOKENS in style-contract.ts */
+
+/* Label: 12px / 500 / 16px */
+.ui7-form-contract .cds--label {
+  margin-block-end: 0;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+}
+
+/* Input body: 14px / 400 / 20px */
+.ui7-form-contract .cds--text-input,
+.ui7-form-contract .cds--text-area,
+.ui7-form-contract .cds--select-input,
+.ui7-form-contract .cds--date-picker__input {
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+/* Full-width date picker */
+.ui7-form-contract .cds--date-picker,
+.ui7-form-contract .cds--date-picker-container {
+  width: 100%;
+}
+
+/* ── Mobile: collapse all form panels to single column ───────────────────── */
+/* Desktop-first: multi-column span values set via inline style are overridden
+   below Carbon's md breakpoint (671px). !important required to beat inline style. */
+@media (max-width: 671px) {
+  .ui7-form-contract .ui7-form-row > .ui7-form-column {
+    grid-column: 1 / -1 !important;
+  }
+}
+
+/* ── Page layout — mobile adjustments ────────────────────────────────────── */
+/* page__header: stack title + actions vertically on small screens */
+@media (max-width: 671px) {
+  .page__header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .page__actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}

package/src/form-layout.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import type { CSSProperties, ReactNode } from "react";
+
+/**
+ * Horizontal label + input row layout for forms. Carbon DS ships only the
+ * vertical (stacked) `<Form>` pattern, so this is the shared "label-left,
+ * input-right" primitive every bos7-* app should use to keep modals compact
+ * and align with the existing master-data screens.
+ *
+ * Pattern:
+ *   <HorizontalField label="Kode Cabang" required>
+ *     <TextInput id="..." labelText="" ... />
+ *   </HorizontalField>
+ *
+ * The child input should have its own `labelText` set to an empty string
+ * (Carbon inputs render a top label by default; here the label lives in the
+ * row's left column instead).
+ *
+ * Width tuning: pass `labelWidth` to override the default. For tightly
+ * grouped forms (e.g. modal `size="sm"`), 8rem usually fits; for descriptive
+ * labels in `size="lg"` modals 10–12rem reads better.
+ */
+export interface HorizontalFieldProps {
+  label: string;
+  /** Marks the row as required and renders a red asterisk next to the label. */
+  required?: boolean;
+  /** Helper text shown below the input (small, muted). */
+  helperText?: string;
+  /** Width of the label column. Defaults to 9.5rem. */
+  labelWidth?: string;
+  /** Horizontal gap between label and input. Defaults to 1rem. */
+  gap?: string;
+  /** Vertical spacing below the row. Defaults to 0.5rem. */
+  marginBlockEnd?: string;
+  /** Vertical alignment of the label relative to the input. Defaults to center. */
+  align?: "center" | "top";
+  className?: string;
+  children: ReactNode;
+}
+
+export function HorizontalField({
+  label,
+  required,
+  helperText,
+  labelWidth = "9.5rem",
+  gap = "1rem",
+  marginBlockEnd = "0.5rem",
+  align = "center",
+  className,
+  children,
+}: HorizontalFieldProps) {
+  const rowStyle: CSSProperties = {
+    display: "grid",
+    gridTemplateColumns: `${labelWidth} 1fr`,
+    columnGap: gap,
+    alignItems: align === "top" ? "start" : "center",
+    marginBlockEnd,
+  };
+
+  const labelStyle: CSSProperties = {
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    color: "var(--cds-text-secondary, #525252)",
+    paddingBlockStart: align === "top" ? "0.4375rem" : 0,
+  };
+
+  return (
+    <div className={className} style={rowStyle}>
+      <div style={labelStyle}>
+        {label}
+        {required ? <span style={{ color: "var(--cds-support-error, #da1e28)" }}> *</span> : null}
+      </div>
+      <div>
+        {children}
+        {helperText ? (
+          <div
+            style={{
+              fontSize: "0.75rem",
+              color: "var(--cds-text-helper, #6f6f6f)",
+              marginBlockStart: "0.25rem",
+            }}
+          >
+            {helperText}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}