@getmicdrop/svelte-components 2.0.5 → 2.0.7

package/dist/stores/formDataStore.d.ts

@@ -0,0 +1,17 @@
+export const profileFormData: import("svelte/store").Writable<{
+    basicInfo: {
+        firstName: string;
+        lastName: string;
+        email: string;
+        phone: string;
+        stageName: string;
+        location: string;
+    };
+    socialMedia: {
+        videoLink: string;
+    };
+    extraDetails: {};
+}>;
+export const initialFormData: import("svelte/store").Writable<null>;
+export const hasChanges: import("svelte/store").Readable<boolean>;
+//# sourceMappingURL=formDataStore.d.ts.map

package/dist/stores/formDataStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formDataStore.d.ts","sourceRoot":"","sources":["../../src/lib/stores/formDataStore.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,oEAA8C;AAE9C,kEAKE"}

package/dist/stores/formDataStore.js

@@ -0,0 +1,25 @@
+import { writable, derived } from "svelte/store";
+
+export const profileFormData = writable({
+    basicInfo: {
+        firstName: "",
+        lastName: "",
+        email: "",
+        phone: "",
+        stageName: "",
+        location: "",
+    },
+    socialMedia: {
+        videoLink: "",
+    },
+    extraDetails: {},
+});
+
+export const initialFormData = writable(null);
+
+export const hasChanges = derived(
+    [profileFormData, initialFormData],
+    ([$profileFormData, $initialFormData]) => {
+        return JSON.stringify($profileFormData) !== JSON.stringify($initialFormData);
+    }
+);

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

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

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

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

package/dist/stores/formDataStore.spec.js

@@ -0,0 +1,257 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { get } from 'svelte/store';
+import { profileFormData, initialFormData, hasChanges } from './formDataStore';
+
+describe('formDataStore', () => {
+  beforeEach(() => {
+    // Reset stores to initial state
+    profileFormData.set({
+      basicInfo: {
+        firstName: '',
+        lastName: '',
+        email: '',
+        phone: '',
+        stageName: '',
+        location: '',
+      },
+      socialMedia: {
+        videoLink: '',
+      },
+      extraDetails: {},
+    });
+    initialFormData.set(null);
+  });
+
+  describe('profileFormData', () => {
+    it('has initial structure with basicInfo', () => {
+      const data = get(profileFormData);
+      expect(data.basicInfo).toBeDefined();
+      expect(data.basicInfo.firstName).toBe('');
+      expect(data.basicInfo.lastName).toBe('');
+      expect(data.basicInfo.email).toBe('');
+    });
+
+    it('has initial structure with socialMedia', () => {
+      const data = get(profileFormData);
+      expect(data.socialMedia).toBeDefined();
+      expect(data.socialMedia.videoLink).toBe('');
+    });
+
+    it('has initial structure with extraDetails', () => {
+      const data = get(profileFormData);
+      expect(data.extraDetails).toBeDefined();
+    });
+
+    it('can be updated', () => {
+      profileFormData.update((data) => ({
+        ...data,
+        basicInfo: {
+          ...data.basicInfo,
+          firstName: 'John',
+          lastName: 'Doe',
+        },
+      }));
+
+      const data = get(profileFormData);
+      expect(data.basicInfo.firstName).toBe('John');
+      expect(data.basicInfo.lastName).toBe('Doe');
+    });
+
+    it('can be set completely', () => {
+      profileFormData.set({
+        basicInfo: {
+          firstName: 'Jane',
+          lastName: 'Smith',
+          email: 'jane@example.com',
+          phone: '555-1234',
+          stageName: 'JSmith',
+          location: 'LA',
+        },
+        socialMedia: {
+          videoLink: 'https://youtube.com/watch',
+        },
+        extraDetails: { bio: 'Test bio' },
+      });
+
+      const data = get(profileFormData);
+      expect(data.basicInfo.firstName).toBe('Jane');
+      expect(data.socialMedia.videoLink).toBe('https://youtube.com/watch');
+      expect(data.extraDetails.bio).toBe('Test bio');
+    });
+  });
+
+  describe('initialFormData', () => {
+    it('starts as null', () => {
+      expect(get(initialFormData)).toBe(null);
+    });
+
+    it('can store form data snapshot', () => {
+      const snapshot = {
+        basicInfo: {
+          firstName: 'Original',
+          lastName: 'Name',
+          email: '',
+          phone: '',
+          stageName: '',
+          location: '',
+        },
+        socialMedia: { videoLink: '' },
+        extraDetails: {},
+      };
+      initialFormData.set(snapshot);
+
+      expect(get(initialFormData)).toEqual(snapshot);
+    });
+  });
+
+  describe('hasChanges (derived store)', () => {
+    it('is false when both are null/empty', () => {
+      profileFormData.set({
+        basicInfo: {
+          firstName: '',
+          lastName: '',
+          email: '',
+          phone: '',
+          stageName: '',
+          location: '',
+        },
+        socialMedia: { videoLink: '' },
+        extraDetails: {},
+      });
+      initialFormData.set(null);
+
+      // The comparison will be false because null !== stringified object
+      expect(get(hasChanges)).toBe(true);
+    });
+
+    it('is false when form data matches initial', () => {
+      const data = {
+        basicInfo: {
+          firstName: 'John',
+          lastName: 'Doe',
+          email: 'john@example.com',
+          phone: '',
+          stageName: '',
+          location: '',
+        },
+        socialMedia: { videoLink: '' },
+        extraDetails: {},
+      };
+
+      profileFormData.set(data);
+      initialFormData.set(data);
+
+      expect(get(hasChanges)).toBe(false);
+    });
+
+    it('is true when form data differs from initial', () => {
+      const initial = {
+        basicInfo: {
+          firstName: 'John',
+          lastName: 'Doe',
+          email: 'john@example.com',
+          phone: '',
+          stageName: '',
+          location: '',
+        },
+        socialMedia: { videoLink: '' },
+        extraDetails: {},
+      };
+
+      const changed = {
+        ...initial,
+        basicInfo: { ...initial.basicInfo, firstName: 'Jane' },
+      };
+
+      initialFormData.set(initial);
+      profileFormData.set(changed);
+
+      expect(get(hasChanges)).toBe(true);
+    });
+
+    it('detects changes in socialMedia', () => {
+      const initial = {
+        basicInfo: {
+          firstName: '',
+          lastName: '',
+          email: '',
+          phone: '',
+          stageName: '',
+          location: '',
+        },
+        socialMedia: { videoLink: '' },
+        extraDetails: {},
+      };
+
+      initialFormData.set(initial);
+      profileFormData.set({
+        ...initial,
+        socialMedia: { videoLink: 'https://youtube.com/new' },
+      });
+
+      expect(get(hasChanges)).toBe(true);
+    });
+
+    it('detects changes in extraDetails', () => {
+      const initial = {
+        basicInfo: {
+          firstName: '',
+          lastName: '',
+          email: '',
+          phone: '',
+          stageName: '',
+          location: '',
+        },
+        socialMedia: { videoLink: '' },
+        extraDetails: {},
+      };
+
+      initialFormData.set(initial);
+      profileFormData.set({
+        ...initial,
+        extraDetails: { bio: 'New bio' },
+      });
+
+      expect(get(hasChanges)).toBe(true);
+    });
+
+    it('updates reactively when form changes', () => {
+      const initial = {
+        basicInfo: {
+          firstName: 'John',
+          lastName: 'Doe',
+          email: '',
+          phone: '',
+          stageName: '',
+          location: '',
+        },
+        socialMedia: { videoLink: '' },
+        extraDetails: {},
+      };
+
+      profileFormData.set(initial);
+      initialFormData.set(initial);
+
+      // No changes initially
+      expect(get(hasChanges)).toBe(false);
+
+      // Make a change
+      profileFormData.update((data) => ({
+        ...data,
+        basicInfo: { ...data.basicInfo, firstName: 'Jane' },
+      }));
+
+      // Now has changes
+      expect(get(hasChanges)).toBe(true);
+
+      // Revert the change
+      profileFormData.update((data) => ({
+        ...data,
+        basicInfo: { ...data.basicInfo, firstName: 'John' },
+      }));
+
+      // Back to no changes
+      expect(get(hasChanges)).toBe(false);
+    });
+  });
+});

package/dist/stores/formSave.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Creates a form save handler with loading and success states
+ * @param {Object} options - Configuration options
+ * @param {string} options.endpoint - API endpoint for saving
+ * @param {string} options.successMessage - Message to show on success
+ * @param {string} options.errorMessage - Message to show on error
+ * @param {Function} options.onSuccess - Callback after successful save
+ * @param {Function} options.onError - Callback after error
+ * @returns {Object} Form save store and handlers
+ */
+export function createFormSave(options?: {
+    endpoint: string;
+    successMessage: string;
+    errorMessage: string;
+    onSuccess: Function;
+    onError: Function;
+}): Object;
+/**
+ * Creates a simple dirty state tracker for forms
+ * @param {Object} initialData - Initial form data
+ * @returns {Object} Dirty state tracker
+ */
+export function createDirtyTracker(initialData: Object): Object;
+//# sourceMappingURL=formSave.d.ts.map

package/dist/stores/formSave.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formSave.d.ts","sourceRoot":"","sources":["../../src/lib/stores/formSave.js"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AACH,yCAPG;IAAwB,QAAQ,EAAxB,MAAM;IACU,cAAc,EAA9B,MAAM;IACU,YAAY,EAA5B,MAAM;IACY,SAAS;IACT,OAAO;CACjC,GAAU,MAAM,CA6FlB;AAED;;;;GAIG;AACH,gDAHW,MAAM,GACJ,MAAM,CAsBlB"}

package/dist/stores/formSave.js

@@ -0,0 +1,132 @@
+import { writable, get } from "svelte/store";
+import { showToast } from "./toaster";
+
+/**
+ * Creates a form save handler with loading and success states
+ * @param {Object} options - Configuration options
+ * @param {string} options.endpoint - API endpoint for saving
+ * @param {string} options.successMessage - Message to show on success
+ * @param {string} options.errorMessage - Message to show on error
+ * @param {Function} options.onSuccess - Callback after successful save
+ * @param {Function} options.onError - Callback after error
+ * @returns {Object} Form save store and handlers
+ */
+export function createFormSave(options = {}) {
+  const {
+    endpoint = "",
+    successMessage = "Changes saved successfully",
+    errorMessage = "Failed to save changes",
+    onSuccess,
+    onError,
+  } = options;
+
+  const isLoading = writable(false);
+  const isSuccess = writable(false);
+  const error = writable(null);
+
+  /**
+   * Reset success state (call when form becomes dirty)
+   */
+  function resetSuccess() {
+    isSuccess.set(false);
+  }
+
+  /**
+   * Save form data to the endpoint
+   * @param {Object} data - Data to save
+   * @param {string} customEndpoint - Override the default endpoint
+   * @returns {Promise<boolean>} Success status
+   */
+  async function save(data, customEndpoint = null) {
+    const targetEndpoint = customEndpoint || endpoint;
+
+    if (!targetEndpoint) {
+      console.error("No endpoint specified for form save");
+      return false;
+    }
+
+    isLoading.set(true);
+    isSuccess.set(false);
+    error.set(null);
+
+    try {
+      const res = await fetch(targetEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+
+      if (res.ok) {
+        isSuccess.set(true);
+        if (successMessage) {
+          showToast(successMessage, "success");
+        }
+        onSuccess?.();
+        return true;
+      } else {
+        const errorData = await res.json().catch(() => ({}));
+        const errorMsg = errorData.message || errorMessage;
+        error.set(errorMsg);
+        showToast(errorMsg, "error");
+        onError?.(errorMsg);
+        return false;
+      }
+    } catch (err) {
+      const errorMsg = err.message || "Something went wrong";
+      error.set(errorMsg);
+      showToast(errorMsg, "error");
+      onError?.(errorMsg);
+      return false;
+    } finally {
+      isLoading.set(false);
+    }
+  }
+
+  /**
+   * Reset all states
+   */
+  function reset() {
+    isLoading.set(false);
+    isSuccess.set(false);
+    error.set(null);
+  }
+
+  return {
+    isLoading,
+    isSuccess,
+    error,
+    save,
+    resetSuccess,
+    reset,
+    // Convenience getters
+    get loading() { return get(isLoading); },
+    get success() { return get(isSuccess); },
+  };
+}
+
+/**
+ * Creates a simple dirty state tracker for forms
+ * @param {Object} initialData - Initial form data
+ * @returns {Object} Dirty state tracker
+ */
+export function createDirtyTracker(initialData) {
+  const isDirty = writable(false);
+  let initial = JSON.stringify(initialData);
+
+  function check(currentData) {
+    const dirty = JSON.stringify(currentData) !== initial;
+    isDirty.set(dirty);
+    return dirty;
+  }
+
+  function reset(newInitialData) {
+    initial = JSON.stringify(newInitialData);
+    isDirty.set(false);
+  }
+
+  return {
+    isDirty,
+    check,
+    reset,
+  };
+}

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

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

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

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