@fogpipe/forma-react 0.11.1 → 0.12.0-alpha.1

package/dist/index.d.ts

@@ -34,12 +34,22 @@ interface BaseFieldProps {
     visible: boolean;
     /** Whether field is enabled (inverse of disabled) */
     enabled: boolean;
+    /** Whether field is readonly (visible, not editable, value still submitted) */
+    readonly: boolean;
     /** Display label from field definition */
     label: string;
     /** Help text or description from field definition */
     description?: string;
     /** Placeholder text from field definition */
     placeholder?: string;
+    /** Prefix adorner text (e.g., "$") - only for adornable field types */
+    prefix?: string;
+    /** Suffix adorner text (e.g., "kg") - only for adornable field types */
+    suffix?: string;
+    /** Presentation variant hint (e.g., "slider", "radio", "nps") */
+    variant?: string;
+    /** Variant-specific configuration */
+    variantConfig?: Record<string, unknown>;
 }
 /**
  * Props for text-based fields (text, email, password, url, textarea)
@@ -226,10 +236,25 @@ interface ArrayItemFieldProps extends Omit<BaseFieldProps, "value" | "onChange">
     /** Field name within the item */
     fieldName: string;
 }
+/**
+ * Props for display fields (read-only presentation content)
+ */
+interface DisplayFieldProps extends Omit<BaseFieldProps, "value" | "onChange"> {
+    fieldType: "display";
+    /** Static content (markdown/text) */
+    content?: string;
+    /** Computed source value (resolved by useForma from display field's source property) */
+    sourceValue?: unknown;
+    /** Display format string */
+    format?: string;
+    /** No onChange - display fields are read-only */
+    onChange?: never;
+    value?: never;
+}
 /**
  * Union of all field prop types
  */
-type FieldProps = TextFieldProps | NumberFieldProps | IntegerFieldProps | BooleanFieldProps | DateFieldProps | DateTimeFieldProps | SelectFieldProps | MultiSelectFieldProps | ArrayFieldProps | ObjectFieldProps | ComputedFieldProps;
+type FieldProps = TextFieldProps | NumberFieldProps | IntegerFieldProps | BooleanFieldProps | DateFieldProps | DateTimeFieldProps | SelectFieldProps | MultiSelectFieldProps | ArrayFieldProps | ObjectFieldProps | ComputedFieldProps | DisplayFieldProps;
 /**
  * Map of field types to React components
  * Components receive wrapper props with { field, spec } structure
@@ -250,6 +275,7 @@ interface ComponentMap {
     array?: React.ComponentType<ArrayComponentProps>;
     object?: React.ComponentType<ObjectComponentProps>;
     computed?: React.ComponentType<ComputedComponentProps>;
+    display?: React.ComponentType<DisplayComponentProps>;
     fallback?: React.ComponentType<FieldComponentProps>;
 }
 /**
@@ -338,6 +364,10 @@ interface ComputedComponentProps {
     field: ComputedFieldProps;
     spec: Forma;
 }
+interface DisplayComponentProps {
+    field: DisplayFieldProps;
+    spec: Forma;
+}
 /**
  * Generic field component props (for fallback/dynamic components)
  */
@@ -367,6 +397,8 @@ interface GetFieldPropsResult {
     visible: boolean;
     /** Whether field is enabled (not disabled) */
     enabled: boolean;
+    /** Whether field is readonly (visible, not editable, value still submitted) */
+    readonly: boolean;
     /** Whether field is required (for validation) */
     required: boolean;
     /**
@@ -390,6 +422,14 @@ interface GetFieldPropsResult {
     "aria-required"?: boolean;
     /** Options for select/multiselect fields (filtered by visibleWhen) */
     options?: SelectOption[];
+    /** Prefix adorner text (e.g., "$") */
+    prefix?: string;
+    /** Suffix adorner text (e.g., "kg") */
+    suffix?: string;
+    /** Presentation variant hint */
+    variant?: string;
+    /** Variant-specific configuration */
+    variantConfig?: Record<string, unknown>;
 }
 /**
  * Select field props returned by getSelectFieldProps()
@@ -501,6 +541,8 @@ interface UseFormaReturn {
     required: Record<string, boolean>;
     /** Field enabled state map */
     enabled: Record<string, boolean>;
+    /** Field readonly state map */
+    readonly: Record<string, boolean>;
     /** Visible options for select/multiselect fields, keyed by field path */
     optionsVisibility: OptionsVisibilityResult;
     /** Field touched state map */
@@ -680,4 +722,4 @@ declare const FormaContext: React$1.Context<UseFormaReturn | null>;
  */
 declare function useFormaContext(): UseFormaReturn;
 
-export { type ArrayComponentProps, type ArrayFieldProps, type ArrayHelpers, type ArrayItemFieldProps, type ArrayItemFieldPropsResult, type BaseFieldProps, type BooleanComponentProps, type BooleanFieldProps, type ComponentMap, type ComputedComponentProps, type ComputedFieldProps, type DateComponentProps, type DateFieldProps, type DateTimeComponentProps, type DateTimeFieldProps, type FieldComponentProps, type FieldProps, FieldRenderer, type FieldRendererProps, type FieldWrapperProps, FormRenderer, type FormRendererHandle, type FormRendererProps, type UseFormaReturn as FormState, FormaContext, FormaErrorBoundary, type FormaErrorBoundaryProps, type GetArrayHelpersResult, type GetFieldPropsResult, type GetSelectFieldPropsResult, type IntegerComponentProps, type IntegerFieldProps, type LayoutProps, type LegacyFieldProps, type MultiSelectComponentProps, type MultiSelectFieldProps, type NumberComponentProps, type NumberFieldProps, type ObjectComponentProps, type ObjectFieldProps, type PageState, type PageWrapperProps, type SelectComponentProps, type SelectFieldProps, type SelectionFieldProps, type TextComponentProps, type TextFieldProps, type UseFormaOptions, type UseFormaReturn, type WizardHelpers, useForma, useFormaContext };
+export { type ArrayComponentProps, type ArrayFieldProps, type ArrayHelpers, type ArrayItemFieldProps, type ArrayItemFieldPropsResult, type BaseFieldProps, type BooleanComponentProps, type BooleanFieldProps, type ComponentMap, type ComputedComponentProps, type ComputedFieldProps, type DateComponentProps, type DateFieldProps, type DateTimeComponentProps, type DateTimeFieldProps, type DisplayComponentProps, type DisplayFieldProps, type FieldComponentProps, type FieldProps, FieldRenderer, type FieldRendererProps, type FieldWrapperProps, FormRenderer, type FormRendererHandle, type FormRendererProps, type UseFormaReturn as FormState, FormaContext, FormaErrorBoundary, type FormaErrorBoundaryProps, type GetArrayHelpersResult, type GetFieldPropsResult, type GetSelectFieldPropsResult, type IntegerComponentProps, type IntegerFieldProps, type LayoutProps, type LegacyFieldProps, type MultiSelectComponentProps, type MultiSelectFieldProps, type NumberComponentProps, type NumberFieldProps, type ObjectComponentProps, type ObjectFieldProps, type PageState, type PageWrapperProps, type SelectComponentProps, type SelectFieldProps, type SelectionFieldProps, type TextComponentProps, type TextFieldProps, type UseFormaOptions, type UseFormaReturn, type WizardHelpers, useForma, useFormaContext };

package/dist/index.js

@@ -1,9 +1,11 @@
 // src/useForma.ts
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { isAdornableField } from "@fogpipe/forma-core";
 import {
   getVisibility,
   getRequired,
   getEnabled,
+  getReadonly,
   validate,
   calculate,
   getPageVisibility,
@@ -103,6 +105,10 @@ function useForma(options) {
     () => getEnabled(state.data, spec, { computed }),
     [state.data, spec, computed]
   );
+  const readonly = useMemo(
+    () => getReadonly(state.data, spec, { computed }),
+    [state.data, spec, computed]
+  );
   const optionsVisibility = useMemo(
     () => getOptionsVisibility(state.data, spec, { computed }),
     [state.data, spec, computed]
@@ -300,7 +306,7 @@ function useForma(options) {
     const validFields = new Set(spec.fieldOrder);
     for (const fieldId of spec.fieldOrder) {
       const fieldDef = spec.fields[fieldId];
-      if (fieldDef == null ? void 0 : fieldDef.itemFields) {
+      if ((fieldDef == null ? void 0 : fieldDef.type) === "array" && fieldDef.itemFields) {
         for (const key of fieldHandlers.current.keys()) {
           if (key.startsWith(`${fieldId}[`)) {
             validFields.add(key);
@@ -356,6 +362,7 @@ function useForma(options) {
     const isBooleanField = (schemaProperty == null ? void 0 : schemaProperty.type) === "boolean" || (fieldDef == null ? void 0 : fieldDef.type) === "boolean";
     const hasValidationRules = (((_a = fieldDef == null ? void 0 : fieldDef.validations) == null ? void 0 : _a.length) ?? 0) > 0;
     const showRequiredIndicator = isRequired && (!isBooleanField || hasValidationRules);
+    const adornerProps = fieldDef && isAdornableField(fieldDef) ? { prefix: fieldDef.prefix, suffix: fieldDef.suffix } : {};
     return {
       name: path,
       value: getValueAtPath(path),
@@ -365,6 +372,7 @@ function useForma(options) {
       placeholder: fieldDef == null ? void 0 : fieldDef.placeholder,
       visible: visibility[path] !== false,
       enabled: enabled[path] !== false,
+      readonly: readonly[path] ?? false,
       required: isRequired,
       showRequiredIndicator,
       touched: isTouched,
@@ -374,9 +382,14 @@ function useForma(options) {
       // ARIA accessibility attributes
       "aria-invalid": hasErrors || void 0,
       "aria-describedby": hasErrors ? `${path}-error` : void 0,
-      "aria-required": isRequired || void 0
+      "aria-required": isRequired || void 0,
+      // Adorner props (only for adornable field types)
+      ...adornerProps,
+      // Presentation variant
+      variant: fieldDef == null ? void 0 : fieldDef.variant,
+      variantConfig: fieldDef == null ? void 0 : fieldDef.variantConfig
     };
-  }, [spec, state.touched, state.isSubmitted, visibility, enabled, required, validation.errors, validateOn, getValueAtPath, getFieldHandlers]);
+  }, [spec, state.touched, state.isSubmitted, visibility, enabled, readonly, required, validation.errors, validateOn, getValueAtPath, getFieldHandlers]);
   const getSelectFieldProps = useCallback((path) => {
     const baseProps = getFieldProps(path);
     const visibleOptions = optionsVisibility[path] ?? [];
@@ -388,14 +401,15 @@ function useForma(options) {
   const getArrayHelpers = useCallback((path) => {
     const fieldDef = spec.fields[path];
     const currentValue = getValueAtPath(path) ?? [];
-    const minItems = (fieldDef == null ? void 0 : fieldDef.minItems) ?? 0;
-    const maxItems = (fieldDef == null ? void 0 : fieldDef.maxItems) ?? Infinity;
+    const arrayDef = (fieldDef == null ? void 0 : fieldDef.type) === "array" ? fieldDef : void 0;
+    const minItems = (arrayDef == null ? void 0 : arrayDef.minItems) ?? 0;
+    const maxItems = (arrayDef == null ? void 0 : arrayDef.maxItems) ?? Infinity;
     const canAdd = currentValue.length < maxItems;
     const canRemove = currentValue.length > minItems;
     const getItemFieldProps = (index, fieldName) => {
       var _a;
       const itemPath = `${path}[${index}].${fieldName}`;
-      const itemFieldDef = (_a = fieldDef == null ? void 0 : fieldDef.itemFields) == null ? void 0 : _a[fieldName];
+      const itemFieldDef = (_a = arrayDef == null ? void 0 : arrayDef.itemFields) == null ? void 0 : _a[fieldName];
       const handlers = getFieldHandlers(itemPath);
       const item = currentValue[index] ?? {};
       const itemValue = item[fieldName];
@@ -412,6 +426,7 @@ function useForma(options) {
         placeholder: itemFieldDef == null ? void 0 : itemFieldDef.placeholder,
         visible: true,
         enabled: enabled[path] !== false,
+        readonly: readonly[itemPath] ?? false,
         required: false,
         // TODO: Evaluate item field required
         showRequiredIndicator: false,
@@ -461,13 +476,14 @@ function useForma(options) {
       canAdd,
       canRemove
     };
-  }, [spec.fields, getValueAtPath, setValueAtPath, getFieldHandlers, enabled, state.touched, state.isSubmitted, validation.errors, validateOn, optionsVisibility]);
+  }, [spec.fields, getValueAtPath, setValueAtPath, getFieldHandlers, enabled, readonly, state.touched, state.isSubmitted, validation.errors, validateOn, optionsVisibility]);
   return {
     data: state.data,
     computed,
     visibility,
     required,
     enabled,
+    readonly,
     optionsVisibility,
     touched: state.touched,
     errors: validation.errors,
@@ -492,6 +508,7 @@ function useForma(options) {
 
 // src/FormRenderer.tsx
 import React, { forwardRef, useImperativeHandle, useRef as useRef2, useMemo as useMemo2, useCallback as useCallback2 } from "react";
+import { isAdornableField as isAdornableField2, isSelectionField } from "@fogpipe/forma-core";
 
 // src/context.ts
 import { createContext, useContext } from "react";
@@ -642,7 +659,7 @@ var FormRenderer = forwardRef(
       if (!fieldDef) return null;
       const isVisible = forma.visibility[fieldPath] !== false;
       if (!isVisible) return null;
-      const fieldType = fieldDef.type || (fieldDef.itemFields ? "array" : "text");
+      const fieldType = fieldDef.type;
       const componentKey = fieldType;
       const Component = components[componentKey] || components.fallback;
       if (!Component) {
@@ -657,6 +674,7 @@ var FormRenderer = forwardRef(
       const isBooleanField = (schemaProperty == null ? void 0 : schemaProperty.type) === "boolean" || (fieldDef == null ? void 0 : fieldDef.type) === "boolean";
       const hasValidationRules = (((_a = fieldDef == null ? void 0 : fieldDef.validations) == null ? void 0 : _a.length) ?? 0) > 0;
       const showRequiredIndicator = required && (!isBooleanField || hasValidationRules);
+      const isReadonly = forma.readonly[fieldPath] ?? false;
       const baseProps = {
         name: fieldPath,
         field: fieldDef,
@@ -671,9 +689,18 @@ var FormRenderer = forwardRef(
         visible: true,
         // Always true since we already filtered for visibility
         enabled: !disabled,
+        readonly: isReadonly,
         label: fieldDef.label ?? fieldPath,
         description: fieldDef.description,
-        placeholder: fieldDef.placeholder
+        placeholder: fieldDef.placeholder,
+        // Adorner properties (only for adornable field types)
+        ...isAdornableField2(fieldDef) && {
+          prefix: fieldDef.prefix,
+          suffix: fieldDef.suffix
+        },
+        // Presentation variant
+        variant: fieldDef.variant,
+        variantConfig: fieldDef.variantConfig
       };
       let fieldProps = baseProps;
       if (fieldType === "number" || fieldType === "integer") {
@@ -686,14 +713,15 @@ var FormRenderer = forwardRef(
           ...constraints
         };
       } else if (fieldType === "select" || fieldType === "multiselect") {
+        const selectOptions = isSelectionField(fieldDef) ? fieldDef.options : [];
         fieldProps = {
           ...baseProps,
           fieldType,
           value: baseProps.value,
           onChange: baseProps.onChange,
-          options: fieldDef.options ?? []
+          options: forma.optionsVisibility[fieldPath] ?? selectOptions ?? []
         };
-      } else if (fieldType === "array" && fieldDef.itemFields) {
+      } else if (fieldType === "array" && fieldDef.type === "array" && fieldDef.itemFields) {
         const arrayValue = Array.isArray(baseProps.value) ? baseProps.value : [];
         const minItems = fieldDef.minItems ?? 0;
         const maxItems = fieldDef.maxItems ?? Infinity;
@@ -706,11 +734,12 @@ var FormRenderer = forwardRef(
         const getItemFieldPropsExtended = (index, fieldName) => {
           const baseProps2 = baseHelpers.getItemFieldProps(index, fieldName);
           const itemFieldDef = itemFieldDefs[fieldName];
+          const itemPath = `${fieldPath}[${index}].${fieldName}`;
           return {
             ...baseProps2,
             itemIndex: index,
             fieldName,
-            options: itemFieldDef == null ? void 0 : itemFieldDef.options
+            options: forma.optionsVisibility[itemPath] ?? (itemFieldDef && isSelectionField(itemFieldDef) ? itemFieldDef.options : void 0)
           };
         };
         const helpers = {
@@ -736,6 +765,16 @@ var FormRenderer = forwardRef(
           minItems,
           maxItems
         };
+      } else if (fieldType === "display" && fieldDef.type === "display") {
+        const sourceValue = fieldDef.source ? forma.data[fieldDef.source] ?? forma.computed[fieldDef.source] : void 0;
+        const { onChange: _onChange, value: _value, ...displayBaseProps } = baseProps;
+        fieldProps = {
+          ...displayBaseProps,
+          fieldType: "display",
+          content: fieldDef.content,
+          sourceValue,
+          format: fieldDef.format
+        };
       } else {
         fieldProps = {
           ...baseProps,
@@ -795,6 +834,7 @@ var FormRenderer = forwardRef(
 
 // src/FieldRenderer.tsx
 import React2 from "react";
+import { isAdornableField as isAdornableField3 } from "@fogpipe/forma-core";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function getNumberConstraints2(schema) {
   if (!schema) return {};
@@ -832,7 +872,7 @@ function FieldRenderer({ fieldPath, components, className }) {
   }
   const isVisible = forma.visibility[fieldPath] !== false;
   if (!isVisible) return null;
-  const fieldType = fieldDef.type || (fieldDef.itemFields ? "array" : "text");
+  const fieldType = fieldDef.type;
   const componentKey = fieldType;
   const Component = components[componentKey] || components.fallback;
   if (!Component) {
@@ -844,6 +884,7 @@ function FieldRenderer({ fieldPath, components, className }) {
   const required = forma.required[fieldPath] ?? false;
   const disabled = forma.enabled[fieldPath] === false;
   const schemaProperty = spec.schema.properties[fieldPath];
+  const isReadonly = forma.readonly[fieldPath] ?? false;
   const baseProps = {
     name: fieldPath,
     field: fieldDef,
@@ -858,9 +899,18 @@ function FieldRenderer({ fieldPath, components, className }) {
     visible: true,
     // Always true since we already filtered for visibility
     enabled: !disabled,
+    readonly: isReadonly,
     label: fieldDef.label ?? fieldPath,
     description: fieldDef.description,
-    placeholder: fieldDef.placeholder
+    placeholder: fieldDef.placeholder,
+    // Adorner properties (only for adornable field types)
+    ...isAdornableField3(fieldDef) && {
+      prefix: fieldDef.prefix,
+      suffix: fieldDef.suffix
+    },
+    // Presentation variant
+    variant: fieldDef.variant,
+    variantConfig: fieldDef.variantConfig
   };
   let fieldProps = baseProps;
   if (fieldType === "number") {
@@ -900,7 +950,7 @@ function FieldRenderer({ fieldPath, components, className }) {
       onChange: baseProps.onChange,
       options: visibleOptions
     };
-  } else if (fieldType === "array" && fieldDef.itemFields) {
+  } else if (fieldType === "array" && fieldDef.type === "array" && fieldDef.itemFields) {
     const arrayValue = baseProps.value ?? [];
     const minItems = fieldDef.minItems ?? 0;
     const maxItems = fieldDef.maxItems ?? Infinity;
@@ -947,6 +997,7 @@ function FieldRenderer({ fieldPath, components, className }) {
           placeholder: itemFieldDef == null ? void 0 : itemFieldDef.placeholder,
           visible: true,
           enabled: !disabled,
+          readonly: forma.readonly[itemPath] ?? false,
           required: (itemFieldDef == null ? void 0 : itemFieldDef.requiredWhen) === "true",
           touched: forma.touched[itemPath] ?? false,
           errors: forma.errors.filter((e) => e.field === itemPath),
@@ -977,6 +1028,16 @@ function FieldRenderer({ fieldPath, components, className }) {
       minItems,
       maxItems
     };
+  } else if (fieldType === "display" && fieldDef.type === "display") {
+    const sourceValue = fieldDef.source ? forma.data[fieldDef.source] ?? forma.computed[fieldDef.source] : void 0;
+    const { onChange: _onChange, value: _value, ...displayBaseProps } = baseProps;
+    fieldProps = {
+      ...displayBaseProps,
+      fieldType: "display",
+      content: fieldDef.content,
+      sourceValue,
+      format: fieldDef.format
+    };
   } else {
     fieldProps = {
       ...baseProps,