pdyform 2.0.1 → 2.0.2

package/packages/core/src/formState.ts

@@ -0,0 +1,79 @@
+import type { FormField } from './types';
+import { getDefaultValues, normalizeFieldValue, validateFieldByName, validateForm } from './utils';
+
+export interface FormRuntimeState {
+  values: Record<string, any>;
+  errors: Record<string, string>;
+  isSubmitting: boolean;
+}
+
+export function createFormRuntimeState(fields: FormField[]): FormRuntimeState {
+  return {
+    values: getDefaultValues(fields),
+    errors: {},
+    isSubmitting: false,
+  };
+}
+
+export function setSubmitting(state: FormRuntimeState, isSubmitting: boolean): FormRuntimeState {
+  return {
+    ...state,
+    isSubmitting,
+  };
+}
+
+export function applyFieldChange(
+  fields: FormField[],
+  state: FormRuntimeState,
+  name: string,
+  rawValue: unknown
+): FormRuntimeState {
+  const field = fields.find((f) => f.name === name);
+  const normalizedValue = field ? normalizeFieldValue(field, rawValue) : rawValue;
+
+  const values = {
+    ...state.values,
+    [name]: normalizedValue,
+  };
+
+  const error = validateFieldByName(fields, name, normalizedValue);
+  const errors = {
+    ...state.errors,
+    [name]: error || '',
+  };
+
+  return {
+    ...state,
+    values,
+    errors,
+  };
+}
+
+export function applyFieldBlur(fields: FormField[], state: FormRuntimeState, name: string): FormRuntimeState {
+  const error = validateFieldByName(fields, name, state.values[name]);
+
+  return {
+    ...state,
+    errors: {
+      ...state.errors,
+      [name]: error || '',
+    },
+  };
+}
+
+export function runSubmitValidation(
+  fields: FormField[],
+  state: FormRuntimeState
+): { state: FormRuntimeState; hasError: boolean } {
+  const errors = validateForm(fields, state.values);
+  const hasError = Object.keys(errors).length > 0;
+
+  return {
+    state: {
+      ...state,
+      errors,
+      isSubmitting: false,
+    },
+    hasError,
+  };
+}

package/packages/core/src/index.ts

@@ -1,2 +1,3 @@
 export type * from './types';
 export * from './utils';
+export * from './formState';

package/packages/core/src/utils.ts

@@ -7,6 +7,15 @@ function parseNumberish(value: unknown): number | null {
   return Number.isNaN(parsed) ? null : parsed;
 }
 
+export function normalizeFieldValue(field: FormField, value: unknown): unknown {
+  if (field.type !== 'number') return value;
+
+  if (value === '' || value === undefined || value === null) return '';
+
+  const numericValue = parseNumberish(value);
+  return numericValue === null ? value : numericValue;
+}
+
 export function validateField(value: any, field: FormField): string | null {
   if (!field.validations) return null;
 
@@ -72,6 +81,21 @@ export function validateField(value: any, field: FormField): string | null {
   return null;
 }
 
+export function validateFieldByName(fields: FormField[], name: string, value: unknown): string | null {
+  const field = fields.find((f) => f.name === name);
+  if (!field) return null;
+  return validateField(value, field);
+}
+
+export function validateForm(fields: FormField[], values: Record<string, any>): Record<string, string> {
+  const errors: Record<string, string> = {};
+  for (const field of fields) {
+    const error = validateField(values[field.name], field);
+    if (error) errors[field.name] = error;
+  }
+  return errors;
+}
+
 export function getDefaultValues(fields: FormField[]): Record<string, any> {
   return fields.reduce((acc, field) => {
     acc[field.name] = field.defaultValue !== undefined ? field.defaultValue : (field.type === 'checkbox' ? [] : '');

package/packages/core/test/formState.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest';
+import {
+  createFormRuntimeState,
+  setSubmitting,
+  applyFieldChange,
+  applyFieldBlur,
+  runSubmitValidation,
+} from '../src';
+import type { FormField } from '../src/types';
+
+const fields: FormField[] = [
+  {
+    id: 'age',
+    name: 'age',
+    label: 'Age',
+    type: 'number',
+    validations: [{ type: 'min', value: 18, message: 'Age must be at least 18' }],
+  },
+  {
+    id: 'name',
+    name: 'name',
+    label: 'Name',
+    type: 'text',
+    validations: [{ type: 'required', message: 'Name is required' }],
+  },
+];
+
+describe('core formState helpers', () => {
+  it('creates initial runtime state', () => {
+    const state = createFormRuntimeState(fields);
+    expect(state).toEqual({
+      values: { age: '', name: '' },
+      errors: {},
+      isSubmitting: false,
+    });
+  });
+
+  it('sets submitting state', () => {
+    const state = createFormRuntimeState(fields);
+    expect(setSubmitting(state, true).isSubmitting).toBe(true);
+  });
+
+  it('applies field change with normalization and inline validation', () => {
+    const state = createFormRuntimeState(fields);
+    const next = applyFieldChange(fields, state, 'age', '22');
+
+    expect(next.values.age).toBe(22);
+    expect(next.errors.age).toBe('');
+  });
+
+  it('applies blur validation', () => {
+    const state = createFormRuntimeState(fields);
+    const withInvalidName = applyFieldChange(fields, state, 'name', '');
+    const onBlur = applyFieldBlur(fields, withInvalidName, 'name');
+
+    expect(onBlur.errors.name).toBe('Name is required');
+  });
+
+  it('runs submit validation and returns hasError flag', () => {
+    const state = createFormRuntimeState(fields);
+    const dirty = applyFieldChange(fields, state, 'age', '16');
+    const submitting = setSubmitting(dirty, true);
+
+    const result = runSubmitValidation(fields, submitting);
+
+    expect(result.hasError).toBe(true);
+    expect(result.state.isSubmitting).toBe(false);
+    expect(result.state.errors.age).toBe('Age must be at least 18');
+    expect(result.state.errors.name).toBe('Name is required');
+  });
+});

package/packages/core/test/utils.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { validateField, getDefaultValues } from '../src';
+import { validateField, validateFieldByName, validateForm, normalizeFieldValue, getDefaultValues } from '../src';
 import { FormField } from '../src/types';
 
 describe('core utils - validateField', () => {
@@ -78,6 +78,85 @@ describe('core utils - validateField', () => {
       expect(validateField('magic', field)).toBeNull();
     });
   });
+
+  describe('rule defaults and edge cases', () => {
+    it('uses default required message when custom message is absent', () => {
+      const field: FormField = {
+        name: 'title',
+        label: 'Title',
+        type: 'text',
+        validations: [{ type: 'required' }],
+      };
+      expect(validateField('', field)).toBe('Title is required');
+    });
+
+    it('uses default min/max messages', () => {
+      const field: FormField = {
+        name: 'score',
+        label: 'Score',
+        type: 'number',
+        validations: [{ type: 'min', value: 10 }, { type: 'max', value: 20 }],
+      };
+      expect(validateField(9, field)).toBe('Score must be at least 10');
+      expect(validateField(21, field)).toBe('Score must be at most 20');
+    });
+
+    it('supports custom pattern message', () => {
+      const field: FormField = {
+        name: 'phone',
+        label: 'Phone',
+        type: 'text',
+        validations: [{ type: 'pattern', value: '^\\d{11}$', message: 'Phone must be 11 digits' }],
+      };
+      expect(validateField('123', field)).toBe('Phone must be 11 digits');
+    });
+
+    it('uses fallback custom message when custom validator returns false', () => {
+      const field: FormField = {
+        name: 'code',
+        label: 'Code',
+        type: 'text',
+        validations: [{ type: 'custom', message: 'Code invalid', validator: () => false }],
+      };
+      expect(validateField('anything', field)).toBe('Code invalid');
+    });
+  });
+});
+
+describe('core utils - normalizeFieldValue', () => {
+  const numberField: FormField = { name: 'age', label: 'Age', type: 'number' };
+  const textField: FormField = { name: 'name', label: 'Name', type: 'text' };
+
+  it('coerces number field values', () => {
+    expect(normalizeFieldValue(numberField, '22')).toBe(22);
+    expect(normalizeFieldValue(numberField, 22)).toBe(22);
+    expect(normalizeFieldValue(numberField, '')).toBe('');
+  });
+
+  it('keeps non-number fields unchanged', () => {
+    expect(normalizeFieldValue(textField, 'abc')).toBe('abc');
+  });
+});
+
+describe('core utils - validate helpers', () => {
+  const fields: FormField[] = [
+    { name: 'username', label: 'Username', type: 'text', validations: [{ type: 'required', message: 'Required' }] },
+    { name: 'age', label: 'Age', type: 'number', validations: [{ type: 'min', value: 18, message: 'Age >= 18' }] },
+  ];
+
+  it('validates a field by name', () => {
+    expect(validateFieldByName(fields, 'username', '')).toBe('Required');
+    expect(validateFieldByName(fields, 'username', 'ok')).toBeNull();
+    expect(validateFieldByName(fields, 'missing', 'x')).toBeNull();
+  });
+
+  it('validates entire form and returns keyed errors', () => {
+    expect(validateForm(fields, { username: '', age: 17 })).toEqual({
+      username: 'Required',
+      age: 'Age >= 18',
+    });
+    expect(validateForm(fields, { username: 'ok', age: 18 })).toEqual({});
+  });
 });
 
 describe('core utils - getDefaultValues', () => {

package/packages/core/tsup.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
-  entry: ['src/index.ts', 'src/types.ts', 'src/utils.ts', 'src/parser.ts'],
+  entry: ['src/index.ts', 'src/types.ts', 'src/utils.ts', 'src/formState.ts', 'src/parser.ts'],
   format: ['cjs', 'esm'],
   dts: true,
   clean: true,

package/packages/react/dist/index.cjs

@@ -55,7 +55,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/DynamicForm.tsx
 var import_react = require("react");
-var import_core = require("pdyform/core");
+var import_core2 = require("pdyform/core");
 
 // src/components/Input.tsx
 var React = __toESM(require("react"), 1);
@@ -248,14 +248,11 @@ var Label = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/InputRenderer.tsx
+var import_core = require("pdyform/core");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var InputRenderer = ({ field, value, onChange, onBlur, fieldId }) => {
   const handleChange = (nextValue) => {
-    if (field.type !== "number") {
-      onChange(nextValue);
-      return;
-    }
-    onChange(nextValue === "" ? "" : Number(nextValue));
+    onChange((0, import_core.normalizeFieldValue)(field, nextValue));
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Input,
@@ -398,47 +395,21 @@ var FormFieldRenderer = ({
 // src/DynamicForm.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var DynamicForm = ({ schema, onSubmit, className }) => {
-  const [values, setValues] = (0, import_react.useState)((0, import_core.getDefaultValues)(schema.fields));
-  const [errors, setErrors] = (0, import_react.useState)({});
-  const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
+  const [formState, setFormState] = (0, import_react.useState)(() => (0, import_core2.createFormRuntimeState)(schema.fields));
   const handleFieldChange = (name, value) => {
-    setValues((prev) => ({ ...prev, [name]: value }));
-    const field = schema.fields.find((f) => f.name === name);
-    if (field) {
-      const error = (0, import_core.validateField)(value, field);
-      setErrors((prev) => ({
-        ...prev,
-        [name]: error || ""
-      }));
-    }
+    setFormState((prev) => (0, import_core2.applyFieldChange)(schema.fields, prev, name, value));
   };
   const handleFieldBlur = (name) => {
-    const field = schema.fields.find((f) => f.name === name);
-    if (field) {
-      const error = (0, import_core.validateField)(values[name], field);
-      setErrors((prev) => ({
-        ...prev,
-        [name]: error || ""
-      }));
-    }
+    setFormState((prev) => (0, import_core2.applyFieldBlur)(schema.fields, prev, name));
   };
   const handleSubmit = (e) => {
     e.preventDefault();
-    setIsSubmitting(true);
-    const newErrors = {};
-    let hasError = false;
-    schema.fields.forEach((field) => {
-      const error = (0, import_core.validateField)(values[field.name], field);
-      if (error) {
-        newErrors[field.name] = error;
-        hasError = true;
-      }
-    });
-    setErrors(newErrors);
+    const submittingState = (0, import_core2.setSubmitting)(formState, true);
+    const { state: validatedState, hasError } = (0, import_core2.runSubmitValidation)(schema.fields, submittingState);
+    setFormState(validatedState);
     if (!hasError) {
-      onSubmit(values);
+      onSubmit(validatedState.values);
     }
-    setIsSubmitting(false);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("form", { onSubmit: handleSubmit, className: `space-y-6 ${className || ""}`, children: [
     schema.title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-2xl font-bold tracking-tight", children: schema.title }),
@@ -447,10 +418,10 @@ var DynamicForm = ({ schema, onSubmit, className }) => {
       FormFieldRenderer,
       {
         field,
-        value: values[field.name],
+        value: formState.values[field.name],
         onChange: (val) => handleFieldChange(field.name, val),
         onBlur: () => handleFieldBlur(field.name),
-        error: errors[field.name]
+        error: formState.errors[field.name]
       },
       field.name
     )) }),
@@ -458,9 +429,9 @@ var DynamicForm = ({ schema, onSubmit, className }) => {
       "button",
       {
         type: "submit",
-        disabled: isSubmitting,
+        disabled: formState.isSubmitting,
         className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full",
-        children: isSubmitting ? "Submitting..." : schema.submitButtonText || "Submit"
+        children: formState.isSubmitting ? "Submitting..." : schema.submitButtonText || "Submit"
       }
     )
   ] });

package/packages/react/dist/index.js

@@ -1,6 +1,12 @@
 // src/DynamicForm.tsx
 import { useState } from "react";
-import { validateField, getDefaultValues } from "pdyform/core";
+import {
+  createFormRuntimeState,
+  applyFieldChange,
+  applyFieldBlur,
+  runSubmitValidation,
+  setSubmitting
+} from "pdyform/core";
 
 // src/components/Input.tsx
 import * as React from "react";
@@ -193,14 +199,11 @@ var Label = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/InputRenderer.tsx
+import { normalizeFieldValue } from "pdyform/core";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var InputRenderer = ({ field, value, onChange, onBlur, fieldId }) => {
   const handleChange = (nextValue) => {
-    if (field.type !== "number") {
-      onChange(nextValue);
-      return;
-    }
-    onChange(nextValue === "" ? "" : Number(nextValue));
+    onChange(normalizeFieldValue(field, nextValue));
   };
   return /* @__PURE__ */ jsx7(
     Input,
@@ -343,47 +346,21 @@ var FormFieldRenderer = ({
 // src/DynamicForm.tsx
 import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var DynamicForm = ({ schema, onSubmit, className }) => {
-  const [values, setValues] = useState(getDefaultValues(schema.fields));
-  const [errors, setErrors] = useState({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formState, setFormState] = useState(() => createFormRuntimeState(schema.fields));
   const handleFieldChange = (name, value) => {
-    setValues((prev) => ({ ...prev, [name]: value }));
-    const field = schema.fields.find((f) => f.name === name);
-    if (field) {
-      const error = validateField(value, field);
-      setErrors((prev) => ({
-        ...prev,
-        [name]: error || ""
-      }));
-    }
+    setFormState((prev) => applyFieldChange(schema.fields, prev, name, value));
   };
   const handleFieldBlur = (name) => {
-    const field = schema.fields.find((f) => f.name === name);
-    if (field) {
-      const error = validateField(values[name], field);
-      setErrors((prev) => ({
-        ...prev,
-        [name]: error || ""
-      }));
-    }
+    setFormState((prev) => applyFieldBlur(schema.fields, prev, name));
   };
   const handleSubmit = (e) => {
     e.preventDefault();
-    setIsSubmitting(true);
-    const newErrors = {};
-    let hasError = false;
-    schema.fields.forEach((field) => {
-      const error = validateField(values[field.name], field);
-      if (error) {
-        newErrors[field.name] = error;
-        hasError = true;
-      }
-    });
-    setErrors(newErrors);
+    const submittingState = setSubmitting(formState, true);
+    const { state: validatedState, hasError } = runSubmitValidation(schema.fields, submittingState);
+    setFormState(validatedState);
     if (!hasError) {
-      onSubmit(values);
+      onSubmit(validatedState.values);
     }
-    setIsSubmitting(false);
   };
   return /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: `space-y-6 ${className || ""}`, children: [
     schema.title && /* @__PURE__ */ jsx13("h2", { className: "text-2xl font-bold tracking-tight", children: schema.title }),
@@ -392,10 +369,10 @@ var DynamicForm = ({ schema, onSubmit, className }) => {
       FormFieldRenderer,
       {
         field,
-        value: values[field.name],
+        value: formState.values[field.name],
         onChange: (val) => handleFieldChange(field.name, val),
         onBlur: () => handleFieldBlur(field.name),
-        error: errors[field.name]
+        error: formState.errors[field.name]
       },
       field.name
     )) }),
@@ -403,9 +380,9 @@ var DynamicForm = ({ schema, onSubmit, className }) => {
       "button",
       {
         type: "submit",
-        disabled: isSubmitting,
+        disabled: formState.isSubmitting,
         className: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full",
-        children: isSubmitting ? "Submitting..." : schema.submitButtonText || "Submit"
+        children: formState.isSubmitting ? "Submitting..." : schema.submitButtonText || "Submit"
       }
     )
   ] });

package/packages/react/node_modules/.vite/vitest/results.json

@@ -1 +1 @@
-{"version":"1.6.1","results":[[":test/DynamicForm.test.tsx",{"duration":29,"failed":false}],[":test/FormFieldRenderer.test.tsx",{"duration":128,"failed":false}]]}
+{"version":"1.6.1","results":[[":test/DynamicForm.test.tsx",{"duration":29,"failed":false}],[":test/FormFieldRenderer.test.tsx",{"duration":129,"failed":false}]]}

package/packages/react/src/DynamicForm.tsx

@@ -1,5 +1,13 @@
 import React, { useState } from 'react';
-import { FormSchema, validateField, getDefaultValues } from 'pdyform/core';
+import {
+  FormSchema,
+  FormRuntimeState,
+  createFormRuntimeState,
+  applyFieldChange,
+  applyFieldBlur,
+  runSubmitValidation,
+  setSubmitting,
+} from 'pdyform/core';
 import { FormFieldRenderer } from './FormFieldRenderer';
 
 interface DynamicFormProps {
@@ -9,56 +17,24 @@ interface DynamicFormProps {
 }
 
 export const DynamicForm: React.FC<DynamicFormProps> = ({ schema, onSubmit, className }) => {
-  const [values, setValues] = useState<Record<string, any>>(getDefaultValues(schema.fields));
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formState, setFormState] = useState<FormRuntimeState>(() => createFormRuntimeState(schema.fields));
 
   const handleFieldChange = (name: string, value: any) => {
-    setValues((prev) => ({ ...prev, [name]: value }));
-    
-    // Validate on change
-    const field = schema.fields.find(f => f.name === name);
-    if (field) {
-      const error = validateField(value, field);
-      setErrors((prev) => ({
-        ...prev,
-        [name]: error || ''
-      }));
-    }
+    setFormState((prev) => applyFieldChange(schema.fields, prev, name, value));
   };
 
   const handleFieldBlur = (name: string) => {
-    const field = schema.fields.find(f => f.name === name);
-    if (field) {
-      const error = validateField(values[name], field);
-      setErrors((prev) => ({
-        ...prev,
-        [name]: error || ''
-      }));
-    }
+    setFormState((prev) => applyFieldBlur(schema.fields, prev, name));
   };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    setIsSubmitting(true);
-
-    const newErrors: Record<string, string> = {};
-    let hasError = false;
-
-    schema.fields.forEach((field) => {
-      const error = validateField(values[field.name], field);
-      if (error) {
-        newErrors[field.name] = error;
-        hasError = true;
-      }
-    });
-
-    setErrors(newErrors);
-
+    const submittingState = setSubmitting(formState, true);
+    const { state: validatedState, hasError } = runSubmitValidation(schema.fields, submittingState);
+    setFormState(validatedState);
     if (!hasError) {
-      onSubmit(values);
+      onSubmit(validatedState.values);
     }
-    setIsSubmitting(false);
   };
 
   return (
@@ -72,10 +48,10 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({ schema, onSubmit, clas
             <FormFieldRenderer
               key={field.name}
               field={field}
-              value={values[field.name]}
+              value={formState.values[field.name]}
               onChange={(val) => handleFieldChange(field.name, val)}
               onBlur={() => handleFieldBlur(field.name)}
-              error={errors[field.name]}
+              error={formState.errors[field.name]}
             />
           )
         ))}
@@ -83,10 +59,10 @@ export const DynamicForm: React.FC<DynamicFormProps> = ({ schema, onSubmit, clas
 
       <button
         type="submit"
-        disabled={isSubmitting}
+        disabled={formState.isSubmitting}
         className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full"
       >
-        {isSubmitting ? 'Submitting...' : (schema.submitButtonText || 'Submit')}
+        {formState.isSubmitting ? 'Submitting...' : (schema.submitButtonText || 'Submit')}
       </button>
     </form>
   );

package/packages/react/src/components/InputRenderer.tsx

@@ -1,15 +1,11 @@
 import React from 'react';
+import { normalizeFieldValue } from 'pdyform/core';
 import type { FieldRenderContext } from './types';
 import { Input } from './Input';
 
 const InputRenderer: React.FC<FieldRenderContext> = ({ field, value, onChange, onBlur, fieldId }) => {
   const handleChange = (nextValue: string) => {
-    if (field.type !== 'number') {
-      onChange(nextValue);
-      return;
-    }
-
-    onChange(nextValue === '' ? '' : Number(nextValue));
+    onChange(normalizeFieldValue(field, nextValue));
   };
 
   return (