@getmicdrop/svelte-components 5.3.14 → 5.4.0

package/dist/forms/createFormStore.svelte.js

@@ -0,0 +1,223 @@
+/**
+ * Form Store Factory
+ *
+ * Creates a reactive form store with standardized patterns for:
+ * - Dirty tracking
+ * - Zod validation
+ * - UI states (loading, saving, saved)
+ * - Section-level validation for progressive forms
+ */
+import { z } from 'zod';
+// ============================================================================
+// Implementation
+// ============================================================================
+export function createFormStore(schema, initialData, options = {}) {
+    const { sections = {}, mode = 'edit' } = options;
+    // ---------------------------------------------------------------------------
+    // State
+    // ---------------------------------------------------------------------------
+    let data = $state({ ...initialData });
+    let originalData = $state(null);
+    let errors = $state({});
+    let isLoading = $state(false);
+    let isSaving = $state(false);
+    let isSaved = $state(false);
+    let showErrors = $state(false);
+    // ---------------------------------------------------------------------------
+    // Derived States
+    // ---------------------------------------------------------------------------
+    const isDirty = $derived.by(() => {
+        if (mode === 'create') {
+            // In create mode, dirty if any field has a non-empty value
+            return Object.values(data).some(value => {
+                if (Array.isArray(value))
+                    return value.length > 0;
+                if (typeof value === 'string')
+                    return value.trim() !== '';
+                if (typeof value === 'number')
+                    return true;
+                if (typeof value === 'boolean')
+                    return value !== false;
+                return value !== null && value !== undefined;
+            });
+        }
+        // In edit mode, compare to original
+        if (!originalData)
+            return false;
+        return JSON.stringify(data) !== JSON.stringify(originalData);
+    });
+    const isValid = $derived.by(() => {
+        const result = schema.safeParse(data);
+        return result.success;
+    });
+    const canSave = $derived(isDirty && isValid && !isSaving);
+    // Auto-reset isSaved when form becomes dirty
+    $effect(() => {
+        if (isDirty && isSaved) {
+            isSaved = false;
+        }
+    });
+    // ---------------------------------------------------------------------------
+    // Methods
+    // ---------------------------------------------------------------------------
+    function setOriginal(newData) {
+        originalData = { ...newData };
+        data = { ...newData };
+        errors = {};
+        showErrors = false;
+        isSaved = false;
+    }
+    function validate() {
+        showErrors = true;
+        const result = schema.safeParse(data);
+        if (!result.success) {
+            const fieldErrors = {};
+            for (const issue of result.error.issues) {
+                const field = issue.path[0];
+                if (!fieldErrors[field]) {
+                    fieldErrors[field] = issue.message;
+                }
+            }
+            errors = fieldErrors;
+            return false;
+        }
+        errors = {};
+        return true;
+    }
+    function validateField(field) {
+        // Create a partial schema for just this field if possible
+        const result = schema.safeParse(data);
+        if (result.success)
+            return undefined;
+        const fieldIssue = result.error.issues.find(issue => issue.path[0] === field);
+        return fieldIssue?.message;
+    }
+    function fieldError(field) {
+        if (!showErrors)
+            return undefined;
+        return errors[field];
+    }
+    function isSectionValid(sectionName) {
+        const sectionFields = sections[sectionName];
+        if (!sectionFields)
+            return true;
+        // Check each field in the section
+        const result = schema.safeParse(data);
+        if (result.success)
+            return true;
+        // Check if any errors are in this section's fields
+        const sectionErrors = result.error.issues.filter(issue => sectionFields.includes(issue.path[0]));
+        return sectionErrors.length === 0;
+    }
+    function isSectionDirty(sectionName) {
+        const sectionFields = sections[sectionName];
+        if (!sectionFields || !originalData)
+            return false;
+        return sectionFields.some(field => {
+            const currentVal = JSON.stringify(data[field]);
+            const originalVal = JSON.stringify(originalData[field]);
+            return currentVal !== originalVal;
+        });
+    }
+    function reset() {
+        data = { ...initialData };
+        originalData = null;
+        errors = {};
+        showErrors = false;
+        isLoading = false;
+        isSaving = false;
+        isSaved = false;
+    }
+    function resetToOriginal() {
+        if (originalData) {
+            data = { ...originalData };
+            errors = {};
+            showErrors = false;
+            isSaved = false;
+        }
+    }
+    async function save(fn) {
+        if (!validate())
+            return undefined;
+        isSaving = true;
+        try {
+            const result = await fn();
+            // Update original to current (form is now clean)
+            originalData = { ...data };
+            isSaved = true;
+            return result;
+        }
+        finally {
+            isSaving = false;
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Return Store Interface
+    // ---------------------------------------------------------------------------
+    return {
+        // Data (read/write via getters/setters)
+        get data() {
+            return data;
+        },
+        set data(value) {
+            data = value;
+        },
+        get originalData() {
+            return originalData;
+        },
+        set originalData(value) {
+            originalData = value;
+        },
+        get errors() {
+            return errors;
+        },
+        set errors(value) {
+            errors = value;
+        },
+        // UI States (read/write)
+        get isLoading() {
+            return isLoading;
+        },
+        set isLoading(value) {
+            isLoading = value;
+        },
+        get isSaving() {
+            return isSaving;
+        },
+        set isSaving(value) {
+            isSaving = value;
+        },
+        get isSaved() {
+            return isSaved;
+        },
+        set isSaved(value) {
+            isSaved = value;
+        },
+        get showErrors() {
+            return showErrors;
+        },
+        set showErrors(value) {
+            showErrors = value;
+        },
+        // Derived States (readonly)
+        get isDirty() {
+            return isDirty;
+        },
+        get isValid() {
+            return isValid;
+        },
+        get canSave() {
+            return canSave;
+        },
+        // Methods
+        setOriginal,
+        validate,
+        validateField,
+        fieldError,
+        isSectionValid,
+        isSectionDirty,
+        reset,
+        resetToOriginal,
+        save,
+    };
+}

package/dist/forms/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Form Utilities
+ *
+ * Provides standardized form state management with:
+ * - Dirty tracking (original vs current)
+ * - Zod validation
+ * - Loading/saving/saved states
+ * - Section-level validation for progressive forms
+ *
+ * @example Basic usage with formData object
+ * ```typescript
+ * import { createFormStore } from '@getmicdrop/svelte-components/forms';
+ * import { z } from 'zod';
+ *
+ * const schema = z.object({
+ *   name: z.string().min(1, 'Name is required'),
+ *   email: z.string().email('Invalid email'),
+ * });
+ *
+ * const form = createFormStore(schema, { name: '', email: '' });
+ *
+ * // In component:
+ * <Input bind:value={form.data.name} error={form.fieldError('name')} />
+ * <Button disabled={!form.canSave} loading={form.isSaving} success={form.isSaved}>
+ *   Save
+ * </Button>
+ * ```
+ *
+ * @example Progressive form with sections
+ * ```typescript
+ * const form = createFormStore(schema, initialData, {
+ *   sections: {
+ *     basics: ['name', 'email'],
+ *     details: ['bio', 'website'],
+ *   }
+ * });
+ *
+ * // Check if section is complete
+ * {#if form.isSectionValid('basics')}
+ *   <DetailsSection />
+ * {/if}
+ * ```
+ *
+ * @example Field tracker for individual $state fields
+ * ```typescript
+ * import { createFieldTracker } from '@getmicdrop/svelte-components/forms';
+ *
+ * let name = $state('');
+ * let email = $state('');
+ * let originalData = $state({ name: '', email: '' });
+ *
+ * const tracker = createFieldTracker(() => {
+ *   return name !== originalData.name || email !== originalData.email;
+ * });
+ *
+ * // Use tracker.isSaving, tracker.isSaved, tracker.save(), etc.
+ * ```
+ */
+export { createFormStore, type FormStoreOptions, type FormStore, } from './createFormStore.svelte';
+export { createFieldTracker, type FieldTracker, } from './createFieldTracker.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/forms/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,OAAO,EACL,eAAe,EACf,KAAK,gBAAgB,EACrB,KAAK,SAAS,GACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,kBAAkB,EAClB,KAAK,YAAY,GAClB,MAAM,6BAA6B,CAAC"}

package/dist/forms/index.js

@@ -0,0 +1,60 @@
+/**
+ * Form Utilities
+ *
+ * Provides standardized form state management with:
+ * - Dirty tracking (original vs current)
+ * - Zod validation
+ * - Loading/saving/saved states
+ * - Section-level validation for progressive forms
+ *
+ * @example Basic usage with formData object
+ * ```typescript
+ * import { createFormStore } from '@getmicdrop/svelte-components/forms';
+ * import { z } from 'zod';
+ *
+ * const schema = z.object({
+ *   name: z.string().min(1, 'Name is required'),
+ *   email: z.string().email('Invalid email'),
+ * });
+ *
+ * const form = createFormStore(schema, { name: '', email: '' });
+ *
+ * // In component:
+ * <Input bind:value={form.data.name} error={form.fieldError('name')} />
+ * <Button disabled={!form.canSave} loading={form.isSaving} success={form.isSaved}>
+ *   Save
+ * </Button>
+ * ```
+ *
+ * @example Progressive form with sections
+ * ```typescript
+ * const form = createFormStore(schema, initialData, {
+ *   sections: {
+ *     basics: ['name', 'email'],
+ *     details: ['bio', 'website'],
+ *   }
+ * });
+ *
+ * // Check if section is complete
+ * {#if form.isSectionValid('basics')}
+ *   <DetailsSection />
+ * {/if}
+ * ```
+ *
+ * @example Field tracker for individual $state fields
+ * ```typescript
+ * import { createFieldTracker } from '@getmicdrop/svelte-components/forms';
+ *
+ * let name = $state('');
+ * let email = $state('');
+ * let originalData = $state({ name: '', email: '' });
+ *
+ * const tracker = createFieldTracker(() => {
+ *   return name !== originalData.name || email !== originalData.email;
+ * });
+ *
+ * // Use tracker.isSaving, tracker.isSaved, tracker.save(), etc.
+ * ```
+ */
+export { createFormStore, } from './createFormStore.svelte';
+export { createFieldTracker, } from './createFieldTracker.svelte';