@getmicdrop/svelte-components 5.5.1 → 5.5.4

package/dist/primitives/ValidationError.stories.svelte

@@ -1,49 +1,49 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import ValidationError from './ValidationError.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/ValidationError',
-    component: ValidationError,
-    tags: ['autodocs'],
-    argTypes: {
-      error: { control: 'text' },
-      show: { control: 'boolean' },
-      id: { control: 'text' },
-    },
-  });
-
-</script>
-
-<script>
-  </script>
-
-
-<Story
-  name="Default"
-  args={{
-    error: 'This field is required',
-    show: true,
-  }}
-/>
-
-<Story
-  name="Email Validation"
-  args={{
-    error: 'Please enter a valid email address',
-    show: true,
-  }}
-/>
-
-<Story
-  name="Password Validation"
-  args={{
-    error: 'Password must be at least 8 characters',
-    show: true,
-  }}
-/>
-
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import ValidationError from './ValidationError.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/ValidationError',
+    component: ValidationError,
+    tags: ['autodocs'],
+    argTypes: {
+      error: { control: 'text' },
+      show: { control: 'boolean' },
+      id: { control: 'text' },
+    },
+  });
+
+</script>
+
+<script>
+  </script>
+
+
+<Story
+  name="Default"
+  args={{
+    error: 'This field is required',
+    show: true,
+  }}
+/>
+
+<Story
+  name="Email Validation"
+  args={{
+    error: 'Please enter a valid email address',
+    show: true,
+  }}
+/>
+
+<Story
+  name="Password Validation"
+  args={{
+    error: 'Password must be at least 8 characters',
+    show: true,
+  }}
+/>
+
 <Story name="With Input Field">
   <div class="max-w-md">
     <label for="email-field" class="block text-sm font-medium mb-1">Email Address</label>
@@ -87,26 +87,26 @@
     <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Validation error is hidden until field is touched</p>
   </div>
 </Story>
-
-<Story name="Accessible with aria-describedby">
-  <div class="max-w-md">
-    <label for="accessible-email" class="block text-sm font-medium mb-1">Email Address</label>
-    <input
-      id="accessible-email"
-      type="email"
-      aria-describedby="email-error"
-      aria-invalid="true"
-      class="w-full px-3 py-2 border border-red-300 rounded focus:ring-red-500 focus:border-red-500"
-      value="invalid-email"
-    />
-    <ValidationError
-      id="email-error"
-      error="Please enter a valid email address"
-      show={true}
-    />
-    <p class="text-sm text-gray-500 mt-4">
-      This example shows proper accessibility: the input references the error via aria-describedby,
-      and the error has aria-live="assertive" for screen reader announcements.
-    </p>
-  </div>
-</Story>
+
+<Story name="Accessible with aria-describedby">
+  <div class="max-w-md">
+    <label for="accessible-email" class="block text-sm font-medium mb-1">Email Address</label>
+    <input
+      id="accessible-email"
+      type="email"
+      aria-describedby="email-error"
+      aria-invalid="true"
+      class="w-full px-3 py-2 border border-red-300 rounded focus:ring-red-500 focus:border-red-500"
+      value="invalid-email"
+    />
+    <ValidationError
+      id="email-error"
+      error="Please enter a valid email address"
+      show={true}
+    />
+    <p class="text-sm text-gray-500 mt-4">
+      This example shows proper accessibility: the input references the error via aria-describedby,
+      and the error has aria-live="assertive" for screen reader announcements.
+    </p>
+  </div>
+</Story>

package/dist/primitives/ValidationError.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-  import { slide } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import WarningIcon from "./Icons/WarningIcon.svelte";
-
-  interface Props {
-    /** Error message to display */
-    error?: string;
-    /** Whether to show the error */
-    show?: boolean;
-    /** Optional ID for aria-describedby linking from input fields */
-    id?: string;
-  }
-
-  let { error = '', show = true, id }: Props = $props();
-</script>
-
-{#if error && show}
-  <div
-    transition:slide={{ duration: 300, easing: cubicOut }}
-    class="flex items-start gap-1.5 text-red-600 dark:text-red-500 mt-2"
-    role="alert"
-    aria-live="assertive"
-    {id}
-  >
-    <WarningIcon class="shrink-0 mt-[1px]" />
-    <p class="text-sm leading-tight m-0">{error}</p>
-  </div>
-{/if}
+<script lang="ts">
+  import { safeSlide } from "../utils/transitions.js";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "./Icons/WarningIcon.svelte";
+
+  interface Props {
+    /** Error message to display */
+    error?: string;
+    /** Whether to show the error */
+    show?: boolean;
+    /** Optional ID for aria-describedby linking from input fields */
+    id?: string;
+  }
+
+  let { error = '', show = true, id }: Props = $props();
+</script>
+
+{#if error && show}
+  <div
+    transition:safeSlide={{ duration: 300, easing: cubicOut }}
+    class="flex items-start gap-1.5 text-red-600 dark:text-red-500 mt-2"
+    role="alert"
+    aria-live="assertive"
+    {id}
+  >
+    <WarningIcon class="shrink-0 mt-[1px]" />
+    <p class="text-sm leading-tight m-0">{error}</p>
+  </div>
+{/if}

package/dist/recipes/CropImage/CropImage.spec.js

@@ -1,216 +1,216 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
-
-// Mock svelte-easy-crop with the mock Svelte component
-vi.mock('svelte-easy-crop', async () => {
-  const MockCropper = await import('../../__mocks__/svelte-easy-crop.svelte');
-  return { default: MockCropper.default };
-});
-
-// Import after mock is set up
-import CropImage from './CropImage.svelte';
-
-describe('CropImage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('when showModal is false', () => {
-    it('does not render modal content', () => {
-      const { container } = render(CropImage, {
-        props: { showModal: false, imageSrc: '' },
-      });
-      expect(container.querySelector('.fixed')).toBeNull();
-    });
-  });
-
-  describe('when showModal is true', () => {
-    const defaultProps = {
-      showModal: true,
-      imageSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
-      onSave: vi.fn(),
-      onCancel: vi.fn(),
-    };
-
-    it('renders the modal', () => {
-      const { container } = render(CropImage, { props: defaultProps });
-      expect(container.querySelector('.fixed')).toBeInTheDocument();
-    });
-
-    it('renders the header with title', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByText('Crop image')).toBeInTheDocument();
-    });
-
-    it('renders cancel button', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByText('Cancel')).toBeInTheDocument();
-    });
-
-    it('renders save button', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByText('Save')).toBeInTheDocument();
-    });
-
-    it('renders instructions text', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByText(/Drag to position/)).toBeInTheDocument();
-    });
-
-    it('renders zoom controls', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByLabelText('Zoom out')).toBeInTheDocument();
-      expect(screen.getByLabelText('Zoom in')).toBeInTheDocument();
-      expect(screen.getByLabelText('Zoom level')).toBeInTheDocument();
-    });
-
-    it('shows loading state initially', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
-    });
-
-    it('calls onCancel when cancel button clicked', async () => {
-      const onCancel = vi.fn();
-      render(CropImage, { props: { ...defaultProps, onCancel } });
-
-      await fireEvent.click(screen.getByText('Cancel'));
-      expect(onCancel).toHaveBeenCalled();
-    });
-
-    it('calls onCancel when close button clicked', async () => {
-      const onCancel = vi.fn();
-      render(CropImage, { props: { ...defaultProps, onCancel } });
-
-      await fireEvent.click(screen.getByLabelText('Close'));
-      expect(onCancel).toHaveBeenCalled();
-    });
-
-    it('calls onCancel when clicking backdrop', async () => {
-      const onCancel = vi.fn();
-      const { container } = render(CropImage, { props: { ...defaultProps, onCancel } });
-
-      const backdrop = container.querySelector('.fixed');
-      await fireEvent.click(backdrop);
-      expect(onCancel).toHaveBeenCalled();
-    });
-
-    it('zoom out button decreases zoom', async () => {
-      render(CropImage, { props: defaultProps });
-      const zoomOutBtn = screen.getByLabelText('Zoom out');
-      const slider = screen.getByLabelText('Zoom level');
-
-      // Initial zoom is 1
-      expect(slider.value).toBe('1');
-
-      // Click zoom out (should stay at 1 since that's min)
-      await fireEvent.click(zoomOutBtn);
-      expect(slider.value).toBe('1');
-    });
-
-    it('zoom in button increases zoom', async () => {
-      render(CropImage, { props: defaultProps });
-      const zoomInBtn = screen.getByLabelText('Zoom in');
-      const slider = screen.getByLabelText('Zoom level');
-
-      await fireEvent.click(zoomInBtn);
-      expect(parseFloat(slider.value)).toBeGreaterThan(1);
-    });
-
-    it('hides loading state after crop complete', async () => {
-      render(CropImage, { props: defaultProps });
-
-      // Initially loading
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-      // Wait for the mock cropper to emit cropcomplete
-      await waitFor(() => {
-        expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-      }, { timeout: 100 });
-    });
-
-    it('slider controls zoom value', async () => {
-      render(CropImage, { props: defaultProps });
-      const slider = screen.getByLabelText('Zoom level');
-
-      await fireEvent.input(slider, { target: { value: '2' } });
-      expect(slider.value).toBe('2');
-    });
-
-    it('handles save button click when not loading', async () => {
-      const onSave = vi.fn();
-      render(CropImage, { props: { ...defaultProps, onSave } });
-
-      // Wait for loading to complete
-      await waitFor(() => {
-        expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-      }, { timeout: 200 });
-
-      // Try clicking save button
-      const saveButton = screen.getByText('Save');
-      await fireEvent.click(saveButton);
-    });
-
-    it('disables save button while loading', () => {
-      render(CropImage, { props: defaultProps });
-      const saveButton = screen.getByText('Save');
-      // Save button should be disabled during loading
-      expect(saveButton.closest('button')).toBeDefined();
-    });
-
-    it('resets state when modal reopens with new image', async () => {
-      const { rerender } = render(CropImage, { props: defaultProps });
-
-      // Change imageSrc to trigger reset
-      await rerender({
-        showModal: true,
-        imageSrc: 'data:image/png;base64,differentImage',
-        onSave: vi.fn(),
-        onCancel: vi.fn(),
-      });
-
-      expect(screen.getByText('Crop image')).toBeInTheDocument();
-    });
-
-    it('updates zoom progress based on zoom value', async () => {
-      render(CropImage, { props: defaultProps });
-      const slider = screen.getByLabelText('Zoom level');
-
-      // Set zoom to middle value
-      await fireEvent.input(slider, { target: { value: '2' } });
-      expect(slider.value).toBe('2');
-
-      // Set zoom to max
-      await fireEvent.input(slider, { target: { value: '3' } });
-      expect(slider.value).toBe('3');
-    });
-
-    it('zoom value stays within bounds', async () => {
-      render(CropImage, { props: defaultProps });
-      const slider = screen.getByLabelText('Zoom level');
-      const zoomOutBtn = screen.getByLabelText('Zoom out');
-      const zoomInBtn = screen.getByLabelText('Zoom in');
-
-      // Spam zoom out - should not go below 1
-      for (let i = 0; i < 10; i++) {
-        await fireEvent.click(zoomOutBtn);
-      }
-      expect(parseFloat(slider.value)).toBe(1);
-
-      // Set to max and spam zoom in
-      await fireEvent.input(slider, { target: { value: '3' } });
-      for (let i = 0; i < 10; i++) {
-        await fireEvent.click(zoomInBtn);
-      }
-      expect(parseFloat(slider.value)).toBeLessThanOrEqual(3);
-    });
-
-    it('renders cropper component with correct props', async () => {
-      const { container } = render(CropImage, { props: defaultProps });
-
-      // Wait for render
-      await waitFor(() => {
-        expect(container.querySelector('.cropper-container')).toBeInTheDocument();
-      });
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+
+// Mock svelte-easy-crop with the mock Svelte component
+vi.mock('svelte-easy-crop', async () => {
+  const MockCropper = await import('../../__mocks__/svelte-easy-crop.svelte');
+  return { default: MockCropper.default };
+});
+
+// Import after mock is set up
+import CropImage from './CropImage.svelte';
+
+describe('CropImage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('when showModal is false', () => {
+    it('does not render modal content', () => {
+      const { container } = render(CropImage, {
+        props: { showModal: false, imageSrc: '' },
+      });
+      expect(container.querySelector('.fixed')).toBeNull();
+    });
+  });
+
+  describe('when showModal is true', () => {
+    const defaultProps = {
+      showModal: true,
+      imageSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
+      onSave: vi.fn(),
+      onCancel: vi.fn(),
+    };
+
+    it('renders the modal', () => {
+      const { container } = render(CropImage, { props: defaultProps });
+      expect(container.querySelector('.fixed')).toBeInTheDocument();
+    });
+
+    it('renders the header with title', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByText('Crop image')).toBeInTheDocument();
+    });
+
+    it('renders cancel button', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByText('Cancel')).toBeInTheDocument();
+    });
+
+    it('renders save button', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByText('Save')).toBeInTheDocument();
+    });
+
+    it('renders instructions text', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByText(/Drag to position/)).toBeInTheDocument();
+    });
+
+    it('renders zoom controls', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByLabelText('Zoom out')).toBeInTheDocument();
+      expect(screen.getByLabelText('Zoom in')).toBeInTheDocument();
+      expect(screen.getByLabelText('Zoom level')).toBeInTheDocument();
+    });
+
+    it('shows loading state initially', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('calls onCancel when cancel button clicked', async () => {
+      const onCancel = vi.fn();
+      render(CropImage, { props: { ...defaultProps, onCancel } });
+
+      await fireEvent.click(screen.getByText('Cancel'));
+      expect(onCancel).toHaveBeenCalled();
+    });
+
+    it('calls onCancel when close button clicked', async () => {
+      const onCancel = vi.fn();
+      render(CropImage, { props: { ...defaultProps, onCancel } });
+
+      await fireEvent.click(screen.getByLabelText('Close'));
+      expect(onCancel).toHaveBeenCalled();
+    });
+
+    it('calls onCancel when clicking backdrop', async () => {
+      const onCancel = vi.fn();
+      const { container } = render(CropImage, { props: { ...defaultProps, onCancel } });
+
+      const backdrop = container.querySelector('.fixed');
+      await fireEvent.click(backdrop);
+      expect(onCancel).toHaveBeenCalled();
+    });
+
+    it('zoom out button decreases zoom', async () => {
+      render(CropImage, { props: defaultProps });
+      const zoomOutBtn = screen.getByLabelText('Zoom out');
+      const slider = screen.getByLabelText('Zoom level');
+
+      // Initial zoom is 1
+      expect(slider.value).toBe('1');
+
+      // Click zoom out (should stay at 1 since that's min)
+      await fireEvent.click(zoomOutBtn);
+      expect(slider.value).toBe('1');
+    });
+
+    it('zoom in button increases zoom', async () => {
+      render(CropImage, { props: defaultProps });
+      const zoomInBtn = screen.getByLabelText('Zoom in');
+      const slider = screen.getByLabelText('Zoom level');
+
+      await fireEvent.click(zoomInBtn);
+      expect(parseFloat(slider.value)).toBeGreaterThan(1);
+    });
+
+    it('hides loading state after crop complete', async () => {
+      render(CropImage, { props: defaultProps });
+
+      // Initially loading
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+      // Wait for the mock cropper to emit cropcomplete
+      await waitFor(() => {
+        expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+      }, { timeout: 100 });
+    });
+
+    it('slider controls zoom value', async () => {
+      render(CropImage, { props: defaultProps });
+      const slider = screen.getByLabelText('Zoom level');
+
+      await fireEvent.input(slider, { target: { value: '2' } });
+      expect(slider.value).toBe('2');
+    });
+
+    it('handles save button click when not loading', async () => {
+      const onSave = vi.fn();
+      render(CropImage, { props: { ...defaultProps, onSave } });
+
+      // Wait for loading to complete
+      await waitFor(() => {
+        expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+      }, { timeout: 200 });
+
+      // Try clicking save button
+      const saveButton = screen.getByText('Save');
+      await fireEvent.click(saveButton);
+    });
+
+    it('disables save button while loading', () => {
+      render(CropImage, { props: defaultProps });
+      const saveButton = screen.getByText('Save');
+      // Save button should be disabled during loading
+      expect(saveButton.closest('button')).toBeDefined();
+    });
+
+    it('resets state when modal reopens with new image', async () => {
+      const { rerender } = render(CropImage, { props: defaultProps });
+
+      // Change imageSrc to trigger reset
+      await rerender({
+        showModal: true,
+        imageSrc: 'data:image/png;base64,differentImage',
+        onSave: vi.fn(),
+        onCancel: vi.fn(),
+      });
+
+      expect(screen.getByText('Crop image')).toBeInTheDocument();
+    });
+
+    it('updates zoom progress based on zoom value', async () => {
+      render(CropImage, { props: defaultProps });
+      const slider = screen.getByLabelText('Zoom level');
+
+      // Set zoom to middle value
+      await fireEvent.input(slider, { target: { value: '2' } });
+      expect(slider.value).toBe('2');
+
+      // Set zoom to max
+      await fireEvent.input(slider, { target: { value: '3' } });
+      expect(slider.value).toBe('3');
+    });
+
+    it('zoom value stays within bounds', async () => {
+      render(CropImage, { props: defaultProps });
+      const slider = screen.getByLabelText('Zoom level');
+      const zoomOutBtn = screen.getByLabelText('Zoom out');
+      const zoomInBtn = screen.getByLabelText('Zoom in');
+
+      // Spam zoom out - should not go below 1
+      for (let i = 0; i < 10; i++) {
+        await fireEvent.click(zoomOutBtn);
+      }
+      expect(parseFloat(slider.value)).toBe(1);
+
+      // Set to max and spam zoom in
+      await fireEvent.input(slider, { target: { value: '3' } });
+      for (let i = 0; i < 10; i++) {
+        await fireEvent.click(zoomInBtn);
+      }
+      expect(parseFloat(slider.value)).toBeLessThanOrEqual(3);
+    });
+
+    it('renders cropper component with correct props', async () => {
+      const { container } = render(CropImage, { props: defaultProps });
+
+      // Wait for render
+      await waitFor(() => {
+        expect(container.querySelector('.cropper-container')).toBeInTheDocument();
+      });
+    });
+  });
+});