@isi-ui7/bos7-shared 0.2.0

package/src/form-types.ts

@@ -0,0 +1,126 @@
+import type { ReactNode } from "react";
+import type { Ui7FormDensity } from "./style-contract";
+import type { T_LookupTblStruct } from "@isi-ui7/lookup-input";
+
+export type FormMode = "create" | "edit" | "view";
+
+export type ApiPath = string | ((params: Record<string, string>) => string);
+
+// ── Validation ────────────────────────────────────────────────────────────────
+
+/** Per-field validator function — same signature used by Rules.* and FieldValidation.validators[]. */
+export type FieldValidatorFn<TData = Record<string, unknown>> = (
+  value: unknown,
+  data: TData,
+) => string | undefined;
+
+export type FieldValidation<TData extends Record<string, unknown>> = {
+  required?: true | string;
+  minLength?: number | [number, string];
+  maxLength?: number | [number, string];
+  min?: number | [number, string];
+  max?: number | [number, string];
+  pattern?: RegExp | [RegExp, string];
+  /** Single custom validator (kept for backward compatibility). */
+  custom?: FieldValidatorFn<TData>;
+  /** Array of validators — compose Rules.* or custom functions. Runs after built-in rules. */
+  validators?: FieldValidatorFn<TData>[];
+};
+
+// ── Field ─────────────────────────────────────────────────────────────────────
+
+export type FormFieldType =
+  | "text" | "textarea" | "number" | "date"
+  | "select" | "lookup" | "checkbox" | "toggle";
+
+export type FormFieldOption = { value: string; label: string };
+
+export type FormFieldLookupConfig<TData extends Record<string, unknown>> = {
+  lookupAPI: string;
+  lookupDataStructure: Record<string, T_LookupTblStruct>;
+  lookupFieldTitles: Record<string, string>;
+  displayFieldNames: string[];
+  popupWidthPx?: number;
+  placeholder?: string;
+  dataSource?: "api" | "direct";
+  /** Return a patch to merge into the form when a lookup row is selected. */
+  onDataPatch?: (row: Record<string, unknown>, data: TData) => Partial<TData>;
+};
+
+export type FormFieldNumericConfig<TData extends Record<string, unknown>> =
+  | { kind: "currency"; currencyField: keyof TData; precisionByCurrency: Record<string, number>; defaultPrecision?: number }
+  | { kind: "percent"; maxFractionDigits: number }
+  | { kind: "integer" }
+  | { kind: "phone"; minDigits: number; maxDigits: number; allowedPrefixes?: string[] };
+
+export type FormField<TData extends Record<string, unknown>> = {
+  key: keyof TData;
+  label: ReactNode;
+  type: FormFieldType;
+  span?: number;
+  /** Static or dynamic readonly. Function receives current mode + form data. */
+  readonly?: boolean | ((mode: FormMode, data: TData) => boolean);
+  /** Static or dynamic visibility. Hidden fields are skipped in validation. */
+  hidden?: boolean | ((mode: FormMode, data: TData) => boolean);
+  /** Restrict to specific modes (undefined = all modes). */
+  mode?: FormMode | FormMode[];
+  helperText?: ReactNode;
+  placeholder?: string;
+  maxLength?: number;
+  rows?: number;
+  inputMode?: "text" | "numeric" | "decimal" | "email" | "tel" | "url";
+  options?: FormFieldOption[];
+  lookup?: FormFieldLookupConfig<TData>;
+  numeric?: FormFieldNumericConfig<TData>;
+  format?: (value: TData[keyof TData], data: TData) => ReactNode;
+  validation?: FieldValidation<TData>;
+};
+
+// ── Section ───────────────────────────────────────────────────────────────────
+
+export type FormSection<TData extends Record<string, unknown>> = {
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Number of equal columns in the section grid. Default 1. */
+  columns?: 1 | 2 | 3;
+  fields: FormField<TData>[];
+};
+
+// ── Layout ────────────────────────────────────────────────────────────────────
+
+export type FormPageDef<TData extends Record<string, unknown>> = {
+  label: string;
+  sections: FormSection<TData>[];
+  /** Optional: save draft on Next. Returns {ok,error?} (no 202 required). */
+  stepSaveApiPath?: ApiPath;
+};
+
+export type FormLayout<TData extends Record<string, unknown>> =
+  | { type: "single-page"; sections: FormSection<TData>[] }
+  | { type: "tabs"; pages: FormPageDef<TData>[] }
+  | { type: "wizard"; pages: FormPageDef<TData>[]; validateOnNext?: boolean };
+
+// ── CrudForm (schema-driven) ──────────────────────────────────────────────────
+
+export type CrudForm<TData extends Record<string, unknown>> = {
+  title: { create: string; edit: string; view: string };
+  subtitle?: string | { create: string; edit: string; view: string };
+  /** Omit entirely to use i18n defaults ("Simpan" / "Update"). Per-key also optional. */
+  submitLabel?: { create?: string; edit?: string };
+  /** Omit to use i18n default ("Batal"). */
+  backLabel?: { view?: string; others?: string};
+  /** Form layout density. Defaults to "compact". */
+  density?: Ui7FormDensity;
+
+  emptyData: TData;
+
+  createApiPath: ApiPath;
+  updateApiPath?: ApiPath;
+  /** Required for edit + view modes. */
+  loadApiPath?: ApiPath;
+
+  /** Cross-field validation run after per-field rules. */
+  validate?: (data: TData) => Partial<Record<keyof TData, string>>;
+
+  layout: FormLayout<TData>;
+};

package/src/i18n.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useT } from "@isi-ui7/i18n";
+
+// ── Label contract ─────────────────────────────────────────────────────────────
+
+export type BosSharedLabels = {
+  validRequired: (fieldLabel: string) => string;
+  validMinLength: (n: number) => string;
+  validMaxLength: (n: number) => string;
+  validMin: (n: number) => string;
+  validMax: (n: number) => string;
+  validPattern: string;
+  validationError: string;
+
+  ruleEmail: string;
+  ruleUrl: string;
+  ruleNik: string;
+  ruleKodePos: string;
+  rulePhone: string;
+
+  boolYes: string;
+  boolNo: string;
+  toggleOn: string;
+  toggleOff: string;
+  emptyValue: string;
+
+  loading: string;
+  saving: string;
+  errorTitle: string;
+  close: string;
+  cancel: string;
+  prev: string;
+  next: string;
+
+  subtitleCreate: string;
+  subtitleEdit: string;
+  subtitleView: string;
+  submitCreate: string;
+  submitEdit: string;
+  deleteTitle: string;
+  deleteDescription: string;
+  deleteConfirm: string;
+};
+
+// ── Thin adapter — reads from @isi-ui7/i18n (wired in createShellProvider) ───
+
+function ip(template: string, params: Record<string, string | number>): string {
+  return template.replace(/\{\{(\w+)\}\}/g, (_, key) => String(params[key as string] ?? ""));
+}
+
+export function useBosSharedI18n(): BosSharedLabels {
+  const t = useT();
+  return {
+    validRequired: (label) => ip(t("bos7.validRequired", "{{label}} wajib diisi"), { label }),
+    validMinLength: (n) => ip(t("bos7.validMinLength", "Minimal {{n}} karakter"), { n }),
+    validMaxLength: (n) => ip(t("bos7.validMaxLength", "Maksimal {{n}} karakter"), { n }),
+    validMin: (n) => ip(t("bos7.validMin", "Nilai minimal {{n}}"), { n }),
+    validMax: (n) => ip(t("bos7.validMax", "Nilai maksimal {{n}}"), { n }),
+    validPattern: t("bos7.validPattern", "Format tidak valid"),
+    validationError: t("bos7.validationError", "Periksa field wajib"),
+
+    ruleEmail: t("bos7.ruleEmail", "Format email tidak valid"),
+    ruleUrl: t("bos7.ruleUrl", "URL harus diawali http:// atau https://"),
+    ruleNik: t("bos7.ruleNik", "NIK harus 16 digit angka"),
+    ruleKodePos: t("bos7.ruleKodePos", "Kode pos harus 5 digit"),
+    rulePhone: t("bos7.rulePhone", "No HP tidak valid"),
+
+    boolYes: t("bos7.boolYes", "Ya"),
+    boolNo: t("bos7.boolNo", "Tidak"),
+    toggleOn: t("bos7.toggleOn", "On"),
+    toggleOff: t("bos7.toggleOff", "Off"),
+    emptyValue: t("bos7.emptyValue", "—"),
+
+    loading: t("bos7.loading", "Memuat data..."),
+    saving: t("bos7.saving", "Memproses..."),
+    errorTitle: t("bos7.errorTitle", "Gagal"),
+    close: t("bos7.close", "Tutup"),
+    cancel: t("bos7.cancel", "Batal"),
+    prev: t("bos7.prev", "Kembali"),
+    next: t("bos7.next", "Lanjut"),
+
+    subtitleCreate: t("bos7.subtitleCreate", "Isi form untuk menambah data baru."),
+    subtitleEdit: t("bos7.subtitleEdit", "Edit data yang dipilih."),
+    subtitleView: t("bos7.subtitleView", "Detail data."),
+    submitCreate: t("bos7.submitCreate", "Simpan"),
+    submitEdit: t("bos7.submitEdit", "Update"),
+    deleteTitle: t("bos7.deleteTitle", "Konfirmasi Hapus"),
+    deleteDescription: t("bos7.deleteDescription", "Data berikut akan dihapus permanen."),
+    deleteConfirm: t("bos7.deleteConfirm", "Hapus"),
+  };
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+export * from './auth7';
+export * from './page-layout';
+export * from './backend';
+export * from './export';
+export * from './api';
+export * from './types/core';
+export * from './types/notification';
+export * from './nats/client';
+export * from './event-bus';
+export * from './notification/routing';
+export * from './style-contract';
+
+export * from './shell/provider';
+export * from './shell/app-shell-layout';
+export * from './notifications-bff';
+
+export * from './crud-types';
+export * from './crud-hooks';
+export * from './form-types';
+export * from './i18n';

package/src/modal-layout.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+/**
+ * Modal-flavoured counterpart to ./page-layout.
+ *
+ * PageLayout assumes its parent provides an explicit height (full-page shell),
+ * so `.page__body { flex: 1; overflow-y: auto }` resolves correctly. Inside a
+ * modal dialog the height is content-driven (capped at 90vh by the dialog),
+ * which means `flex: 1` collapses to 0 and the scroll behaviour breaks.
+ *
+ * These components mirror the same UX (sticky title + sticky footer + scrolling
+ * body) but use explicit `max-height` on the wrapper so they work in an
+ * auto-sized modal. Designed to be used alongside `<PageComponent>.modalTitle`
+ * (which renders the dialog header bar with × close + edge-to-edge border).
+ *
+ * All visual styles live in `@isi-ui7/corporate-themes/dist/globals.css` under
+ * the `.modal-layout`, `.modal-layout__body`, `.modal-layout__footer` selectors
+ * (and the `.modal-layout--{size}` size modifiers) so the dialog header
+ * border-bottom and footer border-top align edge-to-edge.
+ *
+ * Pattern:
+ *   <ModalLayout>
+ *     <ModalBody>...form fields / detail rows...</ModalBody>
+ *     <ModalFooter>
+ *       <Button kind="primary">Save</Button>
+ *       <Button kind="ghost">Cancel</Button>
+ *     </ModalFooter>
+ *   </ModalLayout>
+ */
+
+export type ModalSize = "sm" | "md" | "lg" | "xl";
+
+export type ModalLayoutProps = {
+  /** Width preset matching @isi-ui7/modal-manager size names. Default: md. */
+  size?: ModalSize;
+  children: ReactNode;
+};
+
+export function ModalLayout({ size = "md", children }: ModalLayoutProps) {
+  return <div className={`modal-layout modal-layout--${size}`}>{children}</div>;
+}
+
+export function ModalBody({ children }: { children: ReactNode }) {
+  return <div className="modal-layout__body">{children}</div>;
+}
+
+export function ModalFooter({
+  children,
+  spread = false,
+}: {
+  /** Action buttons. */
+  children: ReactNode;
+  /** If true, the first child is pushed to the left edge (e.g. Back left, Next right). */
+  spread?: boolean;
+}) {
+  const cls = spread ? "modal-layout__footer modal-layout__footer--spread" : "modal-layout__footer";
+  return <div className={cls}>{children}</div>;
+}

package/src/nats/client.ts

@@ -0,0 +1,130 @@
+// lib/nats/client.ts — NATS client for bos7-template
+
+export interface NatsConfig {
+  url: string;
+  name?: string;
+  timeout?: number;
+  maxReconnect?: number;
+}
+
+export interface Message {
+  subject: string;
+  data: Uint8Array | string | null;
+  reply?: string;
+}
+
+export interface JetStreamMessage extends Message {
+  meta?: JetStreamMeta;
+}
+
+export interface JetStreamMeta {
+  stream: string;
+  sequence: number;
+  timestamp: Date;
+  redelivered: boolean;
+}
+
+export type MessageHandler = (msg: Message) => void | Promise<void>;
+export type JetStreamHandler = (msg: JetStreamMessage) => void | Promise<void>;
+
+export interface Subscription {
+  subject: string;
+  unsubscribe: () => void;
+}
+
+interface NatsConnection {
+  close(): void;
+}
+
+export interface NatsClient {
+  publish(subject: string, data: Uint8Array | string): Promise<void>;
+  subscribe(subject: string, handler: MessageHandler): Promise<Subscription>;
+  request(subject: string, data: Uint8Array | string, timeout: number): Promise<Message>;
+  close(): void;
+  isConnected(): boolean;
+}
+
+export interface JetStreamClient extends NatsClient {
+  publishAsync(subject: string, data: Uint8Array | string): Promise<void>;
+  subscribeStream(stream: string, subject: string, handler: JetStreamHandler): Promise<Subscription>;
+  createStream(name: string, subjects: string[]): Promise<void>;
+  streamExists(name: string): Promise<boolean>;
+}
+
+export class NatsClientImpl implements NatsClient {
+  private conn: NatsConnection | null = null;
+  private config: NatsConfig;
+  private subscriptions: Map<string, Subscription> = new Map();
+
+  constructor(config: NatsConfig) {
+    this.config = {
+      name: 'bos7-client',
+      timeout: 5000,
+      maxReconnect: 10,
+      ...config,
+    };
+  }
+
+  async connect(): Promise<void> {
+    // Note: Actual implementation would use nats.ws or nats.deno
+    // This is a placeholder for the interface
+    console.log('NATS client connecting to:', this.config.url);
+  }
+
+  async publish(subject: string, data: Uint8Array | string): Promise<void> {
+    if (!this.isConnected()) {
+      throw new Error('NATS client not connected');
+    }
+    // Implementation would use nats.ws publish
+    console.log('Publishing to', subject, ':', data);
+  }
+
+  async subscribe(subject: string): Promise<Subscription> {
+    if (!this.isConnected()) {
+      throw new Error('NATS client not connected');
+    }
+    const unsubscribe = () => {
+      this.subscriptions.delete(subject);
+    };
+    const sub = { subject, unsubscribe };
+    this.subscriptions.set(subject, sub);
+    return sub;
+  }
+
+  async request(_subject: string, _data: Uint8Array | string, _timeout: number): Promise<Message> {
+    void _subject;
+    void _data;
+    void _timeout;
+    if (!this.isConnected()) {
+      throw new Error('NATS client not connected');
+    }
+    throw new Error('NATS request not implemented');
+  }
+
+  close(): void {
+    this.subscriptions.forEach((sub) => sub.unsubscribe());
+    this.subscriptions.clear();
+    // Implementation would close nats.ws connection
+  }
+
+  isConnected(): boolean {
+    return this.conn !== null && this.conn !== undefined;
+  }
+}
+
+let globalClient: NatsClient | null = null;
+
+export async function createClient(config: NatsConfig): Promise<NatsClient> {
+  const client = new NatsClientImpl(config);
+  await client.connect();
+  globalClient = client;
+  return client;
+}
+
+export function getClient(): NatsClient | null {
+  return globalClient;
+}
+
+export function isConnected(): boolean {
+  return globalClient?.isConnected() ?? false;
+}

package/src/notif7.ts

@@ -0,0 +1,76 @@
+import { SignJWT } from 'jose';
+
+export const NOTIF7_URL = process.env.NOTIF7_URL ?? '';
+export const NOTIF7_JWT_SECRET = process.env.NOTIF7_JWT_SECRET ?? '';
+
+export const DEFAULT_USER_ID = 'b0000000-0000-0000-0000-000000000001';
+export const DEFAULT_BRANCH_ID = 'c0000000-0000-0000-0000-000000000001';
+
+type RequestLike = Request & {
+  cookies?: {
+    get?: (name: string) => { value?: string } | undefined;
+  };
+};
+
+export function getUserIDFromRequest(req: RequestLike | Request): string {
+  const cookieHeader = (req as RequestLike).cookies?.get?.('access_token')?.value
+    ?? (req.headers.get('cookie') ?? '')
+        .split(';')
+        .find((c: string) => c.trim().startsWith('access_token='))
+        ?.split('=').slice(1).join('=')
+        .trim();
+
+  if (!cookieHeader) return DEFAULT_USER_ID;
+
+  try {
+    const payload = cookieHeader.split('.')[1];
+    if (!payload) return DEFAULT_USER_ID;
+    const decoded = JSON.parse(
+      Buffer.from(payload.replace(/-/g, '+').replace(/_/g, '/'), 'base64').toString('utf-8')
+    );
+    return (decoded.sub as string | undefined) ?? DEFAULT_USER_ID;
+  } catch {
+    return DEFAULT_USER_ID;
+  }
+}
+
+export async function mintJWT(userID: string): Promise<string> {
+  const secret = new TextEncoder().encode(NOTIF7_JWT_SECRET);
+  return new SignJWT({ branch_id: DEFAULT_BRANCH_ID, roles: ['app_user'] })
+    .setProtectedHeader({ alg: 'HS256' })
+    .setSubject(userID)
+    .setJti(crypto.randomUUID())
+    .setExpirationTime('60s')
+    .setIssuedAt()
+    .sign(secret);
+}
+
+export interface Notif7Options {
+  userID?: string;
+  accessToken?: string;
+  query?: URLSearchParams;
+  body?: string;
+}
+
+export async function notif7Fetch(
+  method: string,
+  path: string,
+  opts: Notif7Options = {}
+): Promise<Response> {
+  const userID = opts.userID ?? DEFAULT_USER_ID;
+  const authHeader = opts.accessToken
+    ? `Bearer ${opts.accessToken}`
+    : NOTIF7_JWT_SECRET ? `Bearer ${await mintJWT(userID)}` : '';
+  const url = opts.query
+    ? `${NOTIF7_URL}${path}?${opts.query}`
+    : `${NOTIF7_URL}${path}`;
+
+  return fetch(url, {
+    method,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(authHeader ? { Authorization: authHeader } : {}),
+    },
+    ...(opts.body !== undefined ? { body: opts.body } : {}),
+  });
+}

package/src/notification/routing.ts

@@ -0,0 +1,64 @@
+export const DEFAULT_WORKFLOW_BASE_URL = "https://workflow.bos7.local";
+
+function openNamedWindow(url: string, name: string): void {
+  const win = window.open(url, name);
+  win?.focus();
+}
+
+export function openPortalNotificationsWindow(url: string): void {
+  openNamedWindow(url, "bos7PortalNotificationsWindow");
+}
+
+export function openWorkflowNotificationTarget(
+  actionHref: string | undefined,
+  workflowBaseUrl = DEFAULT_WORKFLOW_BASE_URL
+): boolean {
+  if (!actionHref) return false;
+  try {
+    const actionUrl = new URL(actionHref, window.location.origin);
+    const workflowOrigin = new URL(workflowBaseUrl).origin;
+    if (actionUrl.origin !== workflowOrigin) return false;
+    openNamedWindow(actionUrl.toString(), "bos7WorkflowInboxWindow");
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function resolveNotificationHref(
+  href: string | undefined,
+  push: (path: string) => void,
+  workflowBaseUrl = DEFAULT_WORKFLOW_BASE_URL
+): void {
+  if (!href) return;
+  const isWorkflowInboxPath = href.startsWith("/inbox");
+
+  if (isWorkflowInboxPath) {
+    try {
+      const workflowOrigin = new URL(workflowBaseUrl).origin;
+      if (window.location.origin !== workflowOrigin) {
+        openNamedWindow(`${workflowOrigin}${href}`, "bos7WorkflowInboxWindow");
+        return;
+      }
+    } catch {
+      // fall through to local push
+    }
+  }
+
+  if (href.startsWith("/")) {
+    push(href);
+    return;
+  }
+  if (openWorkflowNotificationTarget(href, workflowBaseUrl)) return;
+  try {
+    const url = new URL(href);
+    if (url.origin === window.location.origin) {
+      push(url.pathname + url.search + url.hash);
+      return;
+    }
+  } catch {
+    push(href);
+    return;
+  }
+  window.open(href, "_blank", "noopener,noreferrer");
+}