@finsweet/webflow-apps-utils 1.0.8 → 1.0.9

package/dist/ui/stores/form.d.ts

@@ -1,4 +1,5 @@
 import { derived } from 'svelte/store';
+import { z } from 'zod';
 interface FormState<T> {
     values: T;
     errors: Record<keyof T, string[]>;
@@ -7,6 +8,108 @@ interface FormState<T> {
     isDirty: boolean;
     isSubmitting: boolean;
 }
+/**
+ * Generic Form Manager for any Zod schema with cross-component field support
+ */
+export declare class FormManager<T extends Record<string, unknown>> {
+    private schema;
+    private _store;
+    private initialValues;
+    private identifier;
+    private fieldRegistrations;
+    readonly values: ReturnType<typeof derived<typeof this._store, T>>;
+    readonly errors: ReturnType<typeof derived<typeof this._store, Record<keyof T, string[]>>>;
+    readonly touched: ReturnType<typeof derived<typeof this._store, Record<keyof T, boolean>>>;
+    readonly isValid: ReturnType<typeof derived<typeof this._store, boolean>>;
+    readonly isDirty: ReturnType<typeof derived<typeof this._store, boolean>>;
+    readonly isSubmitting: ReturnType<typeof derived<typeof this._store, boolean>>;
+    constructor(identifier: string, schema: z.ZodType<T>, initialValues: T);
+    /**
+     * Register a field with the form for cross-component management
+     */
+    registerField<K extends keyof T>(fieldName: K, options?: {
+        validate?: (value: T[K]) => string | null;
+        transform?: (value: unknown) => T[K];
+    }): {
+        value: import("svelte/store").Readable<T[K]>;
+        error: import("svelte/store").Readable<Record<keyof T, string[]>[K]>;
+        touched: import("svelte/store").Readable<false | Record<keyof T, boolean>[K]>;
+        setValue: (value: T[K]) => void;
+        setTouched: () => void;
+        validate: () => string[];
+    };
+    /**
+     * Set the value of a specific field
+     */
+    setField<K extends keyof T>(field: K, value: T[K]): void;
+    /**
+     * Set multiple field values at once
+     */
+    setFields(values: Partial<T>): void;
+    /**
+     * Set a field as touched without changing its value
+     */
+    setTouched<K extends keyof T>(field: K): void;
+    /**
+     * Validate a specific field
+     */
+    validateField<K extends keyof T>(field: K): string[];
+    /**
+     * Reset the form to initial values
+     */
+    reset(): void;
+    /**
+     * Set the form as submitting
+     */
+    setSubmitting(isSubmitting: boolean): void;
+    /**
+     * Update the schema (useful for dynamic forms)
+     */
+    updateSchema(newSchema: z.ZodType<T>): void;
+    /**
+     * Validate the entire form
+     */
+    private validate;
+    /**
+     * Get the current state of the form
+     */
+    getState(): FormState<T>;
+    /**
+     * Destroy the form and clean up resources
+     */
+    destroy(): void;
+}
+/**
+ * Creates a generic form with Zod validation
+ */
+export declare function createGenericForm<T extends Record<string, unknown>>(identifier: string, schema: z.ZodType<T>, initialValues: T): {
+    values: import("svelte/store").Readable<T>;
+    errors: import("svelte/store").Readable<Record<keyof T, string[]>>;
+    touched: import("svelte/store").Readable<Record<keyof T, boolean>>;
+    isValid: import("svelte/store").Readable<boolean>;
+    isDirty: import("svelte/store").Readable<boolean>;
+    isSubmitting: import("svelte/store").Readable<boolean>;
+    setField: <K extends keyof T>(field: K, value: T[K]) => void;
+    setFields: (values: Partial<T>) => void;
+    setTouched: <K extends keyof T>(field: K) => void;
+    reset: () => void;
+    setSubmitting: (isSubmitting: boolean) => void;
+    updateSchema: (newSchema: z.ZodType<T, z.ZodTypeDef, T>) => void;
+    registerField: <K extends keyof T>(fieldName: K, options?: {
+        validate?: ((value: T[K]) => string | null) | undefined;
+        transform?: ((value: unknown) => T[K]) | undefined;
+    } | undefined) => {
+        value: import("svelte/store").Readable<T[K]>;
+        error: import("svelte/store").Readable<Record<keyof T, string[]>[K]>;
+        touched: import("svelte/store").Readable<false | Record<keyof T, boolean>[K]>;
+        setValue: (value: T[K]) => void;
+        setTouched: () => void;
+        validate: () => string[];
+    };
+    validateField: <K extends keyof T>(field: K) => string[];
+    getState: () => FormState<T>;
+    destroy: () => void;
+};
 /**
  * Creates a form validation utility with Svelte 5 reactive stores
  * @param identifier - Unique identifier for the form
@@ -85,7 +188,7 @@ export declare class FormValidator<T extends {
      */
     setSubmitting(isSubmitting: boolean): void;
     /**
-     * Get the current state of the form (for legacy compatibility)
+     * Get the current state of the form
      */
     getState(): FormState<T>;
 }
@@ -118,7 +221,11 @@ export declare function createForm<T extends {
 /**
  * Get a form by its identifier
  */
-export declare function getFormById(identifier: string): FormValidator<any> | undefined;
+export declare function getFormById(identifier: string): FormValidator<{
+    name: string;
+    instance: string;
+    class: string;
+}> | FormManager<Record<string, unknown>> | undefined;
 /**
  * Check if a form with a specific identifier is valid
  */
@@ -136,9 +243,35 @@ export declare function createFormSubscription(identifier: string): import("svel
     errors: {};
     values: {};
 }> | {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<FormState<any>>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<FormState<{
+        name: string;
+        instance: string;
+        class: string;
+    }> | FormState<Record<string, unknown>>>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
     destroy: () => void;
 };
+/**
+ * Helper to get field state for a specific form and field
+ */
+export declare function getFieldState<T extends Record<string, unknown>>(formId: string, fieldName: keyof T): {
+    value: undefined;
+    error: never[];
+    touched: boolean;
+    isValid: boolean;
+} | {
+    value: T[keyof T];
+    error: Record<keyof T, string[]>[keyof T];
+    touched: boolean | Record<keyof T, boolean>[keyof T];
+    isValid: boolean;
+};
+/**
+ * Helper to update a field value for a specific form
+ */
+export declare function updateFieldValue<T extends Record<string, unknown>>(formId: string, fieldName: keyof T, value: T[typeof fieldName]): void;
+/**
+ * Helper to get all registered field names for a form
+ */
+export declare function getFormFieldNames(formId: string): string[];
 /**
  * Store to track if the form is adding or updating to the Canvas
  */

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.9",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {