@fogpipe/forma-react 0.18.0 → 0.19.0

package/src/FormRenderer.tsx

@@ -18,6 +18,7 @@ import type {
   ValidationResult,
   JSONSchemaProperty,
   SelectOption,
+  FormatOptions,
 } from "@fogpipe/forma-core";
 import { isAdornableField, isSelectionField } from "@fogpipe/forma-core";
 import { useForma } from "./useForma.js";
@@ -34,6 +35,7 @@ import type {
   ArrayFieldProps,
   ArrayHelpers,
   DisplayFieldProps,
+  ComputedFieldProps,
   MatrixFieldProps,
 } from "./types.js";
 
@@ -64,6 +66,8 @@ export interface FormRendererProps {
   validateOn?: "change" | "blur" | "submit";
   /** Current page for controlled wizard */
   page?: number;
+  /** Format options for number/currency/date display (overrides spec.meta.locale/currency) */
+  formatOptions?: FormatOptions;
 }
 
 /**
@@ -240,6 +244,13 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
       validateOn = "blur",
     } = props;
 
+    // Resolve format options: prop override > spec.meta > defaults
+    const resolvedFormatOptions = useMemo<FormatOptions>(() => ({
+      locale: props.formatOptions?.locale ?? spec.meta.locale,
+      currency: props.formatOptions?.currency ?? spec.meta.currency,
+      nullDisplay: props.formatOptions?.nullDisplay ?? "—",
+    }), [props.formatOptions, spec.meta.locale, spec.meta.currency]);
+
     const forma = useForma({
       spec,
       initialData,
@@ -396,6 +407,7 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
           | SelectFieldProps
           | ArrayFieldProps
           | DisplayFieldProps
+          | ComputedFieldProps
           | MatrixFieldProps = baseProps;
 
         if (fieldType === "number" || fieldType === "integer") {
@@ -515,6 +527,13 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
           const sourceValue = fieldDef.source
             ? (formaData[fieldDef.source] ?? formaComputed[fieldDef.source])
             : undefined;
+          // Resolve format: display field's own format takes priority,
+          // fall back to the source computed field's format
+          const format =
+            fieldDef.format ??
+            (fieldDef.source
+              ? spec.computed?.[fieldDef.source]?.format
+              : undefined);
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           const {
             onChange: _onChange,
@@ -526,8 +545,22 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
             fieldType: "display",
             content: fieldDef.content,
             sourceValue,
-            format: fieldDef.format,
+            format,
+            formatOptions: resolvedFormatOptions,
           } as DisplayFieldProps;
+        } else if (fieldType === "computed" && fieldDef.type === "computed") {
+          // Computed fields (read-only calculated values)
+          const computedDef = spec.computed?.[fieldPath];
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { onChange: _onChangeC, ...computedBaseProps } = baseProps;
+          fieldProps = {
+            ...computedBaseProps,
+            fieldType: "computed",
+            value: formaComputed[fieldPath],
+            expression: computedDef?.expression ?? "",
+            format: computedDef?.format,
+            formatOptions: resolvedFormatOptions,
+          } as ComputedFieldProps;
         } else {
           // Text-based fields
           fieldProps = {
@@ -581,6 +614,7 @@ export const FormRenderer = forwardRef<FormRendererHandle, FormRendererProps>(
         formaErrors,
         formaIsSubmitted,
         validateOn,
+        resolvedFormatOptions,
         setFieldValue,
         setFieldTouched,
         getArrayHelpers,

package/src/__tests__/defaults/components.test.tsx

@@ -671,6 +671,120 @@ describe("ComputedDisplay", () => {
     );
     expect(screen.getByText('{"a":1}')).toBeInTheDocument();
   });
+
+  it("formats value with currency format", () => {
+    render(
+      <ComputedDisplay
+        field={makeComputedProps({ value: 1234.56, format: "currency" })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("$1,234.56")).toBeInTheDocument();
+  });
+
+  it("formats value with percent format", () => {
+    render(
+      <ComputedDisplay
+        field={makeComputedProps({ value: 0.5, format: "percent" })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("50%")).toBeInTheDocument();
+  });
+
+  it("formats value with decimal format", () => {
+    render(
+      <ComputedDisplay
+        field={makeComputedProps({ value: 99.999, format: "decimal(2)" })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("100.00")).toBeInTheDocument();
+  });
+
+  it("still shows em-dash for null even with format", () => {
+    render(
+      <ComputedDisplay
+        field={makeComputedProps({ value: null, format: "currency" })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("\u2014")).toBeInTheDocument();
+  });
+
+  it("still shows em-dash for undefined even with format", () => {
+    render(
+      <ComputedDisplay
+        field={makeComputedProps({ value: undefined, format: "currency" })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("\u2014")).toBeInTheDocument();
+  });
+
+  it("renders plain string without format", () => {
+    render(
+      <ComputedDisplay
+        field={makeComputedProps({ value: 42 })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("formats zero with currency (does not show em-dash)", () => {
+    render(
+      <ComputedDisplay
+        field={makeComputedProps({ value: 0, format: "currency" })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("$0.00")).toBeInTheDocument();
+  });
+
+  it("formats boolean without format as string", () => {
+    render(
+      <ComputedDisplay
+        field={makeComputedProps({ value: false })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("false")).toBeInTheDocument();
+  });
+
+  it("formats currency with locale/currency from formatOptions", () => {
+    render(
+      <ComputedDisplay
+        field={makeComputedProps({
+          value: 25444.40,
+          format: "currency",
+          formatOptions: { locale: "sv-SE", currency: "SEK" },
+        })}
+        spec={mockSpec}
+      />,
+    );
+    const text = screen.getByText((content) =>
+      content.includes("25") && content.includes("444") && content.includes("kr"),
+    );
+    expect(text).toBeInTheDocument();
+  });
+
+  it("formats currency with EUR locale from formatOptions", () => {
+    render(
+      <ComputedDisplay
+        field={makeComputedProps({
+          value: 1000,
+          format: "currency",
+          formatOptions: { locale: "de-DE", currency: "EUR" },
+        })}
+        spec={mockSpec}
+      />,
+    );
+    const text = screen.getByText((content) =>
+      content.includes("1.000") && content.includes("€"),
+    );
+    expect(text).toBeInTheDocument();
+  });
 });
 
 // ============================================================================
@@ -707,6 +821,148 @@ describe("DisplayField", () => {
     );
     expect(screen.getByText("Dynamic value")).toBeInTheDocument();
   });
+
+  it("formats sourceValue with currency format", () => {
+    render(
+      <DisplayField
+        field={makeDisplayProps({
+          sourceValue: 1234.56,
+          format: "currency",
+          content: "Fallback",
+        })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("$1,234.56")).toBeInTheDocument();
+  });
+
+  it("formats sourceValue with percent format", () => {
+    render(
+      <DisplayField
+        field={makeDisplayProps({
+          sourceValue: 0.75,
+          format: "percent",
+          content: "Fallback",
+        })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("75%")).toBeInTheDocument();
+  });
+
+  it("formats sourceValue with decimal format", () => {
+    render(
+      <DisplayField
+        field={makeDisplayProps({
+          sourceValue: 123.456,
+          format: "decimal(1)",
+          content: "Fallback",
+        })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("123.5")).toBeInTheDocument();
+  });
+
+  it("shows em-dash for null sourceValue with format", () => {
+    render(
+      <DisplayField
+        field={makeDisplayProps({
+          sourceValue: null,
+          format: "currency",
+          content: "Fallback",
+        })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("\u2014")).toBeInTheDocument();
+  });
+
+  it("shows em-dash for undefined sourceValue with format", () => {
+    render(
+      <DisplayField
+        field={makeDisplayProps({
+          sourceValue: undefined,
+          format: "currency",
+        })}
+        spec={mockSpec}
+      />,
+    );
+    // sourceValue is undefined → falls through to content
+    expect(screen.getByText("Hello world")).toBeInTheDocument();
+  });
+
+  it("falls back to string for non-numeric sourceValue with currency format", () => {
+    render(
+      <DisplayField
+        field={makeDisplayProps({
+          sourceValue: "not a number",
+          format: "currency",
+        })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("not a number")).toBeInTheDocument();
+  });
+
+  it("formats sourceValue without format as plain string", () => {
+    render(
+      <DisplayField
+        field={makeDisplayProps({
+          sourceValue: 42,
+        })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("formats zero sourceValue with currency (does not skip rendering)", () => {
+    render(
+      <DisplayField
+        field={makeDisplayProps({
+          sourceValue: 0,
+          format: "currency",
+        })}
+        spec={mockSpec}
+      />,
+    );
+    expect(screen.getByText("$0.00")).toBeInTheDocument();
+  });
+
+  it("formats currency with locale/currency from formatOptions", () => {
+    render(
+      <DisplayField
+        field={makeDisplayProps({
+          sourceValue: 209550,
+          format: "currency",
+          formatOptions: { locale: "sv-SE", currency: "SEK" },
+        })}
+        spec={mockSpec}
+      />,
+    );
+    const text = screen.getByText((content) =>
+      content.includes("209") && content.includes("550") && content.includes("kr"),
+    );
+    expect(text).toBeInTheDocument();
+  });
+
+  it("formats currency with EUR locale", () => {
+    render(
+      <DisplayField
+        field={makeDisplayProps({
+          sourceValue: 1234.56,
+          format: "currency",
+          formatOptions: { locale: "de-DE", currency: "EUR" },
+        })}
+        spec={mockSpec}
+      />,
+    );
+    const text = screen.getByText((content) =>
+      content.includes("1.234,56") || (content.includes("1234") && content.includes("€")),
+    );
+    expect(text).toBeInTheDocument();
+  });
 });
 
 // ============================================================================

package/src/__tests__/defaults/integration.test.tsx

@@ -491,4 +491,136 @@ describe("Disabled field integration", () => {
 
     expect(screen.getByLabelText("Name")).toBeDisabled();
   });
+
+  it("display field inherits format from source computed field", () => {
+    const spec = createTestSpec({
+      fields: {
+        totalDisplay: {
+          type: "display",
+          label: "Total",
+          source: "total",
+        },
+      },
+      computed: {
+        total: {
+          expression: "42",
+          format: "currency",
+        },
+      },
+    });
+
+    // Provide initial data with the computed value already resolved
+    render(
+      <DefaultFormRenderer
+        spec={spec}
+        onSubmit={vi.fn()}
+        initialData={{ total: 1234.56 }}
+      />,
+    );
+
+    // The display field should inherit "currency" format from computed.total
+    expect(screen.getByText("$1,234.56")).toBeInTheDocument();
+  });
+
+  it("display field's own format takes priority over computed source format", () => {
+    const spec = createTestSpec({
+      fields: {
+        totalDisplay: {
+          type: "display",
+          label: "Total",
+          source: "total",
+          format: "percent",
+        },
+      },
+      computed: {
+        total: {
+          expression: "42",
+          format: "currency",
+        },
+      },
+    });
+
+    render(
+      <DefaultFormRenderer
+        spec={spec}
+        onSubmit={vi.fn()}
+        initialData={{ total: 0.75 }}
+      />,
+    );
+
+    // Display field's own format "percent" should win over computed "currency"
+    expect(screen.getByText("75%")).toBeInTheDocument();
+  });
+});
+
+// ============================================================================
+// Spec-Level Locale/Currency Integration
+// ============================================================================
+describe("Spec-level locale/currency", () => {
+  it("display field uses spec.meta.locale and spec.meta.currency for formatting", () => {
+    const spec = createTestSpec({
+      meta: { locale: "sv-SE", currency: "SEK" },
+      fields: {
+        totalDisplay: {
+          type: "display",
+          label: "Total",
+          source: "total",
+        },
+      },
+      computed: {
+        total: {
+          expression: "42",
+          format: "currency",
+        },
+      },
+    });
+
+    render(
+      <DefaultFormRenderer
+        spec={spec}
+        onSubmit={vi.fn()}
+        initialData={{ total: 209550 }}
+      />,
+    );
+
+    // Should render with Swedish locale and SEK currency, not USD
+    const text = screen.getByText((content) =>
+      content.includes("209") && content.includes("550") && content.includes("kr"),
+    );
+    expect(text).toBeInTheDocument();
+  });
+
+  it("formatOptions prop overrides spec.meta locale/currency", () => {
+    const spec = createTestSpec({
+      meta: { locale: "sv-SE", currency: "SEK" },
+      fields: {
+        totalDisplay: {
+          type: "display",
+          label: "Total",
+          source: "total",
+        },
+      },
+      computed: {
+        total: {
+          expression: "42",
+          format: "currency",
+        },
+      },
+    });
+
+    render(
+      <DefaultFormRenderer
+        spec={spec}
+        onSubmit={vi.fn()}
+        initialData={{ total: 1000 }}
+        formatOptions={{ locale: "de-DE", currency: "EUR" }}
+      />,
+    );
+
+    // Should render with German locale and EUR, overriding spec meta
+    const text = screen.getByText((content) =>
+      content.includes("1.000") && content.includes("€"),
+    );
+    expect(text).toBeInTheDocument();
+  });
 });

package/src/__tests__/test-utils.tsx

@@ -25,12 +25,13 @@ export function createTestSpec(
   options: {
     fields?: Record<string, { type: string; [key: string]: unknown }>;
     fieldOrder?: string[];
-    computed?: Record<string, { expression: string }>;
+    computed?: Record<string, { expression: string; format?: string }>;
     pages?: PageDefinition[];
     referenceData?: Record<string, unknown>;
+    meta?: Partial<Forma["meta"]>;
   } = {},
 ): Forma {
-  const { fields = {}, fieldOrder, computed, pages, referenceData } = options;
+  const { fields = {}, fieldOrder, computed, pages, referenceData, meta } = options;
 
   // Build schema from fields
   const schemaProperties: Record<string, unknown> = {};
@@ -113,6 +114,7 @@ export function createTestSpec(
     meta: {
       id: "test-form",
       title: "Test Form",
+      ...meta,
     },
     schema: {
       type: "object",

package/src/defaults/components/ComputedDisplay.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { formatValue } from "@fogpipe/forma-core";
 import type { ComputedComponentProps } from "../../types.js";
 
 export function ComputedDisplay({ field }: ComputedComponentProps) {
@@ -12,7 +13,7 @@ export function ComputedDisplay({ field }: ComputedComponentProps) {
       displayValue = String(field.value);
     }
   } else {
-    displayValue = String(field.value);
+    displayValue = formatValue(field.value, field.format, field.formatOptions);
   }
 
   return (

package/src/defaults/components/DisplayField.tsx

@@ -1,10 +1,17 @@
 import React from "react";
+import type { FormatOptions } from "@fogpipe/forma-core";
+import { formatValue } from "@fogpipe/forma-core";
 import type { DisplayComponentProps } from "../../types.js";
 
+const FORMAT_DEFAULTS: FormatOptions = { nullDisplay: "\u2014" };
+
 export function DisplayField({ field }: DisplayComponentProps) {
+  const options = field.formatOptions
+    ? { ...FORMAT_DEFAULTS, ...field.formatOptions }
+    : FORMAT_DEFAULTS;
   const content =
     field.sourceValue !== undefined
-      ? String(field.sourceValue)
+      ? formatValue(field.sourceValue, field.format, options)
       : field.content;
 
   return (

package/src/types.ts

@@ -6,6 +6,7 @@ import type {
   Forma,
   FieldDefinition,
   FieldError,
+  FormatOptions,
   MatrixColumn,
   SelectOption,
 } from "@fogpipe/forma-core";
@@ -276,6 +277,10 @@ export interface ComputedFieldProps extends Omit<BaseFieldProps, "onChange"> {
   fieldType: "computed";
   value: unknown;
   expression: string;
+  /** Display format string (e.g., "currency", "percent", "decimal(2)") */
+  format?: string;
+  /** Resolved format options (locale, currency) for number/date formatting */
+  formatOptions?: FormatOptions;
   onChange?: never;
 }
 
@@ -312,6 +317,8 @@ export interface DisplayFieldProps extends Omit<
   sourceValue?: unknown;
   /** Display format string */
   format?: string;
+  /** Resolved format options (locale, currency) for number/date formatting */
+  formatOptions?: FormatOptions;
   /** No onChange - display fields are read-only */
   onChange?: never;
   value?: never;