@getmicdrop/svelte-components 5.4.1 → 5.5.0

package/dist/patterns/forms/FormValidationSummary.spec.js

@@ -1,203 +1,181 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import FormValidationSummary from './FormValidationSummary.svelte';
-
-describe('FormValidationSummary Component', () => {
-  it('does not render when show is false', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: false,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('does not render when there are no errors', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: {},
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('does not render when errors have empty messages', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: '', lastName: '   ' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('renders when show is true and has errors', () => {
-    const { container, getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'First name is required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeTruthy();
-    expect(getByText('Please fix the following:')).toBeTruthy();
-  });
-
-  it('displays error field labels', () => {
-    const { getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', email: 'Invalid' },
-        fieldLabels: { firstName: 'First Name', email: 'Email Address' },
-      },
-    });
-    expect(getByText('First Name')).toBeTruthy();
-    expect(getByText('Email Address')).toBeTruthy();
-  });
-
-  it('uses field key as label when no label provided', () => {
-    const { getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: {},
-      },
-    });
-    expect(getByText('firstName')).toBeTruthy();
-  });
-
-  it('renders multiple error fields', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: {
-          firstName: 'Required',
-          lastName: 'Required',
-          email: 'Invalid format',
-        },
-        fieldLabels: {
-          firstName: 'First Name',
-          lastName: 'Last Name',
-          email: 'Email',
-        },
-      },
-    });
-    const listItems = container.querySelectorAll('li');
-    expect(listItems.length).toBe(3);
-  });
-
-  it('has role="alert" and aria-live="polite"', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.getAttribute('aria-live')).toBe('polite');
-  });
-
-  it('renders clickable buttons for each error', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', email: 'Invalid' },
-        fieldLabels: { firstName: 'First Name', email: 'Email' },
-      },
-    });
-    const buttons = container.querySelectorAll('button[type="button"]');
-    expect(buttons.length).toBe(2);
-  });
-
-  it('calls scrollIntoView on button click', async () => {
-    // Create a mock element
-    const mockElement = document.createElement('input');
-    mockElement.id = 'firstName';
-    mockElement.scrollIntoView = vi.fn();
-    mockElement.focus = vi.fn();
-    document.body.appendChild(mockElement);
-
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: { firstName: 'First Name' },
-      },
-    });
-
-    const button = container.querySelector('button[type="button"]');
-    await fireEvent.click(button);
-
-    expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
-      behavior: 'smooth',
-      block: 'center',
-    });
-
-    // Clean up
-    document.body.removeChild(mockElement);
-  });
-
-  it('uses custom fieldIds for scrolling', async () => {
-    const mockElement = document.createElement('input');
-    mockElement.id = 'custom-first-name-input';
-    mockElement.scrollIntoView = vi.fn();
-    mockElement.focus = vi.fn();
-    document.body.appendChild(mockElement);
-
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: { firstName: 'First Name' },
-        fieldIds: { firstName: 'custom-first-name-input' },
-      },
-    });
-
-    const button = container.querySelector('button[type="button"]');
-    await fireEvent.click(button);
-
-    expect(mockElement.scrollIntoView).toHaveBeenCalled();
-
-    document.body.removeChild(mockElement);
-  });
-
-  it('has red background styling', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('bg-red-50')).toBe(true);
-    expect(alert.classList.contains('border-red-200')).toBe(true);
-  });
-
-  it('renders warning icon', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const svg = container.querySelector('svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('filters out null and undefined error values', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', lastName: null, email: undefined },
-        fieldLabels: { firstName: 'First Name', lastName: 'Last Name', email: 'Email' },
-      },
-    });
-    const listItems = container.querySelectorAll('li');
-    expect(listItems.length).toBe(1);
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import FormValidationSummary from './FormValidationSummary.svelte';
+describe('FormValidationSummary Component', () => {
+    it('does not render when show is false', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: false,
+                errors: { firstName: 'Required' },
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert).toBeFalsy();
+    });
+    it('does not render when there are no errors', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: {},
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert).toBeFalsy();
+    });
+    it('does not render when errors have empty messages', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: '', lastName: '   ' },
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert).toBeFalsy();
+    });
+    it('renders when show is true and has errors', () => {
+        const { container, getByText } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'First name is required' },
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert).toBeTruthy();
+        expect(getByText('Please fix the following:')).toBeTruthy();
+    });
+    it('displays error field labels', () => {
+        const { getByText } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required', email: 'Invalid' },
+                fieldLabels: { firstName: 'First Name', email: 'Email Address' },
+            },
+        });
+        expect(getByText('First Name')).toBeTruthy();
+        expect(getByText('Email Address')).toBeTruthy();
+    });
+    it('uses field key as label when no label provided', () => {
+        const { getByText } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+                fieldLabels: {},
+            },
+        });
+        expect(getByText('firstName')).toBeTruthy();
+    });
+    it('renders multiple error fields', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: {
+                    firstName: 'Required',
+                    lastName: 'Required',
+                    email: 'Invalid format',
+                },
+                fieldLabels: {
+                    firstName: 'First Name',
+                    lastName: 'Last Name',
+                    email: 'Email',
+                },
+            },
+        });
+        const listItems = container.querySelectorAll('li');
+        expect(listItems.length).toBe(3);
+    });
+    it('has role="alert" and aria-live="polite"', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert.getAttribute('aria-live')).toBe('polite');
+    });
+    it('renders clickable buttons for each error', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required', email: 'Invalid' },
+                fieldLabels: { firstName: 'First Name', email: 'Email' },
+            },
+        });
+        const buttons = container.querySelectorAll('button[type="button"]');
+        expect(buttons.length).toBe(2);
+    });
+    it('calls scrollIntoView on button click', async () => {
+        // Create a mock element
+        const mockElement = document.createElement('input');
+        mockElement.id = 'firstName';
+        mockElement.scrollIntoView = vi.fn();
+        mockElement.focus = vi.fn();
+        document.body.appendChild(mockElement);
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+                fieldLabels: { firstName: 'First Name' },
+            },
+        });
+        const button = container.querySelector('button[type="button"]');
+        await fireEvent.click(button);
+        expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
+            behavior: 'smooth',
+            block: 'center',
+        });
+        // Clean up
+        document.body.removeChild(mockElement);
+    });
+    it('uses custom fieldIds for scrolling', async () => {
+        const mockElement = document.createElement('input');
+        mockElement.id = 'custom-first-name-input';
+        mockElement.scrollIntoView = vi.fn();
+        mockElement.focus = vi.fn();
+        document.body.appendChild(mockElement);
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+                fieldLabels: { firstName: 'First Name' },
+                fieldIds: { firstName: 'custom-first-name-input' },
+            },
+        });
+        const button = container.querySelector('button[type="button"]');
+        await fireEvent.click(button);
+        expect(mockElement.scrollIntoView).toHaveBeenCalled();
+        document.body.removeChild(mockElement);
+    });
+    it('has red background styling', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+            },
+        });
+        const alert = container.querySelector('[role="alert"]');
+        expect(alert.classList.contains('bg-red-50')).toBe(true);
+        expect(alert.classList.contains('border-red-200')).toBe(true);
+    });
+    it('renders warning icon', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required' },
+            },
+        });
+        const svg = container.querySelector('svg');
+        expect(svg).toBeTruthy();
+    });
+    it('filters out null and undefined error values', () => {
+        const { container } = render(FormValidationSummary, {
+            props: {
+                show: true,
+                errors: { firstName: 'Required', lastName: null, email: undefined },
+                fieldLabels: { firstName: 'First Name', lastName: 'Last Name', email: 'Email' },
+            },
+        });
+        const listItems = container.querySelectorAll('li');
+        expect(listItems.length).toBe(1);
+    });
+});

package/dist/patterns/forms/FormValidationSummary.stories.svelte

@@ -70,20 +70,20 @@
       show={true}
     />
 
-    <div class="space-y-4 mt-4">
-      <div>
-        <label id="firstName" class="block text-sm font-medium mb-1">First Name</label>
-        <input type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
-      </div>
-      <div>
-        <label id="email" class="block text-sm font-medium mb-1">Email</label>
-        <input type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
-      </div>
-      <div>
-        <label id="phone" class="block text-sm font-medium mb-1">Phone</label>
-        <input type="tel" class="w-full px-3 py-2 border border-red-300 rounded" />
-      </div>
-    </div>
+    <div class="space-y-4 mt-4">
+      <div>
+        <label for="firstName" class="block text-sm font-medium mb-1">First Name</label>
+        <input id="firstName" type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
+      </div>
+      <div>
+        <label for="email" class="block text-sm font-medium mb-1">Email</label>
+        <input id="email" type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
+      </div>
+      <div>
+        <label for="phone" class="block text-sm font-medium mb-1">Phone</label>
+        <input id="phone" type="tel" class="w-full px-3 py-2 border border-red-300 rounded" />
+      </div>
+    </div>
   </div>
 </Story>
 

package/dist/patterns/forms/FormValidationSummary.svelte

@@ -1,38 +1,45 @@
-<script>
-  import { slide } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-
-  let {
-    errors = {},
-    show = false,
-    fieldLabels = {},
-    fieldIds = {},
-  } = $props();
-
-  // Get list of fields with errors
-  let errorFields = $derived(Object.entries(errors)
-    .filter(([_, message]) => message && message.trim() !== "")
-    .map(([key, message]) => ({
-      key,
-      label: fieldLabels[key] || key,
-      message,
-      elementId: fieldIds[key] || key
-    })));
-
-  let hasErrors = $derived(errorFields.length > 0);
-
-  function scrollToField(elementId) {
-    const element = document.getElementById(elementId);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "center" });
-      if (element.focus) {
-        setTimeout(() => element.focus(), 300);
-      }
-    }
-  }
-</script>
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+
+  interface Props {
+    errors?: Record<string, string | null | undefined>;
+    show?: boolean;
+    fieldLabels?: Record<string, string>;
+    fieldIds?: Record<string, string>;
+  }
+
+  let {
+    errors = {},
+    show = false,
+    fieldLabels = {},
+    fieldIds = {},
+  }: Props = $props();
+
+  // Get list of fields with errors
+  let errorFields = $derived(Object.entries(errors)
+    .filter(([_, message]) => message && message.trim() !== "")
+    .map(([key, message]) => ({
+      key,
+      label: fieldLabels[key] || key,
+      message,
+      elementId: fieldIds[key] || key
+    })));
+
+  let hasErrors = $derived(errorFields.length > 0);
+
+  function scrollToField(elementId: string) {
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "center" });
+      if (element.focus) {
+        setTimeout(() => element.focus(), 300);
+      }
+    }
+  }
+</script>
 
 {#if show && hasErrors}
   <div
@@ -42,7 +49,7 @@
     aria-live="polite"
   >
     <div class="flex items-start gap-2">
-      <WarningIcon className="shrink-0 text-red-600 dark:text-red-500 mt-0.5" />
+      <WarningIcon class="shrink-0 text-red-600 dark:text-red-500 mt-0.5" />
       <div class="flex-1">
         <p class="text-sm font-medium text-red-800 dark:text-red-400">
           Please fix the following:

package/dist/patterns/forms/FormValidationSummary.svelte.d.ts

@@ -1,18 +1,10 @@
-export default FormValidationSummary;
-type FormValidationSummary = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const FormValidationSummary: import("svelte").Component<{
-    errors?: Record<string, any>;
-    show?: boolean;
-    fieldLabels?: Record<string, any>;
-    fieldIds?: Record<string, any>;
-}, {}, "">;
-type $$ComponentProps = {
-    errors?: Record<string, any>;
+interface Props {
+    errors?: Record<string, string | null | undefined>;
     show?: boolean;
-    fieldLabels?: Record<string, any>;
-    fieldIds?: Record<string, any>;
-};
+    fieldLabels?: Record<string, string>;
+    fieldIds?: Record<string, string>;
+}
+declare const FormValidationSummary: import("svelte").Component<Props, {}, "">;
+type FormValidationSummary = ReturnType<typeof FormValidationSummary>;
+export default FormValidationSummary;
 //# sourceMappingURL=FormValidationSummary.svelte.d.ts.map

package/dist/patterns/forms/FormValidationSummary.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormValidationSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormValidationSummary.svelte.js"],"names":[],"mappings":";;;;;AAoEA;aAtD8B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAAS,OAAO;kBAAgB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;eAAa,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAsDhE;wBAtDjD;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}
+{"version":3,"file":"FormValidationSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormValidationSummary.svelte.ts"],"names":[],"mappings":"AASE,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AA8DH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

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

@@ -0,0 +1,5 @@
+export { default as FormActions } from "./FormActions.svelte";
+export { default as FormGrid } from "./FormGrid.svelte";
+export { default as FormSection } from "./FormSection.svelte";
+export { default as FormValidationSummary } from "./FormValidationSummary.svelte";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/patterns/forms/index.js

@@ -0,0 +1,5 @@
+// Form pattern components - layout and structure for forms
+export { default as FormActions } from './FormActions.svelte';
+export { default as FormGrid } from './FormGrid.svelte';
+export { default as FormSection } from './FormSection.svelte';
+export { default as FormValidationSummary } from './FormValidationSummary.svelte';

package/dist/patterns/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./forms/index.js";
+export * from "./navigation/index.js";
+export * from "./page/index.js";
+export * from "./data/index.js";
+export * from "./layout/index.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/patterns/index.js

@@ -0,0 +1,18 @@
+// =============================================================================
+// PATTERNS - Layout & flow components (Layer 3)
+// =============================================================================
+
+// Forms - re-export from forms/index.js
+export * from './forms/index.js';
+
+// Navigation - re-export from navigation/index.js
+export * from './navigation/index.js';
+
+// Page - re-export from page/index.js
+export * from './page/index.js';
+
+// Data - re-export from data/index.js
+export * from './data/index.js';
+
+// Layout - re-export from layout/index.js
+export * from './layout/index.js';