@fogpipe/forma-react 0.12.0-alpha.2 → 0.13.0

package/README.md

@@ -25,22 +25,28 @@ npm install @fogpipe/forma-core @fogpipe/forma-react
 Components receive `{ field, spec }` props. The `field` object contains all field state and handlers:
 
 ```tsx
-import type { ComponentMap, TextComponentProps, BooleanComponentProps } from '@fogpipe/forma-react';
+import type {
+  ComponentMap,
+  TextComponentProps,
+  BooleanComponentProps,
+} from "@fogpipe/forma-react";
 
 const TextInput = ({ field }: TextComponentProps) => (
   <div>
     <input
       type="text"
-      value={field.value || ''}
+      value={field.value || ""}
       onChange={(e) => field.onChange(e.target.value)}
       onBlur={field.onBlur}
       placeholder={field.placeholder}
-      aria-invalid={field['aria-invalid']}
-      aria-describedby={field['aria-describedby']}
-      aria-required={field['aria-required']}
+      aria-invalid={field["aria-invalid"]}
+      aria-describedby={field["aria-describedby"]}
+      aria-required={field["aria-required"]}
     />
     {field.errors.map((e, i) => (
-      <span key={i} className="error">{e.message}</span>
+      <span key={i} className="error">
+        {e.message}
+      </span>
     ))}
   </div>
 );
@@ -67,21 +73,21 @@ const components: ComponentMap = {
 ### 2. Render the Form
 
 ```tsx
-import { FormRenderer } from '@fogpipe/forma-react';
-import type { Forma } from '@fogpipe/forma-core';
+import { FormRenderer } from "@fogpipe/forma-react";
+import type { Forma } from "@fogpipe/forma-core";
 
 const myForm: Forma = {
   meta: { title: "Contact Us" },
   fields: [
     { id: "name", type: "text", label: "Name", required: true },
     { id: "email", type: "email", label: "Email", required: true },
-    { id: "subscribe", type: "boolean", label: "Subscribe to newsletter" }
-  ]
+    { id: "subscribe", type: "boolean", label: "Subscribe to newsletter" },
+  ],
 };
 
 function App() {
   const handleSubmit = (data: Record<string, unknown>) => {
-    console.log('Submitted:', data);
+    console.log("Submitted:", data);
   };
 
   return (
@@ -99,7 +105,7 @@ function App() {
 For custom rendering, use the `useForma` hook directly:
 
 ```tsx
-import { useForma } from '@fogpipe/forma-react';
+import { useForma } from "@fogpipe/forma-react";
 
 function CustomForm({ spec }: { spec: Forma }) {
   const {
@@ -114,19 +120,24 @@ function CustomForm({ spec }: { spec: Forma }) {
     submitForm,
   } = useForma({
     spec,
-    onSubmit: (data) => console.log(data)
+    onSubmit: (data) => console.log(data),
   });
 
   return (
-    <form onSubmit={(e) => { e.preventDefault(); submitForm(); }}>
-      {spec.fields.map(field => {
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        submitForm();
+      }}
+    >
+      {spec.fields.map((field) => {
         if (!visibility[field.id]) return null;
 
         return (
           <div key={field.id}>
             <label>{field.label}</label>
             <input
-              value={String(data[field.id] || '')}
+              value={String(data[field.id] || "")}
               onChange={(e) => setFieldValue(field.id, e.target.value)}
               onBlur={() => setFieldTouched(field.id)}
             />
@@ -154,11 +165,13 @@ function WizardForm({ spec }: { spec: Forma }) {
   return (
     <div>
       {/* Page indicator */}
-      <div>Page {wizard.currentPageIndex + 1} of {wizard.pages.length}</div>
+      <div>
+        Page {wizard.currentPageIndex + 1} of {wizard.pages.length}
+      </div>
 
       {/* Current page fields */}
-      {wizard.currentPage?.fields.map(fieldId => {
-        const field = spec.fields.find(f => f.id === fieldId);
+      {wizard.currentPage?.fields.map((fieldId) => {
+        const field = spec.fields.find((f) => f.id === fieldId);
         if (!field) return null;
         // Render field...
       })}
@@ -184,16 +197,16 @@ function WizardForm({ spec }: { spec: Forma }) {
 
 ### FormRenderer Props
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `spec` | `Forma` | The Forma specification |
-| `components` | `ComponentMap` | Map of field types to components |
-| `initialData` | `Record<string, unknown>` | Initial form values |
-| `onSubmit` | `(data) => void` | Submit handler |
-| `onChange` | `(data, computed) => void` | Change handler |
-| `layout` | `React.ComponentType<LayoutProps>` | Custom layout |
-| `fieldWrapper` | `React.ComponentType<FieldWrapperProps>` | Custom field wrapper |
-| `validateOn` | `"change" \| "blur" \| "submit"` | Validation timing |
+| Prop           | Type                                     | Description                      |
+| -------------- | ---------------------------------------- | -------------------------------- |
+| `spec`         | `Forma`                                  | The Forma specification          |
+| `components`   | `ComponentMap`                           | Map of field types to components |
+| `initialData`  | `Record<string, unknown>`                | Initial form values              |
+| `onSubmit`     | `(data) => void`                         | Submit handler                   |
+| `onChange`     | `(data, computed) => void`               | Change handler                   |
+| `layout`       | `React.ComponentType<LayoutProps>`       | Custom layout                    |
+| `fieldWrapper` | `React.ComponentType<FieldWrapperProps>` | Custom field wrapper             |
+| `validateOn`   | `"change" \| "blur" \| "submit"`         | Validation timing                |
 
 ### FormRenderer Ref
 
@@ -211,55 +224,55 @@ formRef.current?.setValues({ name: "John" });
 
 ### useForma Return Value
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `data` | `Record<string, unknown>` | Current form values |
-| `computed` | `Record<string, unknown>` | Computed field values |
-| `visibility` | `Record<string, boolean>` | Field visibility map |
-| `required` | `Record<string, boolean>` | Field required state |
-| `enabled` | `Record<string, boolean>` | Field enabled state |
-| `errors` | `FieldError[]` | Validation errors |
-| `isValid` | `boolean` | Form validity |
-| `isSubmitting` | `boolean` | Submission in progress |
-| `isDirty` | `boolean` | Any field modified |
-| `wizard` | `WizardHelpers \| null` | Wizard navigation |
+| Property       | Type                      | Description            |
+| -------------- | ------------------------- | ---------------------- |
+| `data`         | `Record<string, unknown>` | Current form values    |
+| `computed`     | `Record<string, unknown>` | Computed field values  |
+| `visibility`   | `Record<string, boolean>` | Field visibility map   |
+| `required`     | `Record<string, boolean>` | Field required state   |
+| `enabled`      | `Record<string, boolean>` | Field enabled state    |
+| `errors`       | `FieldError[]`            | Validation errors      |
+| `isValid`      | `boolean`                 | Form validity          |
+| `isSubmitting` | `boolean`                 | Submission in progress |
+| `isDirty`      | `boolean`                 | Any field modified     |
+| `wizard`       | `WizardHelpers \| null`   | Wizard navigation      |
 
 ### useForma Methods
 
-| Method | Description |
-|--------|-------------|
-| `setFieldValue(path, value)` | Set field value |
-| `setFieldTouched(path, touched?)` | Mark field as touched |
-| `setValues(values)` | Set multiple values |
-| `validateField(path)` | Validate single field |
-| `validateForm()` | Validate entire form |
-| `submitForm()` | Submit the form |
-| `resetForm()` | Reset to initial values |
+| Method                            | Description             |
+| --------------------------------- | ----------------------- |
+| `setFieldValue(path, value)`      | Set field value         |
+| `setFieldTouched(path, touched?)` | Mark field as touched   |
+| `setValues(values)`               | Set multiple values     |
+| `validateField(path)`             | Validate single field   |
+| `validateForm()`                  | Validate entire form    |
+| `submitForm()`                    | Submit the form         |
+| `resetForm()`                     | Reset to initial values |
 
 ### useForma Options
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `spec` | `Forma` | required | The Forma specification |
-| `initialData` | `Record<string, unknown>` | `{}` | Initial form values |
-| `onSubmit` | `(data) => void` | - | Submit handler |
-| `onChange` | `(data, computed) => void` | - | Change handler |
-| `validateOn` | `"change" \| "blur" \| "submit"` | `"blur"` | When to validate |
-| `referenceData` | `Record<string, unknown>` | - | Additional reference data |
-| `validationDebounceMs` | `number` | `0` | Debounce validation (ms) |
+| Option                 | Type                             | Default  | Description               |
+| ---------------------- | -------------------------------- | -------- | ------------------------- |
+| `spec`                 | `Forma`                          | required | The Forma specification   |
+| `initialData`          | `Record<string, unknown>`        | `{}`     | Initial form values       |
+| `onSubmit`             | `(data) => void`                 | -        | Submit handler            |
+| `onChange`             | `(data, computed) => void`       | -        | Change handler            |
+| `validateOn`           | `"change" \| "blur" \| "submit"` | `"blur"` | When to validate          |
+| `referenceData`        | `Record<string, unknown>`        | -        | Additional reference data |
+| `validationDebounceMs` | `number`                         | `0`      | Debounce validation (ms)  |
 
 ## Error Boundary
 
 Wrap forms with `FormaErrorBoundary` to catch render errors gracefully:
 
 ```tsx
-import { FormRenderer, FormaErrorBoundary } from '@fogpipe/forma-react';
+import { FormRenderer, FormaErrorBoundary } from "@fogpipe/forma-react";
 
 function App() {
   return (
     <FormaErrorBoundary
       fallback={<div>Something went wrong with the form</div>}
-      onError={(error) => console.error('Form error:', error)}
+      onError={(error) => console.error("Form error:", error)}
     >
       <FormRenderer spec={myForm} components={components} />
     </FormaErrorBoundary>
@@ -268,6 +281,7 @@ function App() {
 ```
 
 The error boundary supports:
+
 - Custom fallback UI (static or function)
 - `onError` callback for logging
 - `resetKey` prop to reset error state

package/dist/index.js

@@ -72,6 +72,15 @@ function getDefaultBooleanValues(spec) {
   }
   return defaults;
 }
+function getFieldDefaults(spec) {
+  const defaults = {};
+  for (const [fieldPath, fieldDef] of Object.entries(spec.fields)) {
+    if (fieldDef.defaultValue !== void 0) {
+      defaults[fieldPath] = fieldDef.defaultValue;
+    }
+  }
+  return defaults;
+}
 function useForma(options) {
   const {
     spec: inputSpec,
@@ -93,8 +102,11 @@ function useForma(options) {
     };
   }, [inputSpec, referenceData]);
   const [state, dispatch] = useReducer(formReducer, {
-    data: { ...getDefaultBooleanValues(spec), ...initialData },
-    // Boolean defaults merged UNDER initialData
+    data: {
+      ...getDefaultBooleanValues(spec),
+      ...getFieldDefaults(spec),
+      ...initialData
+    },
     touched: {},
     isSubmitting: false,
     isSubmitted: false,
@@ -220,8 +232,15 @@ function useForma(options) {
     }
   }, [immediateValidation, onSubmit, state.data]);
   const resetForm = useCallback(() => {
-    dispatch({ type: "RESET", initialData });
-  }, [initialData]);
+    dispatch({
+      type: "RESET",
+      initialData: {
+        ...getDefaultBooleanValues(spec),
+        ...getFieldDefaults(spec),
+        ...initialData
+      }
+    });
+  }, [spec, initialData]);
   const wizard = useMemo(() => {
     if (!spec.pages || spec.pages.length === 0) return null;
     const pageVisibility = getPageVisibility(state.data, spec, { computed });
@@ -618,7 +637,9 @@ var FormaContext = createContext(null);
 function useFormaContext() {
   const context = useContext(FormaContext);
   if (!context) {
-    throw new Error("useFormaContext must be used within a FormaContext.Provider");
+    throw new Error(
+      "useFormaContext must be used within a FormaContext.Provider"
+    );
   }
   return context;
 }
@@ -699,7 +720,9 @@ function getNumberConstraints(schema) {
 function createDefaultItem(itemFields) {
   const item = {};
   for (const [fieldName, fieldDef] of Object.entries(itemFields)) {
-    if (fieldDef.type === "boolean") {
+    if (fieldDef.defaultValue !== void 0) {
+      item[fieldName] = fieldDef.defaultValue;
+    } else if (fieldDef.type === "boolean") {
       item[fieldName] = false;
     } else if (fieldDef.type === "number" || fieldDef.type === "integer") {
       item[fieldName] = null;
@@ -1006,7 +1029,9 @@ function getNumberConstraints2(schema) {
 function createDefaultItem2(itemFields) {
   const item = {};
   for (const [fieldName, fieldDef] of Object.entries(itemFields)) {
-    if (fieldDef.type === "boolean") {
+    if (fieldDef.defaultValue !== void 0) {
+      item[fieldName] = fieldDef.defaultValue;
+    } else if (fieldDef.type === "boolean") {
       item[fieldName] = false;
     } else if (fieldDef.type === "number" || fieldDef.type === "integer") {
       item[fieldName] = null;
@@ -1227,7 +1252,10 @@ function FieldRenderer({
 // src/ErrorBoundary.tsx
 import React3 from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function DefaultErrorFallback({ error, onReset }) {
+function DefaultErrorFallback({
+  error,
+  onReset
+}) {
   return /* @__PURE__ */ jsxs2("div", { className: "forma-error-boundary", role: "alert", children: [
     /* @__PURE__ */ jsx3("h3", { children: "Something went wrong" }),
     /* @__PURE__ */ jsx3("p", { children: "An error occurred while rendering the form." }),