@isi-ui7/bos7-shared 0.2.0

package/src/form-renderer.tsx

@@ -0,0 +1,624 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import {
+  Checkbox,
+  DatePicker,
+  DatePickerInput,
+  Select,
+  SelectItem,
+  TextArea,
+  TextInput,
+  Toggle,
+} from "@carbon/react";
+import { LookupInput } from "@isi-ui7/lookup-input";
+import { useI18n } from "@isi-ui7/i18n";
+import type { Ui7Locale } from "@isi-ui7/i18n";
+import {
+  formatCurrencyAmount,
+  getCurrencyPrecision,
+  normalizePhoneInput,
+  parseDecimalStrict,
+  sanitizeDecimalInput,
+} from "./form-numeric";
+import {
+  getUi7FormContractClassName,
+  UI7_FORM_DENSITY_TOKENS,
+  UI7_FORM_VISUAL_CLASSNAMES,
+  UI7_FORM_VISUAL_TOKENS,
+} from "./style-contract";
+import type { Ui7FormDensity } from "./style-contract";
+import { useBosSharedI18n } from "./i18n";
+import type { FormField, FormMode, FormSection } from "./form-types";
+
+export type SchemaFormRendererProps<TData extends Record<string, unknown>> = {
+  mode: FormMode;
+  value: TData;
+  sections: FormSection<TData>[];
+  errors?: Partial<Record<keyof TData, string>>;
+  disabled?: boolean;
+  onChange?: (patch: Partial<TData>) => void;
+  className?: string;
+  showSectionHeader?: boolean;
+  /** Override the root scope className (includes density + readonly classes). */
+  scopeClassName?: string;
+  /** Form layout density. Defaults to "compact". */
+  density?: Ui7FormDensity;
+};
+
+function clampSpan(span: number | undefined, defaultSpan: number): number {
+  const s = span ?? defaultSpan;
+  if (!Number.isFinite(s)) return defaultSpan;
+  return Math.max(1, Math.min(12, Math.trunc(s)));
+}
+
+function asString(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  return String(value);
+}
+
+/** Wraps a field label with an optional required asterisk for Carbon's labelText prop. */
+function mkLabel(label: ReactNode, required?: boolean) {
+  return (
+    <>
+      {label}
+      {required ? (
+        <span aria-hidden="true" style={{ color: "var(--cds-support-error, #da1e28)", marginLeft: "0.125rem"}}>*</span>
+      ) : null}
+    </>
+  );
+}
+
+function makeDisplayRenderer(
+  labels: { boolYes: string; boolNo: string; toggleOn: string; toggleOff: string; emptyValue: string },
+  locale: Ui7Locale,
+) {
+  return function renderDisplayValue(
+    field: FormField<Record<string, unknown>>,
+    value: unknown,
+    data: Record<string, unknown>,
+  ): ReactNode {
+    if (field.format) return field.format(value as never, data as never);
+    if (field.type === "checkbox") return value ? labels.boolYes : labels.boolNo;
+    if (field.type === "toggle") return value ? labels.toggleOn : labels.toggleOff;
+    if (field.type === "number" && typeof value === "number") {
+      const nloc = locale === "en" ? "en-US" : "id-ID";
+      const numeric = field.numeric;
+      if (!numeric) return asString(value) || labels.emptyValue;
+      if (numeric.kind === "integer") {
+        return new Intl.NumberFormat(nloc, { maximumFractionDigits: 0 }).format(value);
+      }
+      if (numeric.kind === "currency") {
+        const code = String(data[String(numeric.currencyField)] ?? "");
+        return formatCurrencyAmount(
+          value,
+          code,
+          { precisionByCurrency: numeric.precisionByCurrency, defaultPrecision: numeric.defaultPrecision },
+          locale,
+        );
+      }
+      if (numeric.kind === "percent") {
+        return (
+          new Intl.NumberFormat(nloc, {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: numeric.maxFractionDigits,
+          }).format(value) + "%"
+        );
+      }
+    }
+    return asString(value) || labels.emptyValue;
+  };
+}
+
+/**
+ * Used for readonly display fields and for components whose labelText prop only accepts string
+ * (Toggle, LookupInput). Pass htmlFor when the component has a focusable id.
+ */
+function FieldShell({
+  label,
+  required,
+  children,
+  helperText,
+  htmlFor,
+}: {
+  label: ReactNode;
+  required?: boolean;
+  children: ReactNode;
+  helperText?: ReactNode;
+  htmlFor?: string;
+}) {
+  const labelStyle = { color: "var(--cds-text-secondary, #525252)", display: "flex", alignItems: "center", gap: "0.25rem" } as const;
+  const labelContent = (
+    <>
+      <span>{label}</span>
+      {required ? (
+        <span aria-hidden="true" style={{ color: "var(--cds-support-error, #da1e28)" }}>*</span>
+      ) : null}
+    </>
+  );
+  return (
+    <div style={{ minWidth: 0, display: "flex", flexDirection: "column" }}>
+      {htmlFor ? (
+        <label htmlFor={htmlFor} className={UI7_FORM_VISUAL_CLASSNAMES.label} style={labelStyle}>{labelContent}</label>
+      ) : (
+        <div className={UI7_FORM_VISUAL_CLASSNAMES.label} style={labelStyle}>{labelContent}</div>
+      )}
+      {children}
+      {helperText ? (
+        <div className={UI7_FORM_VISUAL_CLASSNAMES.helper}>{helperText}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function NumericField({
+  id,
+  labelText,
+  helperText,
+  value,
+  numericKind,
+  prec,
+  locale,
+  size,
+  disabled,
+  invalid,
+  invalidText,
+  placeholder,
+  onChange,
+}: {
+  id: string;
+  labelText: ReactNode;
+  helperText?: ReactNode;
+  value: number;
+  numericKind: "currency" | "percent" | "integer" | "decimal";
+  prec?: number;
+  locale: Ui7Locale;
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  invalid?: boolean;
+  invalidText?: string;
+  placeholder?: string;
+  onChange: (v: number) => void;
+}) {
+  const [raw, setRaw] = useState<string | null>(null);
+  const decimalSep = locale === "en" ? "." : ",";
+  const thousandSep = locale === "en" ? "," : ".";
+  const nloc = locale === "en" ? "en-US" : "id-ID";
+
+  const formatDisplay = (v: number): string => {
+    if (numericKind === "integer") {
+      return new Intl.NumberFormat(nloc, { maximumFractionDigits: 0 }).format(v);
+    }
+    return new Intl.NumberFormat(nloc, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: prec ?? 8,
+    }).format(v);
+  };
+
+  const parseRaw = (r: string): number => {
+    if (!r.trim()) return 0;
+    // strip thousands separator, then normalize decimal separator to "."
+    let cleaned = r.split(thousandSep).join("");
+    if (decimalSep !== ".") cleaned = cleaned.replace(decimalSep, ".");
+    if (numericKind === "integer") {
+      const n = parseInt(cleaned.replace(/[^0-9-]/g, ""), 10);
+      return Number.isFinite(n) ? n : 0;
+    }
+    const sanitized = sanitizeDecimalInput(cleaned, { maxFractionDigits: prec });
+    const parsed = parseDecimalStrict(sanitized, { maxFractionDigits: prec });
+    return parsed.ok ? parsed.value : 0;
+  };
+
+  const displayValue = raw !== null ? raw : formatDisplay(value);
+
+  return (
+    <TextInput
+      id={id}
+      labelText={labelText}
+      helperText={helperText}
+      value={displayValue}
+      onFocus={() => {
+        setRaw(value === 0 ? "" : String(value).replace(".", decimalSep));
+      }}
+      onChange={(e) => {
+        const next = e.target.value;
+        setRaw(next);
+        onChange(parseRaw(next));
+      }}
+      onBlur={() => {
+        onChange(parseRaw(raw ?? ""));
+        setRaw(null);
+      }}
+      size={size}
+      disabled={disabled}
+      inputMode={numericKind === "integer" ? "numeric" : "decimal"}
+      light
+      invalid={invalid}
+      invalidText={invalidText}
+      placeholder={placeholder}
+    />
+  );
+}
+
+export function SchemaFormRenderer<TData extends Record<string, unknown>>({
+  mode,
+  value,
+  sections,
+  errors,
+  disabled = false,
+  onChange,
+  className,
+  showSectionHeader = true,
+  scopeClassName,
+  density = "compact",
+}: SchemaFormRendererProps<TData>) {
+  const isView = mode === "view";
+  const dt = UI7_FORM_DENSITY_TOKENS[density];
+  const carbonSize = density === "compact" ? "sm" : "md";
+  const rootClassName =
+    scopeClassName ?? getUi7FormContractClassName({ density, readonly: isView });
+  const labels = useBosSharedI18n();
+  const { locale } = useI18n();
+  const renderDisplayValue = makeDisplayRenderer(labels, locale);
+
+  const setValue = <K extends keyof TData>(key: K, next: TData[K]) => {
+    onChange?.(({ [key]: next } as unknown) as Partial<TData>);
+  };
+
+  return (
+    <div
+      className={`${rootClassName}${className ? ` ${className}` : ""}`}
+      style={{ display: "grid", gap: dt.sectionGap }}
+    >
+      {sections.map((section, sectionIndex) => {
+        const cols = section.columns ?? 1;
+        const defaultSpan = Math.floor(12 / cols);
+
+        return (
+          <section
+            key={`${String(section.title ?? "section")}-${sectionIndex}`}
+            className={UI7_FORM_VISUAL_CLASSNAMES.section}
+            style={{
+              padding: "1rem 1.125rem",
+              border: "1px solid var(--cds-border-subtle, #e0e0e0)",
+              background: "var(--cds-layer-01, #ffffff)",
+            }}
+          >
+            {showSectionHeader && (section.title || section.description) ? (
+              <div style={{ display: "grid", gap: "0.25rem" }}>
+                {section.title ? (
+                  <div
+                    className={UI7_FORM_VISUAL_CLASSNAMES.label}
+                    style={{ fontWeight: 600, color: "var(--cds-text-primary, #161616)" }}
+                  >
+                    <span>{section.title}</span>
+                  </div>
+                ) : null}
+                {section.description ? (
+                  <div
+                    className={UI7_FORM_VISUAL_CLASSNAMES.helper}
+                    style={{ marginBlockStart: 0, color: "var(--cds-text-primary, #161616)" }}
+                  >
+                    {section.description}
+                  </div>
+                ) : null}
+              </div>
+            ) : null}
+
+            <div
+              className={UI7_FORM_VISUAL_CLASSNAMES.row}
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(12, minmax(0, 1fr))",
+                alignItems: "start",
+                rowGap: dt.rowGap,
+                columnGap: dt.columnGap,
+              }}
+            >
+              {section.fields.flatMap((field) => {
+                if (field.mode) {
+                  const allowed = Array.isArray(field.mode) ? field.mode : [field.mode];
+                  if (!allowed.includes(mode)) return [];
+                }
+
+                const isHidden =
+                  typeof field.hidden === "function"
+                    ? field.hidden(mode, value)
+                    : Boolean(field.hidden);
+                if (isHidden) return [];
+
+                const key = String(field.key);
+                const rawValue = value[field.key];
+                const effectiveReadonly =
+                  isView ||
+                  (typeof field.readonly === "function"
+                    ? field.readonly(mode, value)
+                    : Boolean(field.readonly));
+                const effectiveRequired =
+                  Boolean(field.validation?.required) && !effectiveReadonly;
+                const invalidText = errors?.[field.key];
+                const span = clampSpan(field.span, defaultSpan);
+                const wrapperStyle = {
+                  gridColumn: `span ${span} / span ${span}`,
+                  minWidth: 0,
+                } as const;
+
+                // ── View / readonly ─────────────────────────────────────────
+                if (effectiveReadonly) {
+                  return [
+                    <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
+                      <FieldShell label={field.label} helperText={isView ? undefined : field.helperText}>
+                        <div
+                          className={`${UI7_FORM_VISUAL_CLASSNAMES.control} ${UI7_FORM_VISUAL_CLASSNAMES.controlReadonly}`}
+                          style={{
+                            minHeight: UI7_FORM_VISUAL_TOKENS.controlHeight,
+                            display: "flex",
+                            alignItems: "center",
+                            fontSize: UI7_FORM_VISUAL_TOKENS.inputFontSize,
+                            lineHeight: UI7_FORM_VISUAL_TOKENS.inputLineHeight,
+                            background: "var(--ui7-form-readonly-background, #f4f4f4)",
+                            cursor: "var(--ui7-form-readonly-cursor, default)",
+                            width: "100%",
+                            padding: "0 0.75rem",
+                            wordBreak: "break-word",
+                            overflowWrap: "anywhere",
+                          }}
+                        >
+                          <div className={UI7_FORM_VISUAL_CLASSNAMES.readonlyValue} style={{ width: "100%" }}>
+                            {renderDisplayValue(field as never, rawValue, value)}
+                          </div>
+                        </div>
+                      </FieldShell>
+                    </div>,
+                  ];
+                }
+
+                // ── Lookup ──────────────────────────────────────────────────
+                if (field.type === "lookup") {
+                  const lookup = field.lookup;
+                  return [
+                    <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
+                      <LookupInput
+                        id={key}
+                        labelText={mkLabel(field.label, effectiveRequired)}
+                        value={asString(rawValue)}
+                        onChange={(next: string) => setValue(field.key, next as TData[keyof TData])}
+                        onDataSelected={(row: Record<string, unknown>) => {
+                          if (lookup?.onDataPatch) {
+                            const patch = lookup.onDataPatch(row as never, value);
+                            onChange?.(patch);
+                          }
+                        }}
+                        dataSource={lookup?.dataSource ?? "api"}
+                        lookupAPI={lookup?.lookupAPI ?? ""}
+                        lookupDataStructure={lookup?.lookupDataStructure ?? {}}
+                        lookupFieldTitles={lookup?.lookupFieldTitles ?? {}}
+                        displayFieldNames={lookup?.displayFieldNames ?? []}
+                        popupWidthPx={lookup?.popupWidthPx}
+                        placeholder={lookup?.placeholder}
+                        disabled={disabled}
+                      />
+                      {field.helperText ? (
+                        <div className={UI7_FORM_VISUAL_CLASSNAMES.helper}>{field.helperText}</div>
+                      ) : null}
+                    </div>,
+                  ];
+                }
+
+                // ── Date ────────────────────────────────────────────────────
+                if (field.type === "date") {
+                  return [
+                    <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
+                      <DatePicker
+                        datePickerType="single"
+                        dateFormat="Y-m-d"
+                        value={asString(rawValue)}
+                        onChange={([date]) =>
+                          setValue(
+                            field.key,
+                            (date ? date.toISOString().slice(0, 10) : "") as TData[keyof TData],
+                          )
+                        }
+                      >
+                        <DatePickerInput
+                          id={key}
+                          labelText={mkLabel(field.label, effectiveRequired)}
+                          size={carbonSize}
+                          placeholder={field.placeholder ?? "YYYY-MM-DD"}
+                          disabled={disabled}
+                          invalid={Boolean(invalidText)}
+                          invalidText={invalidText}
+                        />
+                      </DatePicker>
+                      {field.helperText ? (
+                        <div className={UI7_FORM_VISUAL_CLASSNAMES.helper}>{field.helperText}</div>
+                      ) : null}
+                    </div>,
+                  ];
+                }
+
+                // ── Select ──────────────────────────────────────────────────
+                if (field.type === "select") {
+                  return [
+                    <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
+                      <Select
+                        id={key}
+                        labelText={mkLabel(field.label, effectiveRequired)}
+                        helperText={field.helperText}
+                        size={carbonSize}
+                        value={asString(rawValue)}
+                        onChange={(e) => setValue(field.key, e.target.value as TData[keyof TData])}
+                        disabled={disabled}
+                        light
+                        invalid={Boolean(invalidText)}
+                        invalidText={invalidText}
+                      >
+                        {(field.options ?? []).map((opt) => (
+                          <SelectItem key={String(opt.value)} value={opt.value} text={opt.label} />
+                        ))}
+                      </Select>
+                    </div>,
+                  ];
+                }
+
+                // ── Number ──────────────────────────────────────────────────
+                if (field.type === "number") {
+                  const numeric = field.numeric;
+                  let numericKind: "currency" | "percent" | "integer" | "decimal" = "decimal";
+                  let prec: number | undefined;
+
+                  if (numeric?.kind === "currency") {
+                    numericKind = "currency";
+                    const code = String(value[numeric.currencyField] ?? "");
+                    prec = getCurrencyPrecision(code, {
+                      precisionByCurrency: numeric.precisionByCurrency,
+                      defaultPrecision: numeric.defaultPrecision,
+                    });
+                  } else if (numeric?.kind === "percent") {
+                    numericKind = "percent";
+                    prec = numeric.maxFractionDigits;
+                  } else if (numeric?.kind === "integer") {
+                    numericKind = "integer";
+                  }
+
+                  return [
+                    <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
+                      <NumericField
+                        id={key}
+                        labelText={mkLabel(field.label, effectiveRequired)}
+                        helperText={field.helperText}
+                        value={typeof rawValue === "number" ? rawValue : 0}
+                        numericKind={numericKind}
+                        prec={prec}
+                        locale={locale}
+                        size={carbonSize}
+                        disabled={disabled}
+                        invalid={Boolean(invalidText)}
+                        invalidText={invalidText}
+                        placeholder={field.placeholder}
+                        onChange={(v) => setValue(field.key, v as TData[keyof TData])}
+                      />
+                    </div>,
+                  ];
+                }
+
+                // ── Checkbox ────────────────────────────────────────────────
+                if (field.type === "checkbox") {
+                  return [
+                    <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
+                      <Checkbox
+                        id={key}
+                        labelText={mkLabel(field.label, effectiveRequired)}
+                        checked={Boolean(rawValue)}
+                        onChange={(_e, { checked }) =>
+                          setValue(field.key, Boolean(checked) as TData[keyof TData])
+                        }
+                        disabled={disabled}
+                      />
+                    </div>,
+                  ];
+                }
+
+                // ── Toggle ──────────────────────────────────────────────────
+                if (field.type === "toggle") {
+                  return [
+                    <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
+                      <FieldShell label={field.label} required={effectiveRequired} helperText={field.helperText}>
+                        <div style={{ minHeight: dt.controlHeight, display: "flex", alignItems: "center" }}>
+                          <Toggle
+                            id={key}
+                            labelText=""
+                            labelA={labels.toggleOff}
+                            labelB={labels.toggleOn}
+                            toggled={Boolean(rawValue)}
+                            onToggle={(checked) =>
+                              setValue(field.key, Boolean(checked) as TData[keyof TData])
+                            }
+                            disabled={disabled}
+                          />
+                        </div>
+                      </FieldShell>
+                    </div>,
+                  ];
+                }
+
+                // ── Textarea ────────────────────────────────────────────────
+                if (field.type === "textarea") {
+                  return [
+                    <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
+                      <TextArea
+                        id={key}
+                        labelText={mkLabel(field.label, effectiveRequired)}
+                        helperText={field.helperText}
+                        rows={field.rows ?? 3}
+                        value={asString(rawValue)}
+                        onChange={(e) =>
+                          setValue(field.key, e.target.value as TData[keyof TData])
+                        }
+                        disabled={disabled}
+                        maxLength={field.maxLength}
+                        invalid={Boolean(invalidText)}
+                        invalidText={invalidText}
+                      />
+                    </div>,
+                  ];
+                }
+
+                // ── Phone (text with numeric phone normalization) ────────────
+                if (field.numeric?.kind === "phone") {
+                  return [
+                    <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
+                      <TextInput
+                        id={key}
+                        labelText={mkLabel(field.label, effectiveRequired)}
+                        helperText={field.helperText}
+                        size={carbonSize}
+                        value={asString(rawValue)}
+                        onChange={(e) =>
+                          setValue(
+                            field.key,
+                            normalizePhoneInput(e.target.value) as TData[keyof TData],
+                          )
+                        }
+                        disabled={disabled}
+                        maxLength={field.maxLength}
+                        inputMode="tel"
+                        light
+                        invalid={Boolean(invalidText)}
+                        invalidText={invalidText}
+                        placeholder={field.placeholder}
+                      />
+                    </div>,
+                  ];
+                }
+
+                // ── Text (default) ──────────────────────────────────────────
+                return [
+                  <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
+                    <TextInput
+                      id={key}
+                      labelText={mkLabel(field.label, effectiveRequired)}
+                      helperText={field.helperText}
+                      size={carbonSize}
+                      value={asString(rawValue)}
+                      onChange={(e) =>
+                        setValue(field.key, e.target.value as TData[keyof TData])
+                      }
+                      disabled={disabled}
+                      maxLength={field.maxLength}
+                      inputMode={field.inputMode}
+                      light
+                      invalid={Boolean(invalidText)}
+                      invalidText={invalidText}
+                      placeholder={field.placeholder}
+                    />
+                  </div>,
+                ];
+              })}
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+}

package/src/form-rules.ts

@@ -0,0 +1,54 @@
+import { isValidPhoneInput } from "./form-numeric";
+import type { PhoneRule } from "./form-numeric";
+
+export type FieldValidatorFn<TData = Record<string, unknown>> = (
+  value: unknown,
+  data: TData,
+) => string | undefined;
+
+// Rule factories — pass a custom msg to override the built-in fallback.
+// The fallback string is used when no i18n context is available (e.g. SSR utility code).
+// In React components the actual message comes from useBosSharedI18n() via field.validation.validators[].
+
+export const Rules = {
+  email(msg?: string): FieldValidatorFn {
+    const m = msg ?? "Format email tidak valid";
+    return (v) =>
+      v && typeof v === "string" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? m : undefined;
+  },
+
+  url(msg?: string): FieldValidatorFn {
+    const m = msg ?? "URL harus diawali http:// atau https://";
+    return (v) =>
+      v && typeof v === "string" && !/^https?:\/\/.+/.test(v) ? m : undefined;
+  },
+
+  nik(msg?: string): FieldValidatorFn {
+    const m = msg ?? "NIK harus 16 digit angka";
+    return (v) =>
+      v && typeof v === "string" && !/^\d{16}$/.test(v) ? m : undefined;
+  },
+
+  kodePos(msg?: string): FieldValidatorFn {
+    const m = msg ?? "Kode pos harus 5 digit";
+    return (v) =>
+      v && typeof v === "string" && !/^\d{5}$/.test(v) ? m : undefined;
+  },
+
+  phone(rule: PhoneRule, msg?: string): FieldValidatorFn {
+    const m = msg ?? "No HP tidak valid";
+    return (v) =>
+      v && typeof v === "string" && !isValidPhoneInput(v, rule) ? m : undefined;
+  },
+
+  regex(pattern: RegExp, msg: string): FieldValidatorFn {
+    return (v) =>
+      v && typeof v === "string" && !pattern.test(v) ? msg : undefined;
+  },
+} as const;
+
+export function buildValidator<TData extends Record<string, unknown>>(
+  crossField: (form: TData) => Partial<Record<keyof TData, string>>,
+): (form: TData) => Partial<Record<keyof TData, string>> {
+  return crossField;
+}