@getmicdrop/svelte-components 5.17.0 → 5.17.3

package/dist/forms/createFormStore.svelte.spec.js

@@ -0,0 +1,388 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { z } from 'zod';
+import { createFormStore } from './createFormStore.svelte';
+import { flushSync } from 'svelte';
+const testSchema = z.object({
+    name: z.string().min(1, 'Name is required'),
+    email: z.string().email('Invalid email'),
+    age: z.number().min(0, 'Age must be positive').optional(),
+});
+const defaultData = {
+    name: '',
+    email: '',
+    age: undefined,
+};
+const validData = {
+    name: 'John',
+    email: 'john@example.com',
+    age: 30,
+};
+/**
+ * Helper to create a form store within an effect root context.
+ * Required because createFormStore uses $effect internally.
+ */
+function createTestStore(schema, initialData, options = {}) {
+    let store;
+    const cleanup = $effect.root(() => {
+        store = createFormStore(schema, initialData, options);
+    });
+    return { store: store, cleanup };
+}
+describe('createFormStore', () => {
+    let cleanups = [];
+    function makeStore(data = defaultData, options = {}) {
+        const { store, cleanup } = createTestStore(testSchema, data, options);
+        cleanups.push(cleanup);
+        return store;
+    }
+    afterEach(() => {
+        cleanups.forEach(fn => fn());
+        cleanups = [];
+    });
+    describe('initial state', () => {
+        it('creates a store with default data', () => {
+            const store = makeStore();
+            expect(store.data).toEqual(defaultData);
+        });
+        it('starts with null originalData', () => {
+            const store = makeStore();
+            expect(store.originalData).toBeNull();
+        });
+        it('starts with empty errors', () => {
+            const store = makeStore();
+            expect(store.errors).toEqual({});
+        });
+        it('starts with all UI states as false', () => {
+            const store = makeStore();
+            expect(store.isLoading).toBe(false);
+            expect(store.isSaving).toBe(false);
+            expect(store.isSaved).toBe(false);
+            expect(store.showErrors).toBe(false);
+        });
+        it('isDirty is false initially (edit mode)', () => {
+            const store = makeStore();
+            expect(store.isDirty).toBe(false);
+        });
+        it('isValid reflects schema validation', () => {
+            const store = makeStore();
+            expect(store.isValid).toBe(false);
+        });
+        it('isValid is true for valid data', () => {
+            const store = makeStore(validData);
+            expect(store.isValid).toBe(true);
+        });
+        it('canSave is false when not dirty', () => {
+            const store = makeStore(validData);
+            expect(store.canSave).toBe(false);
+        });
+    });
+    describe('data manipulation', () => {
+        it('can set data', () => {
+            const store = makeStore();
+            store.data = validData;
+            expect(store.data).toEqual(validData);
+        });
+        it('can set originalData', () => {
+            const store = makeStore();
+            store.originalData = validData;
+            expect(store.originalData).toEqual(validData);
+        });
+        it('can set errors', () => {
+            const store = makeStore();
+            store.errors = { name: 'Required' };
+            expect(store.errors).toEqual({ name: 'Required' });
+        });
+        it('can set UI state flags', () => {
+            const store = makeStore();
+            store.isLoading = true;
+            expect(store.isLoading).toBe(true);
+            store.isSaving = true;
+            expect(store.isSaving).toBe(true);
+            store.isSaved = true;
+            expect(store.isSaved).toBe(true);
+            store.showErrors = true;
+            expect(store.showErrors).toBe(true);
+        });
+    });
+    describe('setOriginal', () => {
+        it('sets both original and current data', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            expect(store.originalData).toEqual(validData);
+            expect(store.data).toEqual(validData);
+        });
+        it('clears errors and showErrors', () => {
+            const store = makeStore();
+            store.errors = { name: 'err' };
+            store.showErrors = true;
+            store.setOriginal(validData);
+            expect(store.errors).toEqual({});
+            expect(store.showErrors).toBe(false);
+        });
+        it('resets isSaved', () => {
+            const store = makeStore();
+            store.isSaved = true;
+            store.setOriginal(validData);
+            expect(store.isSaved).toBe(false);
+        });
+    });
+    describe('isDirty', () => {
+        it('is false when data matches original (edit mode)', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            expect(store.isDirty).toBe(false);
+        });
+        it('is true when data differs from original (edit mode)', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Jane' };
+            expect(store.isDirty).toBe(true);
+        });
+        it('is false when no originalData set (edit mode)', () => {
+            const store = makeStore();
+            store.data = validData;
+            expect(store.isDirty).toBe(false);
+        });
+    });
+    describe('isDirty (create mode)', () => {
+        it('is false when all fields empty', () => {
+            const store = makeStore(defaultData, { mode: 'create' });
+            expect(store.isDirty).toBe(false);
+        });
+        it('is true when string field has value', () => {
+            const store = makeStore(defaultData, { mode: 'create' });
+            store.data = { ...defaultData, name: 'test' };
+            expect(store.isDirty).toBe(true);
+        });
+        it('is true when number field has value', () => {
+            const store = makeStore(defaultData, { mode: 'create' });
+            store.data = { ...defaultData, age: 25 };
+            expect(store.isDirty).toBe(true);
+        });
+        it('handles array fields', () => {
+            const arraySchema = z.object({ tags: z.array(z.string()), name: z.string() });
+            const { store, cleanup } = createTestStore(arraySchema, { tags: [], name: '' }, { mode: 'create' });
+            cleanups.push(cleanup);
+            expect(store.isDirty).toBe(false);
+            store.data = { tags: ['test'], name: '' };
+            expect(store.isDirty).toBe(true);
+        });
+        it('handles boolean fields', () => {
+            const boolSchema = z.object({ active: z.boolean(), name: z.string() });
+            const { store, cleanup } = createTestStore(boolSchema, { active: false, name: '' }, { mode: 'create' });
+            cleanups.push(cleanup);
+            expect(store.isDirty).toBe(false);
+            store.data = { active: true, name: '' };
+            expect(store.isDirty).toBe(true);
+        });
+        it('handles null values', () => {
+            const nullSchema = z.object({ value: z.string().nullable() });
+            const { store, cleanup } = createTestStore(nullSchema, { value: null }, { mode: 'create' });
+            cleanups.push(cleanup);
+            expect(store.isDirty).toBe(false);
+        });
+    });
+    describe('validate', () => {
+        it('returns false and sets errors for invalid data', () => {
+            const store = makeStore();
+            const result = store.validate();
+            expect(result).toBe(false);
+            expect(store.showErrors).toBe(true);
+            expect(store.errors.name).toBeDefined();
+            expect(store.errors.email).toBeDefined();
+        });
+        it('returns true and clears errors for valid data', () => {
+            const store = makeStore(validData);
+            const result = store.validate();
+            expect(result).toBe(true);
+            expect(store.errors).toEqual({});
+        });
+        it('only keeps first error per field', () => {
+            const store = makeStore({ name: '', email: 'bad', age: undefined });
+            store.validate();
+            expect(typeof store.errors.name).toBe('string');
+            expect(typeof store.errors.email).toBe('string');
+        });
+    });
+    describe('validateField', () => {
+        it('returns undefined for valid field', () => {
+            const store = makeStore(validData);
+            expect(store.validateField('name')).toBeUndefined();
+        });
+        it('returns error message for invalid field', () => {
+            const store = makeStore();
+            expect(store.validateField('name')).toBeDefined();
+        });
+    });
+    describe('fieldError', () => {
+        it('returns undefined when showErrors is false', () => {
+            const store = makeStore();
+            store.errors = { name: 'Required' };
+            expect(store.fieldError('name')).toBeUndefined();
+        });
+        it('returns error when showErrors is true', () => {
+            const store = makeStore();
+            store.errors = { name: 'Required' };
+            store.showErrors = true;
+            expect(store.fieldError('name')).toBe('Required');
+        });
+        it('returns undefined for fields without errors', () => {
+            const store = makeStore();
+            store.showErrors = true;
+            expect(store.fieldError('age')).toBeUndefined();
+        });
+    });
+    describe('sections', () => {
+        const sections = {
+            basics: ['name', 'email'],
+            details: ['age'],
+        };
+        it('isSectionValid returns true for unknown section', () => {
+            const store = makeStore(defaultData, { sections });
+            expect(store.isSectionValid('nonexistent')).toBe(true);
+        });
+        it('isSectionValid returns false when section has errors', () => {
+            const store = makeStore(defaultData, { sections });
+            expect(store.isSectionValid('basics')).toBe(false);
+        });
+        it('isSectionValid returns true when section fields are valid', () => {
+            const store = makeStore({ name: 'John', email: 'john@test.com', age: undefined }, { sections });
+            expect(store.isSectionValid('basics')).toBe(true);
+        });
+        it('isSectionDirty returns false when no original data', () => {
+            const store = makeStore(defaultData, { sections });
+            expect(store.isSectionDirty('basics')).toBe(false);
+        });
+        it('isSectionDirty returns false when section has no changes', () => {
+            const store = makeStore(defaultData, { sections });
+            store.setOriginal(validData);
+            expect(store.isSectionDirty('basics')).toBe(false);
+        });
+        it('isSectionDirty returns true when section field changed', () => {
+            const store = makeStore(defaultData, { sections });
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Changed' };
+            expect(store.isSectionDirty('basics')).toBe(true);
+        });
+        it('isSectionDirty returns false for unchanged section', () => {
+            const store = makeStore(defaultData, { sections });
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Changed' };
+            expect(store.isSectionDirty('details')).toBe(false);
+        });
+        it('isSectionDirty returns false for unknown section', () => {
+            const store = makeStore(defaultData, { sections });
+            expect(store.isSectionDirty('nonexistent')).toBe(false);
+        });
+    });
+    describe('reset', () => {
+        it('restores data to initial values', () => {
+            const store = makeStore();
+            store.data = validData;
+            store.reset();
+            expect(store.data).toEqual(defaultData);
+        });
+        it('clears all state', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            store.isLoading = true;
+            store.isSaving = true;
+            store.isSaved = true;
+            store.showErrors = true;
+            store.errors = { name: 'err' };
+            store.reset();
+            expect(store.originalData).toBeNull();
+            expect(store.errors).toEqual({});
+            expect(store.isLoading).toBe(false);
+            expect(store.isSaving).toBe(false);
+            expect(store.isSaved).toBe(false);
+            expect(store.showErrors).toBe(false);
+        });
+    });
+    describe('resetToOriginal', () => {
+        it('restores data to original values', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Changed' };
+            store.resetToOriginal();
+            expect(store.data).toEqual(validData);
+        });
+        it('clears errors and showErrors', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            store.showErrors = true;
+            store.errors = { name: 'err' };
+            store.resetToOriginal();
+            expect(store.errors).toEqual({});
+            expect(store.showErrors).toBe(false);
+        });
+        it('does nothing when no original data', () => {
+            const store = makeStore();
+            store.data = validData;
+            store.resetToOriginal();
+            expect(store.data).toEqual(validData);
+        });
+    });
+    describe('save', () => {
+        it('runs save function on valid data', async () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Updated' };
+            const saveFn = vi.fn().mockResolvedValue({ id: 1 });
+            const result = await store.save(saveFn);
+            expect(saveFn).toHaveBeenCalled();
+            expect(result).toEqual({ id: 1 });
+            expect(store.isSaved).toBe(true);
+            expect(store.isSaving).toBe(false);
+        });
+        it('returns undefined when validation fails', async () => {
+            const store = makeStore();
+            const saveFn = vi.fn();
+            const result = await store.save(saveFn);
+            expect(result).toBeUndefined();
+            expect(saveFn).not.toHaveBeenCalled();
+        });
+        it('updates originalData after successful save', async () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            const updatedData = { ...validData, name: 'Updated' };
+            store.data = updatedData;
+            await store.save(async () => 'ok');
+            expect(store.originalData).toEqual(updatedData);
+        });
+        it('resets isSaving even on error', async () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Updated' };
+            const saveFn = vi.fn().mockRejectedValue(new Error('fail'));
+            await expect(store.save(saveFn)).rejects.toThrow('fail');
+            expect(store.isSaving).toBe(false);
+        });
+    });
+    describe('canSave', () => {
+        it('is true when dirty, valid, and not saving', () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Updated' };
+            expect(store.canSave).toBe(true);
+        });
+        it('is false when not dirty', () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            expect(store.canSave).toBe(false);
+        });
+        it('is false when not valid', () => {
+            const store = makeStore();
+            store.setOriginal(validData);
+            store.data = { ...validData, name: '' };
+            expect(store.canSave).toBe(false);
+        });
+        it('is false when saving', () => {
+            const store = makeStore(validData);
+            store.setOriginal(validData);
+            store.data = { ...validData, name: 'Updated' };
+            store.isSaving = true;
+            expect(store.canSave).toBe(false);
+        });
+    });
+});

package/dist/index.js

@@ -1,57 +1,57 @@
-// =============================================================================
-// PRIMITIVES - Pure visual components (Layer 1)
-// =============================================================================
-
-export * from './primitives/index.js';
-
-// =============================================================================
-// COMPONENTS - Semantic wrappers and layout components
-// =============================================================================
-
-export * from './components/index.js';
-
-// =============================================================================
-// RECIPES - Domain-agnostic compositions (Layer 2)
-// =============================================================================
-
-export * from './recipes/index.js';
-
-// =============================================================================
-// PATTERNS - Layout & flow components (Layer 3)
-// =============================================================================
-
-export * from './patterns/index.js';
-
-// =============================================================================
-// CALENDAR - Domain components (deferred migration to apps)
-// =============================================================================
-
-export * from './calendar/index.js';
-
-// =============================================================================
-// NON-COMPONENT EXPORTS
-// =============================================================================
-
-// Note: config.js and telemetry.js removed - they use import.meta.env which
-// is Vite-specific. Apps should define their own config/telemetry locally.
-
-// Constants
-export * from './constants/formOptions.js';
-export * from './constants/validation.js';
-
-// Presets - Domain-to-color mappings for migration
-export * from './presets/index.js';
-
-// Utils / Actions
-export { portal } from './utils/portal.js';
-export { safeSlide, bloom } from './utils/transitions.js';
-export { optimizeImage, supportsWebP, createImage } from './utils/imageOptimizer.js';
-export {
-  triggerHaptic,
-  isHapticAvailable,
-  getHapticForButtonVariant,
-} from './utils/haptic.js';
-/** @typedef {import('./utils/haptic.js').HapticStyle} HapticStyle */
-
-// Design Tokens
-export { typography } from './tokens/typography.js';
+// =============================================================================
+// PRIMITIVES - Pure visual components (Layer 1)
+// =============================================================================
+
+export * from './primitives/index.js';
+
+// =============================================================================
+// COMPONENTS - Semantic wrappers and layout components
+// =============================================================================
+
+export * from './components/index.js';
+
+// =============================================================================
+// RECIPES - Domain-agnostic compositions (Layer 2)
+// =============================================================================
+
+export * from './recipes/index.js';
+
+// =============================================================================
+// PATTERNS - Layout & flow components (Layer 3)
+// =============================================================================
+
+export * from './patterns/index.js';
+
+// =============================================================================
+// CALENDAR - Domain components (deferred migration to apps)
+// =============================================================================
+
+export * from './calendar/index.js';
+
+// =============================================================================
+// NON-COMPONENT EXPORTS
+// =============================================================================
+
+// Note: config.js and telemetry.js removed - they use import.meta.env which
+// is Vite-specific. Apps should define their own config/telemetry locally.
+
+// Constants
+export * from './constants/formOptions.js';
+export * from './constants/validation.js';
+
+// Presets - Domain-to-color mappings for migration
+export * from './presets/index.js';
+
+// Utils / Actions
+export { portal } from './utils/portal.js';
+export { safeSlide, bloom } from './utils/transitions.js';
+export { optimizeImage, supportsWebP, createImage } from './utils/imageOptimizer.js';
+export {
+  triggerHaptic,
+  isHapticAvailable,
+  getHapticForButtonVariant,
+} from './utils/haptic.js';
+/** @typedef {import('./utils/haptic.js').HapticStyle} HapticStyle */
+
+// Design Tokens
+export { typography } from './tokens/typography.js';