@finsweet/webflow-apps-utils 1.0.8 → 1.0.10

package/dist/ui/stores/form.js

@@ -3,8 +3,280 @@ import { z } from 'zod';
 // Registry to track all form states by identifier
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const formsRegistry = writable({});
+// Registry to track field registrations per form
+const fieldRegistrations = writable({});
 // Validates class name according to HTML class name rules
 const classNameRegex = /^[a-zA-Z0-9_-]+$/;
+/**
+ * Generic Form Manager for any Zod schema with cross-component field support
+ */
+export class FormManager {
+    schema;
+    _store;
+    initialValues;
+    identifier;
+    fieldRegistrations = new Map();
+    // Public reactive stores that components can directly use
+    values;
+    errors;
+    touched;
+    isValid;
+    isDirty;
+    isSubmitting;
+    constructor(identifier, schema, initialValues) {
+        this.identifier = identifier;
+        this.schema = schema;
+        this.initialValues = initialValues;
+        // Create the internal form state store
+        this._store = writable({
+            values: initialValues,
+            errors: {},
+            touched: {},
+            isValid: false,
+            isDirty: false,
+            isSubmitting: false
+        });
+        // Create derived stores
+        this.values = derived(this._store, ($store) => $store.values);
+        this.errors = derived(this._store, ($store) => $store.errors);
+        this.touched = derived(this._store, ($store) => $store.touched);
+        this.isValid = derived(this._store, ($store) => $store.isValid);
+        this.isDirty = derived(this._store, ($store) => $store.isDirty);
+        this.isSubmitting = derived(this._store, ($store) => $store.isSubmitting);
+        // Register this form with the global registry
+        formsRegistry.update((registry) => {
+            registry[identifier] = this;
+            return registry;
+        });
+        // Initialize field registrations for this form
+        fieldRegistrations.update((registrations) => {
+            registrations[identifier] = {};
+            return registrations;
+        });
+        // Initial validation
+        this.validate();
+    }
+    /**
+     * Register a field with the form for cross-component management
+     */
+    registerField(fieldName, options) {
+        const registration = {
+            name: fieldName,
+            validate: options?.validate,
+            transform: options?.transform
+        };
+        this.fieldRegistrations.set(fieldName, registration);
+        // Update global field registrations
+        fieldRegistrations.update((registrations) => {
+            registrations[this.identifier][fieldName] =
+                registration;
+            return registrations;
+        });
+        return {
+            // Return field-specific reactive stores
+            value: derived(this.values, ($values) => $values[fieldName]),
+            error: derived(this.errors, ($errors) => $errors[fieldName] || []),
+            touched: derived(this.touched, ($touched) => $touched[fieldName] || false),
+            // Field-specific methods
+            setValue: (value) => this.setField(fieldName, value),
+            setTouched: () => this.setTouched(fieldName),
+            validate: () => this.validateField(fieldName)
+        };
+    }
+    /**
+     * Set the value of a specific field
+     */
+    setField(field, value) {
+        this._store.update((state) => {
+            const newState = {
+                ...state,
+                values: {
+                    ...state.values,
+                    [field]: value
+                },
+                touched: {
+                    ...state.touched,
+                    [field]: true
+                },
+                isDirty: true
+            };
+            return newState;
+        });
+        this.validate();
+    }
+    /**
+     * Set multiple field values at once
+     */
+    setFields(values) {
+        this._store.update((state) => {
+            const newTouched = { ...state.touched };
+            // Mark all updated fields as touched
+            Object.keys(values).forEach((key) => {
+                newTouched[key] = true;
+            });
+            return {
+                ...state,
+                values: {
+                    ...state.values,
+                    ...values
+                },
+                touched: newTouched,
+                isDirty: true
+            };
+        });
+        this.validate();
+    }
+    /**
+     * Set a field as touched without changing its value
+     */
+    setTouched(field) {
+        this._store.update((state) => ({
+            ...state,
+            touched: {
+                ...state.touched,
+                [field]: true
+            }
+        }));
+    }
+    /**
+     * Validate a specific field
+     */
+    validateField(field) {
+        const currentState = get(this._store);
+        const fieldValue = currentState.values[field];
+        const errors = [];
+        // Check custom field validation
+        const registration = this.fieldRegistrations.get(field);
+        if (registration?.validate) {
+            const customError = registration.validate(fieldValue);
+            if (customError) {
+                errors.push(customError);
+            }
+        }
+        // Run Zod validation on the entire form to get field-specific errors
+        const result = this.schema.safeParse(currentState.values);
+        if (!result.success) {
+            const zodErrors = result.error.format();
+            const fieldErrors = zodErrors[field]?._errors || [];
+            errors.push(...fieldErrors);
+        }
+        return errors;
+    }
+    /**
+     * Reset the form to initial values
+     */
+    reset() {
+        this._store.set({
+            values: { ...this.initialValues },
+            errors: {},
+            touched: {},
+            isValid: false,
+            isDirty: false,
+            isSubmitting: false
+        });
+        this.validate();
+    }
+    /**
+     * Set the form as submitting
+     */
+    setSubmitting(isSubmitting) {
+        this._store.update((state) => ({
+            ...state,
+            isSubmitting
+        }));
+    }
+    /**
+     * Update the schema (useful for dynamic forms)
+     */
+    updateSchema(newSchema) {
+        this.schema = newSchema;
+        this.validate();
+    }
+    /**
+     * Validate the entire form
+     */
+    validate() {
+        this._store.update((state) => {
+            const result = this.schema.safeParse(state.values);
+            const errors = {};
+            let isValid = true;
+            if (!result.success) {
+                isValid = false;
+                // Convert Zod errors to our error format
+                Object.keys(state.values).forEach((key) => {
+                    const fieldKey = key;
+                    const fieldErrors = result.error.format()[fieldKey]
+                        ?._errors || [];
+                    // Add custom field validation errors
+                    const registration = this.fieldRegistrations.get(key);
+                    if (registration?.validate) {
+                        const customError = registration.validate(state.values[fieldKey]);
+                        if (customError) {
+                            fieldErrors.push(customError);
+                        }
+                    }
+                    if (fieldErrors.length > 0) {
+                        errors[fieldKey] = fieldErrors;
+                    }
+                });
+            }
+            return {
+                ...state,
+                errors,
+                isValid
+            };
+        });
+    }
+    /**
+     * Get the current state of the form
+     */
+    getState() {
+        return get(this._store);
+    }
+    /**
+     * Destroy the form and clean up resources
+     */
+    destroy() {
+        // Remove from registries
+        formsRegistry.update((registry) => {
+            delete registry[this.identifier];
+            return registry;
+        });
+        fieldRegistrations.update((registrations) => {
+            delete registrations[this.identifier];
+            return registrations;
+        });
+        // Clear field registrations
+        this.fieldRegistrations.clear();
+    }
+}
+/**
+ * Creates a generic form with Zod validation
+ */
+export function createGenericForm(identifier, schema, initialValues) {
+    const form = new FormManager(identifier, schema, initialValues);
+    return {
+        // Reactive stores that components can directly subscribe to
+        values: form.values,
+        errors: form.errors,
+        touched: form.touched,
+        isValid: form.isValid,
+        isDirty: form.isDirty,
+        isSubmitting: form.isSubmitting,
+        // Helper methods
+        setField: form.setField.bind(form),
+        setFields: form.setFields.bind(form),
+        setTouched: form.setTouched.bind(form),
+        reset: form.reset.bind(form),
+        setSubmitting: form.setSubmitting.bind(form),
+        updateSchema: form.updateSchema.bind(form),
+        registerField: form.registerField.bind(form),
+        validateField: form.validateField.bind(form),
+        // For advanced use cases
+        getState: form.getState.bind(form),
+        destroy: form.destroy.bind(form)
+    };
+}
 /**
  * Creates a form validation utility with Svelte 5 reactive stores
  * @param identifier - Unique identifier for the form
@@ -265,7 +537,7 @@ export class FormValidator {
         }));
     }
     /**
-     * Get the current state of the form (for legacy compatibility)
+     * Get the current state of the form
      */
     getState() {
         return get(this._store);
@@ -302,7 +574,6 @@ export function createForm(identifier, initialValues, options) {
 /**
  * Get a form by its identifier
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getFormById(identifier) {
     const registry = get(formsRegistry);
     return registry[identifier];
@@ -354,6 +625,43 @@ export function createFormSubscription(identifier) {
         destroy: () => clearInterval(intervalId)
     };
 }
+/**
+ * Helper to get field state for a specific form and field
+ */
+export function getFieldState(formId, fieldName) {
+    const form = getFormById(formId);
+    if (!form) {
+        return {
+            value: undefined,
+            error: [],
+            touched: false,
+            isValid: true
+        };
+    }
+    const state = form.getState();
+    return {
+        value: state.values[fieldName],
+        error: state.errors[fieldName] || [],
+        touched: state.touched[fieldName] || false,
+        isValid: !state.errors[fieldName] || state.errors[fieldName].length === 0
+    };
+}
+/**
+ * Helper to update a field value for a specific form
+ */
+export function updateFieldValue(formId, fieldName, value) {
+    const form = getFormById(formId);
+    if (form && 'setField' in form) {
+        form.setField(fieldName, value);
+    }
+}
+/**
+ * Helper to get all registered field names for a form
+ */
+export function getFormFieldNames(formId) {
+    const registrations = get(fieldRegistrations);
+    return Object.keys(registrations[formId] || {});
+}
 /**
  * Store to track if the form is adding or updating to the Canvas
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {