@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Skeleton/ListPlaceholder.svelte

@@ -1,76 +1,76 @@
-<script lang="ts">
-  interface Props {
-    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    items?: number;
-    animate?: boolean;
-    showIcon?: boolean;
-    showAction?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    items = 5,
-    animate = true,
-    showIcon = true,
-    showAction = true,
-    class: className = '',
-    ...restProps
-  }: Props = $props();
-
-  const containerSizeClasses = {
-    sm: 'max-w-xs',
-    md: 'max-w-sm',
-    lg: 'max-w-md',
-    xl: 'max-w-lg',
-    '2xl': 'max-w-xl'
-  };
-
-  const iconSizeClasses = {
-    sm: 'w-8 h-8',
-    md: 'w-10 h-10',
-    lg: 'w-12 h-12',
-    xl: 'w-14 h-14',
-    '2xl': 'w-16 h-16'
-  };
-
-  let containerWidthClass = $derived(containerSizeClasses[size] || containerSizeClasses.md);
-  let iconSizeClass = $derived(iconSizeClasses[size] || iconSizeClasses.md);
-  let animateClass = $derived(animate ? 'animate-pulse' : '');
-</script>
-
-<div
-  role="status"
-  class="{containerWidthClass} p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-lg shadow dark:divide-gray-700 dark:border-gray-700 {animateClass} {className}"
-  aria-label="Loading list"
-  {...restProps}
->
-  {#each Array(items) as _, i}
-    <div class="flex items-center justify-between {i > 0 ? 'pt-4' : ''}">
-      <div class="flex items-center">
-        {#if showIcon}
-          <svg
-            class="{iconSizeClass} text-gray-200 dark:text-gray-700 me-3"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-          >
-            <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
-          </svg>
-        {/if}
-        <div>
-          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-          <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-32"></div>
-        </div>
-      </div>
-
-      {#if showAction}
-        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-      {/if}
-    </div>
-  {/each}
-
-  <span class="sr-only">Loading...</span>
-</div>
+<script lang="ts">
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    items?: number;
+    animate?: boolean;
+    showIcon?: boolean;
+    showAction?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    items = 5,
+    animate = true,
+    showIcon = true,
+    showAction = true,
+    class: className = '',
+    ...restProps
+  }: Props = $props();
+
+  const containerSizeClasses = {
+    sm: 'max-w-xs',
+    md: 'max-w-sm',
+    lg: 'max-w-md',
+    xl: 'max-w-lg',
+    '2xl': 'max-w-xl'
+  };
+
+  const iconSizeClasses = {
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+    lg: 'w-12 h-12',
+    xl: 'w-14 h-14',
+    '2xl': 'w-16 h-16'
+  };
+
+  let containerWidthClass = $derived(containerSizeClasses[size] || containerSizeClasses.md);
+  let iconSizeClass = $derived(iconSizeClasses[size] || iconSizeClasses.md);
+  let animateClass = $derived(animate ? 'animate-pulse' : '');
+</script>
+
+<div
+  role="status"
+  class="{containerWidthClass} p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-lg shadow dark:divide-gray-700 dark:border-gray-700 {animateClass} {className}"
+  aria-label="Loading list"
+  {...restProps}
+>
+  {#each Array(items) as _, i}
+    <div class="flex items-center justify-between {i > 0 ? 'pt-4' : ''}">
+      <div class="flex items-center">
+        {#if showIcon}
+          <svg
+            class="{iconSizeClass} text-gray-200 dark:text-gray-700 me-3"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
+          </svg>
+        {/if}
+        <div>
+          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+          <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-32"></div>
+        </div>
+      </div>
+
+      {#if showAction}
+        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+      {/if}
+    </div>
+  {/each}
+
+  <span class="sr-only">Loading...</span>
+</div>

package/dist/primitives/Skeleton/Skeleton.spec.d.ts

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

package/dist/primitives/Skeleton/Skeleton.spec.d.ts.map

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

package/dist/primitives/Skeleton/Skeleton.spec.js

@@ -0,0 +1,173 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Skeleton from './Skeleton.svelte';
+
+describe('Skeleton Component', () => {
+  test('renders a status container', () => {
+    const { container } = render(Skeleton);
+    expect(container.querySelector('[role="status"]')).toBeInTheDocument();
+  });
+
+  test('has role="status" for accessibility', () => {
+    const { container } = render(Skeleton);
+    const skeleton = container.querySelector('div');
+    expect(skeleton).toHaveAttribute('role', 'status');
+  });
+
+  test('has aria-label for screen readers', () => {
+    const { container } = render(Skeleton);
+    const skeleton = container.querySelector('[role="status"]');
+    expect(skeleton).toHaveAttribute('aria-label', 'Loading content');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Skeleton, { props: { class: 'custom-skeleton' } });
+    const skeleton = container.querySelector('[role="status"]');
+    expect(skeleton).toHaveClass('custom-skeleton');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Skeleton, { props: { 'data-testid': 'my-skeleton' } });
+    expect(container.querySelector('[data-testid="my-skeleton"]')).toBeInTheDocument();
+  });
+});
+
+describe('Skeleton Lines', () => {
+  test('defaults to 3 lines', () => {
+    const { container } = render(Skeleton);
+    const lines = container.querySelectorAll('.rounded-full.bg-gray-200');
+    expect(lines.length).toBe(3);
+  });
+
+  test('renders custom number of lines', () => {
+    const { container } = render(Skeleton, { props: { lines: 5 } });
+    const lineElements = container.querySelectorAll('.rounded-full.bg-gray-200');
+    expect(lineElements.length).toBe(5);
+  });
+
+  test('renders 1 line when lines=1', () => {
+    const { container } = render(Skeleton, { props: { lines: 1 } });
+    const lineElements = container.querySelectorAll('.rounded-full.bg-gray-200');
+    expect(lineElements.length).toBe(1);
+  });
+
+  test('lines have rounded-full class', () => {
+    const { container } = render(Skeleton);
+    const lines = container.querySelectorAll('[role="status"] > div');
+    lines.forEach(line => {
+      expect(line).toHaveClass('rounded-full');
+    });
+  });
+
+  test('lines have bg-gray-200 background', () => {
+    const { container } = render(Skeleton);
+    const lines = container.querySelectorAll('[role="status"] > div');
+    lines.forEach(line => {
+      expect(line).toHaveClass('bg-gray-200');
+    });
+  });
+
+  test('lines have dark mode background', () => {
+    const { container } = render(Skeleton);
+    const lines = container.querySelectorAll('[role="status"] > div');
+    lines.forEach(line => {
+      expect(line).toHaveClass('dark:bg-gray-700');
+    });
+  });
+
+  test('lines (except last) have mb-2.5 margin', () => {
+    const { container } = render(Skeleton, { props: { lines: 3 } });
+    const lines = container.querySelectorAll('[role="status"] > div');
+    // First two should have margin, last should not
+    expect(lines[0]).toHaveClass('mb-2.5');
+    expect(lines[1]).toHaveClass('mb-2.5');
+    expect(lines[2]).not.toHaveClass('mb-2.5');
+  });
+});
+
+describe('Skeleton Width Patterns', () => {
+  test('first line has w-full', () => {
+    const { container } = render(Skeleton, { props: { lines: 7 } });
+    const lines = container.querySelectorAll('[role="status"] > div');
+    expect(lines[0]).toHaveClass('w-full');
+  });
+
+  test('second line has max-w-sm', () => {
+    const { container } = render(Skeleton, { props: { lines: 7 } });
+    const lines = container.querySelectorAll('[role="status"] > div');
+    expect(lines[1]).toHaveClass('max-w-sm');
+  });
+
+  test('third line has w-full', () => {
+    const { container } = render(Skeleton, { props: { lines: 7 } });
+    const lines = container.querySelectorAll('[role="status"] > div');
+    expect(lines[2]).toHaveClass('w-full');
+  });
+
+  test('fourth line has max-w-80', () => {
+    const { container } = render(Skeleton, { props: { lines: 7 } });
+    const lines = container.querySelectorAll('[role="status"] > div');
+    expect(lines[3]).toHaveClass('max-w-80');
+  });
+
+  test('fifth line has max-w-72', () => {
+    const { container } = render(Skeleton, { props: { lines: 7 } });
+    const lines = container.querySelectorAll('[role="status"] > div');
+    expect(lines[4]).toHaveClass('max-w-72');
+  });
+
+  test('width pattern repeats after 7 lines', () => {
+    const { container } = render(Skeleton, { props: { lines: 8 } });
+    const lines = container.querySelectorAll('[role="status"] > div');
+    // 8th line (index 7) should have same width as 1st line (index 0)
+    expect(lines[7]).toHaveClass('w-full');
+  });
+});
+
+describe('Skeleton Animation', () => {
+  test('animate is true by default', () => {
+    const { container } = render(Skeleton);
+    const skeleton = container.querySelector('[role="status"]');
+    expect(skeleton).toHaveClass('animate-pulse');
+  });
+
+  test('animate=true adds animate-pulse class', () => {
+    const { container } = render(Skeleton, { props: { animate: true } });
+    const skeleton = container.querySelector('[role="status"]');
+    expect(skeleton).toHaveClass('animate-pulse');
+  });
+
+  test('animate=false removes animate-pulse class', () => {
+    const { container } = render(Skeleton, { props: { animate: false } });
+    const skeleton = container.querySelector('[role="status"]');
+    expect(skeleton).not.toHaveClass('animate-pulse');
+  });
+});
+
+describe('Skeleton Screen Reader', () => {
+  test('has sr-only loading text', () => {
+    const { container } = render(Skeleton);
+    const srOnly = container.querySelector('.sr-only');
+    expect(srOnly).toBeInTheDocument();
+    expect(srOnly).toHaveTextContent('Loading...');
+  });
+});
+
+describe('Skeleton Sizes', () => {
+  test('default size is md', () => {
+    // The actual height class depends on skeletonSizes token
+    // Just verify component renders without error
+    const { container } = render(Skeleton);
+    expect(container.querySelector('[role="status"]')).toBeInTheDocument();
+  });
+
+  test('accepts size prop', () => {
+    const { container } = render(Skeleton, { props: { size: 'sm' } });
+    expect(container.querySelector('[role="status"]')).toBeInTheDocument();
+  });
+
+  test('accepts lg size', () => {
+    const { container } = render(Skeleton, { props: { size: 'lg' } });
+    expect(container.querySelector('[role="status"]')).toBeInTheDocument();
+  });
+});

package/dist/primitives/Skeleton/Skeleton.stories.svelte

@@ -1,151 +1,151 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Skeleton from './Skeleton.svelte';
-  import ImagePlaceholder from './ImagePlaceholder.svelte';
-  import CardPlaceholder from './CardPlaceholder.svelte';
-  import ListPlaceholder from './ListPlaceholder.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Skeleton',
-    component: Skeleton,
-    tags: ['autodocs'],
-    parameters: {
-      docs: {
-        description: {
-          component: 'Loading placeholder components that animate while content loads.',
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="Basic Lines">
-  {#snippet template()}
-    <div class="space-y-2 max-w-md">
-      <Skeleton class="h-4 w-full" />
-      <Skeleton class="h-4 w-3/4" />
-      <Skeleton class="h-4 w-1/2" />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Paragraph">
-  {#snippet template()}
-    <div class="space-y-3 max-w-lg">
-      <Skeleton class="h-6 w-1/3" />
-      <div class="space-y-2">
-        <Skeleton class="h-4 w-full" />
-        <Skeleton class="h-4 w-full" />
-        <Skeleton class="h-4 w-5/6" />
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Avatar + Text">
-  {#snippet template()}
-    <div class="flex items-center gap-4">
-      <Skeleton class="h-12 w-12 rounded-full" />
-      <div class="space-y-2 flex-1">
-        <Skeleton class="h-4 w-32" />
-        <Skeleton class="h-3 w-48" />
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Image Placeholder">
-  {#snippet template()}
-    <div class="max-w-sm">
-      <ImagePlaceholder />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Card Placeholder">
-  {#snippet template()}
-    <div class="max-w-sm">
-      <CardPlaceholder />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="List Placeholder">
-  {#snippet template()}
-    <div class="max-w-md">
-      <ListPlaceholder />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Grid of Cards">
-  {#snippet template()}
-    <div class="grid grid-cols-3 gap-4">
-      <CardPlaceholder />
-      <CardPlaceholder />
-      <CardPlaceholder />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Page Layout Loading">
-  {#snippet template()}
-    <div class="space-y-6 max-w-2xl">
-      <!-- Header -->
-      <div class="flex items-center justify-between">
-        <Skeleton class="h-8 w-48" />
-        <Skeleton class="h-10 w-24 rounded-lg" />
-      </div>
-
-      <!-- Stats -->
-      <div class="grid grid-cols-3 gap-4">
-        {#each [1, 2, 3] as _}
-          <div class="border rounded-lg p-4">
-            <Skeleton class="h-4 w-20 mb-2" />
-            <Skeleton class="h-8 w-16" />
-          </div>
-        {/each}
-      </div>
-
-      <!-- Table -->
-      <div class="border rounded-lg">
-        <div class="border-b p-4 flex gap-4">
-          <Skeleton class="h-4 w-24" />
-          <Skeleton class="h-4 w-32" />
-          <Skeleton class="h-4 w-20" />
-        </div>
-        <ListPlaceholder />
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All Variants">
-  {#snippet template()}
-    <div class="space-y-8">
-      <div>
-        <h3 class="text-sm font-medium text-gray-700 mb-3">Basic Skeleton</h3>
-        <div class="space-y-2 max-w-md">
-          <Skeleton class="h-4 w-full" />
-          <Skeleton class="h-4 w-3/4" />
-          <Skeleton class="h-4 w-1/2" />
-        </div>
-      </div>
-
-      <div class="grid grid-cols-3 gap-6">
-        <div>
-          <h3 class="text-sm font-medium text-gray-700 mb-3">Image Placeholder</h3>
-          <ImagePlaceholder />
-        </div>
-        <div>
-          <h3 class="text-sm font-medium text-gray-700 mb-3">Card Placeholder</h3>
-          <CardPlaceholder />
-        </div>
-        <div>
-          <h3 class="text-sm font-medium text-gray-700 mb-3">List Placeholder</h3>
-          <ListPlaceholder />
-        </div>
-      </div>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Skeleton from './Skeleton.svelte';
+  import ImagePlaceholder from './ImagePlaceholder.svelte';
+  import CardPlaceholder from './CardPlaceholder.svelte';
+  import ListPlaceholder from './ListPlaceholder.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Skeleton',
+    component: Skeleton,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Loading placeholder components that animate while content loads.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Basic Lines">
+  {#snippet template()}
+    <div class="space-y-2 max-w-md">
+      <Skeleton class="h-4 w-full" />
+      <Skeleton class="h-4 w-3/4" />
+      <Skeleton class="h-4 w-1/2" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Paragraph">
+  {#snippet template()}
+    <div class="space-y-3 max-w-lg">
+      <Skeleton class="h-6 w-1/3" />
+      <div class="space-y-2">
+        <Skeleton class="h-4 w-full" />
+        <Skeleton class="h-4 w-full" />
+        <Skeleton class="h-4 w-5/6" />
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Avatar + Text">
+  {#snippet template()}
+    <div class="flex items-center gap-4">
+      <Skeleton class="h-12 w-12 rounded-full" />
+      <div class="space-y-2 flex-1">
+        <Skeleton class="h-4 w-32" />
+        <Skeleton class="h-3 w-48" />
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Image Placeholder">
+  {#snippet template()}
+    <div class="max-w-sm">
+      <ImagePlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Card Placeholder">
+  {#snippet template()}
+    <div class="max-w-sm">
+      <CardPlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="List Placeholder">
+  {#snippet template()}
+    <div class="max-w-md">
+      <ListPlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Grid of Cards">
+  {#snippet template()}
+    <div class="grid grid-cols-3 gap-4">
+      <CardPlaceholder />
+      <CardPlaceholder />
+      <CardPlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Page Layout Loading">
+  {#snippet template()}
+    <div class="space-y-6 max-w-2xl">
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <Skeleton class="h-8 w-48" />
+        <Skeleton class="h-10 w-24 rounded-lg" />
+      </div>
+
+      <!-- Stats -->
+      <div class="grid grid-cols-3 gap-4">
+        {#each [1, 2, 3] as _}
+          <div class="border rounded-lg p-4">
+            <Skeleton class="h-4 w-20 mb-2" />
+            <Skeleton class="h-8 w-16" />
+          </div>
+        {/each}
+      </div>
+
+      <!-- Table -->
+      <div class="border rounded-lg">
+        <div class="border-b p-4 flex gap-4">
+          <Skeleton class="h-4 w-24" />
+          <Skeleton class="h-4 w-32" />
+          <Skeleton class="h-4 w-20" />
+        </div>
+        <ListPlaceholder />
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All Variants">
+  {#snippet template()}
+    <div class="space-y-8">
+      <div>
+        <h3 class="text-sm font-medium text-gray-700 mb-3">Basic Skeleton</h3>
+        <div class="space-y-2 max-w-md">
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-3/4" />
+          <Skeleton class="h-4 w-1/2" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-3 gap-6">
+        <div>
+          <h3 class="text-sm font-medium text-gray-700 mb-3">Image Placeholder</h3>
+          <ImagePlaceholder />
+        </div>
+        <div>
+          <h3 class="text-sm font-medium text-gray-700 mb-3">Card Placeholder</h3>
+          <CardPlaceholder />
+        </div>
+        <div>
+          <h3 class="text-sm font-medium text-gray-700 mb-3">List Placeholder</h3>
+          <ListPlaceholder />
+        </div>
+      </div>
+    </div>
+  {/snippet}
+</Story>