@getmicdrop/svelte-components 5.3.13 → 5.3.14

package/dist/stores/createFormStore.js

@@ -0,0 +1,386 @@
+import { writable, derived, get } from "svelte/store";
+import { showToast } from "./toaster";
+
+/**
+ * @typedef {Object} FormStoreOptions
+ * @property {Object} initialData - Initial form data
+ * @property {string} [endpoint] - API endpoint for saving
+ * @property {string} [successMessage] - Message to show on success
+ * @property {string} [errorMessage] - Message to show on error
+ * @property {Function} [validate] - Validation function returning { isValid, errors }
+ * @property {Function} [transformData] - Transform data before saving
+ * @property {Function} [onSuccess] - Callback after successful save
+ * @property {Function} [onError] - Callback after error
+ * @property {boolean} [showToasts=true] - Show toast notifications
+ */
+
+/**
+ * Creates a comprehensive form store with state management, dirty tracking,
+ * validation, and save handling.
+ * 
+ * @param {FormStoreOptions} options - Configuration options
+ * @returns {Object} Form store with all state and handlers
+ * 
+ * @example
+ * const form = createFormStore({
+ *   initialData: { name: '', email: '' },
+ *   endpoint: '/api/profile',
+ *   validate: (data) => {
+ *     const errors = {};
+ *     if (!data.name) errors.name = 'Name is required';
+ *     return { isValid: Object.keys(errors).length === 0, errors };
+ *   }
+ * });
+ * 
+ * // In Svelte component:
+ * <input bind:value={$form.data.name} on:input={form.checkDirty} />
+ * <button on:click={form.submit} disabled={$form.isLoading}>Save</button>
+ */
+export function createFormStore(options = {}) {
+  const {
+    initialData = {},
+    endpoint = "",
+    successMessage = "Changes saved successfully",
+    errorMessage = "Failed to save changes",
+    validate,
+    transformData,
+    onSuccess,
+    onError,
+    showToasts = true,
+  } = options;
+
+  // Deep clone initial data to prevent mutations
+  const cloneData = (data) => JSON.parse(JSON.stringify(data));
+
+  // Core state stores
+  const data = writable(cloneData(initialData));
+  const initial = writable(cloneData(initialData));
+  const errors = writable({});
+  const isLoading = writable(false);
+  const isSuccess = writable(false);
+  const saveError = writable(null);
+  const showErrors = writable(false);
+
+  // Derived states
+  const isDirty = derived(
+    [data, initial],
+    ([$data, $initial]) => JSON.stringify($data) !== JSON.stringify($initial)
+  );
+
+  const isValid = derived(
+    errors,
+    ($errors) => countErrors($errors) === 0
+  );
+
+  const errorCount = derived(
+    errors,
+    ($errors) => countErrors($errors)
+  );
+
+  const errorList = derived(
+    errors,
+    ($errors) => flattenErrors($errors)
+  );
+
+  /**
+   * Count total errors in a nested error object
+   */
+  function countErrors(errorObj) {
+    let count = 0;
+    const traverse = (obj) => {
+      if (!obj || typeof obj !== 'object') return;
+      Object.values(obj).forEach(value => {
+        if (typeof value === 'string' && value) {
+          count++;
+        } else if (typeof value === 'object') {
+          traverse(value);
+        }
+      });
+    };
+    traverse(errorObj);
+    return count;
+  }
+
+  /**
+   * Flatten nested errors into array of { field, message, section }
+   */
+  function flattenErrors(errorObj) {
+    const list = [];
+    const traverse = (obj, section = '') => {
+      if (!obj || typeof obj !== 'object') return;
+      Object.entries(obj).forEach(([key, value]) => {
+        if (typeof value === 'string' && value) {
+          list.push({ field: key, message: value, section });
+        } else if (typeof value === 'object') {
+          traverse(value, key);
+        }
+      });
+    };
+    traverse(errorObj);
+    return list;
+  }
+
+  /**
+   * Update form data (partial update)
+   */
+  function updateData(updates) {
+    data.update(current => ({ ...current, ...updates }));
+  }
+
+  /**
+   * Update a specific section of form data
+   */
+  function updateSection(section, updates) {
+    data.update(current => ({
+      ...current,
+      [section]: { ...current[section], ...updates }
+    }));
+  }
+
+  /**
+   * Update a specific field
+   */
+  function updateField(section, field, value) {
+    data.update(current => ({
+      ...current,
+      [section]: { ...current[section], [field]: value }
+    }));
+  }
+
+  /**
+   * Check if form is dirty (call after data changes)
+   */
+  function checkDirty() {
+    // Dirty state is computed automatically via derived store
+    // Reset success state when dirty
+    const dirty = get(isDirty);
+    if (dirty) {
+      isSuccess.set(false);
+    }
+    return dirty;
+  }
+
+  /**
+   * Run validation and update errors
+   * @returns {boolean} Whether form is valid
+   */
+  function runValidation() {
+    if (!validate) {
+      errors.set({});
+      return true;
+    }
+
+    const currentData = get(data);
+    const result = validate(currentData);
+    
+    if (typeof result === 'boolean') {
+      // Simple boolean validation
+      return result;
+    }
+    
+    // Object-based validation { isValid, errors }
+    errors.set(result.errors || {});
+    return result.isValid;
+  }
+
+  /**
+   * Clear all errors
+   */
+  function clearErrors() {
+    errors.set({});
+    showErrors.set(false);
+  }
+
+  /**
+   * Clear error for specific field
+   */
+  function clearFieldError(section, field) {
+    errors.update(current => {
+      if (current[section]) {
+        const updated = { ...current };
+        updated[section] = { ...current[section] };
+        delete updated[section][field];
+        return updated;
+      }
+      return current;
+    });
+  }
+
+  /**
+   * Set error for specific field
+   */
+  function setFieldError(section, field, message) {
+    errors.update(current => ({
+      ...current,
+      [section]: { ...current[section], [field]: message }
+    }));
+  }
+
+  /**
+   * Submit the form
+   * @param {string} [customEndpoint] - Override default endpoint
+   * @returns {Promise<boolean>} Success status
+   */
+  async function submit(customEndpoint = null) {
+    showErrors.set(true);
+
+    // Run validation
+    const valid = runValidation();
+    if (!valid) {
+      return false;
+    }
+
+    const targetEndpoint = customEndpoint || endpoint;
+    if (!targetEndpoint) {
+      console.error("No endpoint specified for form save");
+      return false;
+    }
+
+    isLoading.set(true);
+    isSuccess.set(false);
+    saveError.set(null);
+
+    try {
+      let submitData = get(data);
+      
+      // Transform data if transformer provided
+      if (transformData) {
+        submitData = transformData(submitData);
+      }
+
+      const res = await fetch(targetEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(submitData),
+      });
+
+      if (res.ok) {
+        isSuccess.set(true);
+        // Update initial data to current (form is now clean)
+        initial.set(cloneData(get(data)));
+        
+        if (showToasts && successMessage) {
+          showToast(successMessage, "success");
+        }
+        onSuccess?.();
+        return true;
+      } else {
+        const errorData = await res.json().catch(() => ({}));
+        const errorMsg = errorData.message || errorMessage;
+        saveError.set(errorMsg);
+        
+        if (showToasts) {
+          showToast(errorMsg, "error");
+        }
+        onError?.(errorMsg);
+        return false;
+      }
+    } catch (err) {
+      const errorMsg = err.message || "Something went wrong";
+      saveError.set(errorMsg);
+      
+      if (showToasts) {
+        showToast(errorMsg, "error");
+      }
+      onError?.(errorMsg);
+      return false;
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  /**
+   * Reset form to initial data
+   */
+  function reset() {
+    data.set(cloneData(get(initial)));
+    errors.set({});
+    showErrors.set(false);
+    isSuccess.set(false);
+    saveError.set(null);
+  }
+
+  /**
+   * Reset form to new initial data
+   */
+  function resetTo(newInitialData) {
+    const cloned = cloneData(newInitialData);
+    initial.set(cloned);
+    data.set(cloned);
+    errors.set({});
+    showErrors.set(false);
+    isSuccess.set(false);
+    saveError.set(null);
+  }
+
+  /**
+   * Reset only the success state
+   */
+  function resetSuccess() {
+    isSuccess.set(false);
+  }
+
+  /**
+   * Mark form as saved (update initial to match current)
+   */
+  function markSaved() {
+    initial.set(cloneData(get(data)));
+    isSuccess.set(true);
+  }
+
+  // Create a subscribable store that combines all state
+  const combinedStore = derived(
+    [data, errors, isLoading, isSuccess, saveError, isDirty, isValid, errorCount, showErrors],
+    ([$data, $errors, $isLoading, $isSuccess, $saveError, $isDirty, $isValid, $errorCount, $showErrors]) => ({
+      data: $data,
+      errors: $errors,
+      isLoading: $isLoading,
+      isSuccess: $isSuccess,
+      saveError: $saveError,
+      isDirty: $isDirty,
+      isValid: $isValid,
+      errorCount: $errorCount,
+      showErrors: $showErrors,
+    })
+  );
+
+  return {
+    // Subscribable combined store
+    subscribe: combinedStore.subscribe,
+    
+    // Individual stores (for direct subscription)
+    data,
+    errors,
+    isLoading,
+    isSuccess,
+    saveError,
+    isDirty,
+    isValid,
+    errorCount,
+    errorList,
+    showErrors,
+    
+    // Actions
+    updateData,
+    updateSection,
+    updateField,
+    checkDirty,
+    runValidation,
+    clearErrors,
+    clearFieldError,
+    setFieldError,
+    submit,
+    reset,
+    resetTo,
+    resetSuccess,
+    markSaved,
+    
+    // Convenience getters
+    get currentData() { return get(data); },
+    get currentErrors() { return get(errors); },
+    get loading() { return get(isLoading); },
+    get success() { return get(isSuccess); },
+    get dirty() { return get(isDirty); },
+    get valid() { return get(isValid); },
+  };
+}

package/dist/stores/createFormStore.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=createFormStore.spec.d.ts.map

package/dist/stores/createFormStore.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFormStore.spec.d.ts","sourceRoot":"","sources":["../../src/lib/stores/createFormStore.spec.js"],"names":[],"mappings":""}