@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/recipes/Toaster/Toaster.stories.svelte

@@ -1,62 +1,62 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import { Toaster } from "svelte-sonner";
-  import { showToast } from "../../stores/toaster";
-
-  const { Story } = defineMeta({
-    title: "Components/Toaster",
-  });
-
-  function showSuccessToast() {
-    showToast("Action completed successfully!", "success");
-  }
-
-  function showErrorToast() {
-    showToast("An error occurred. Please try again.", "error");
-  }
-</script>
-
-<Story name="Trigger Success Toast">
-  <div class="p-8">
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
-        classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
-        },
-      }}
-    />
-    <button
-      onclick={showSuccessToast}
-      class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
-    >
-      Show Success Toast
-    </button>
-    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see a success toast notification</p>
-  </div>
-</Story>
-
-<Story name="Trigger Error Toast">
-  <div class="p-8">
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
-        classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
-        },
-      }}
-    />
-    <button
-      onclick={showErrorToast}
-      class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
-    >
-      Show Error Toast
-    </button>
-    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see an error toast notification</p>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import { Toaster } from "svelte-sonner";
+  import { showToast } from "../../stores/toaster";
+
+  const { Story } = defineMeta({
+    title: "Components/Toaster",
+  });
+
+  function showSuccessToast() {
+    showToast("Action completed successfully!", "success");
+  }
+
+  function showErrorToast() {
+    showToast("An error occurred. Please try again.", "error");
+  }
+</script>
+
+<Story name="Trigger Success Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
+        classes: {
+          error: "text-red-600 dark:text-red-400",
+          success: "text-green-600 dark:text-green-400",
+        },
+      }}
+    />
+    <button
+      onclick={showSuccessToast}
+      class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+    >
+      Show Success Toast
+    </button>
+    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see a success toast notification</p>
+  </div>
+</Story>
+
+<Story name="Trigger Error Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
+        classes: {
+          error: "text-red-600 dark:text-red-400",
+          success: "text-green-600 dark:text-green-400",
+        },
+      }}
+    />
+    <button
+      onclick={showErrorToast}
+      class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
+    >
+      Show Error Toast
+    </button>
+    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see an error toast notification</p>
+  </div>
+</Story>

package/dist/recipes/feedback/EmptyState/EmptyState.spec.d.ts

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

package/dist/recipes/feedback/EmptyState/EmptyState.spec.d.ts.map

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

package/dist/recipes/feedback/EmptyState/EmptyState.spec.js

@@ -0,0 +1,202 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import EmptyState from './EmptyState.svelte';
+
+describe('EmptyState Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(EmptyState);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('has flex centering classes', () => {
+    const { container } = render(EmptyState);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('flex');
+    expect(wrapper).toHaveClass('flex-col');
+    expect(wrapper).toHaveClass('items-center');
+    expect(wrapper).toHaveClass('justify-center');
+  });
+
+  test('has text-center class', () => {
+    const { container } = render(EmptyState);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('text-center');
+  });
+
+  test('has padding classes', () => {
+    const { container } = render(EmptyState);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('px-6');
+    expect(wrapper).toHaveClass('py-10');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(EmptyState, { props: { class: 'custom-empty' } });
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('custom-empty');
+  });
+});
+
+describe('EmptyState Title/Message', () => {
+  test('shows default "No results found" when no title', () => {
+    render(EmptyState);
+    expect(screen.getByText('No results found')).toBeInTheDocument();
+  });
+
+  test('title prop displays custom title', () => {
+    render(EmptyState, { props: { title: 'No items' } });
+    expect(screen.getByText('No items')).toBeInTheDocument();
+  });
+
+  test('message prop displays custom message', () => {
+    render(EmptyState, { props: { message: 'Nothing here' } });
+    expect(screen.getByText('Nothing here')).toBeInTheDocument();
+  });
+
+  test('title takes precedence over message', () => {
+    render(EmptyState, { props: { title: 'Title', message: 'Message' } });
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.queryByText('Message')).not.toBeInTheDocument();
+  });
+
+  test('title is in h3 element', () => {
+    const { container } = render(EmptyState, { props: { title: 'Test Title' } });
+    const h3 = container.querySelector('h3');
+    expect(h3).toBeInTheDocument();
+    expect(h3).toHaveTextContent('Test Title');
+  });
+});
+
+describe('EmptyState Description/Subtext', () => {
+  test('no subtext by default', () => {
+    const { container } = render(EmptyState);
+    expect(container.querySelector('p')).not.toBeInTheDocument();
+  });
+
+  test('description prop displays text', () => {
+    render(EmptyState, { props: { description: 'Try different filters' } });
+    expect(screen.getByText('Try different filters')).toBeInTheDocument();
+  });
+
+  test('subtext prop displays text', () => {
+    render(EmptyState, { props: { subtext: 'Check back later' } });
+    expect(screen.getByText('Check back later')).toBeInTheDocument();
+  });
+
+  test('description takes precedence over subtext', () => {
+    render(EmptyState, { props: { description: 'Description', subtext: 'Subtext' } });
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.queryByText('Subtext')).not.toBeInTheDocument();
+  });
+
+  test('subtext is in p element', () => {
+    const { container } = render(EmptyState, { props: { subtext: 'Subtext here' } });
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    expect(p).toHaveTextContent('Subtext here');
+  });
+
+  test('p element has mt-1 margin', () => {
+    const { container } = render(EmptyState, { props: { description: 'Desc' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('mt-1');
+  });
+});
+
+describe('EmptyState Icon/Image', () => {
+  test('no icon section when no icon or image', () => {
+    const { container } = render(EmptyState);
+    expect(container.querySelector('img')).not.toBeInTheDocument();
+  });
+
+  test('imageSrc renders img element', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', '/empty.png');
+  });
+
+  test('img has empty alt for decorative', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveAttribute('alt', '');
+  });
+
+  test('img has mb-3 margin', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('mb-3');
+  });
+
+  test('iconSize prop sets size classes on image', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image', iconSize: 'w-32 h-32' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('w-32');
+    expect(img).toHaveClass('h-32');
+  });
+
+  test('default iconSize is w-20 h-20', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('w-20');
+    expect(img).toHaveClass('h-20');
+  });
+});
+
+describe('EmptyState Props', () => {
+  test('iconType defaults to component', () => {
+    // When iconType is 'component' and no icon provided, no image renders
+    const { container } = render(EmptyState, { props: { imageSrc: '/test.png' } });
+    // Since iconType defaults to 'component', the image won't render
+    expect(container.querySelector('img')).not.toBeInTheDocument();
+  });
+
+  test('iconType=image with imageSrc renders image', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/test.png', iconType: 'image' }
+    });
+    expect(container.querySelector('img')).toBeInTheDocument();
+  });
+});
+
+describe('EmptyState Combinations', () => {
+  test('title and description together', () => {
+    render(EmptyState, { props: { title: 'Empty', description: 'Add some items' } });
+    expect(screen.getByText('Empty')).toBeInTheDocument();
+    expect(screen.getByText('Add some items')).toBeInTheDocument();
+  });
+
+  test('message and subtext together', () => {
+    render(EmptyState, { props: { message: 'No data', subtext: 'Try again' } });
+    expect(screen.getByText('No data')).toBeInTheDocument();
+    expect(screen.getByText('Try again')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(EmptyState, {
+      props: {
+        title: 'Nothing Found',
+        description: 'Your search returned no results',
+        imageSrc: '/empty.svg',
+        iconType: 'image',
+        iconSize: 'w-24 h-24',
+        class: 'min-h-screen'
+      }
+    });
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('min-h-screen');
+    expect(container.querySelector('img')).toBeInTheDocument();
+    expect(screen.getByText('Nothing Found')).toBeInTheDocument();
+    expect(screen.getByText('Your search returned no results')).toBeInTheDocument();
+  });
+});

package/dist/recipes/feedback/EmptyState/EmptyState.svelte

@@ -42,7 +42,7 @@
   let displayTitle = $derived(title || message || 'No results found');
   let displaySubtext = $derived(description || subtext);
 </script>
-
+
 <div class="flex flex-col items-center justify-center px-6 py-10 text-center {className}">
   {#if icon || imageSrc}
     {#if iconType === 'component' && icon}

package/dist/recipes/feedback/ErrorDisplay.spec.js

@@ -1,69 +1,69 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import ErrorDisplay from "./ErrorDisplay.svelte";
-
-describe("ErrorDisplay Component Tests", () => {
-  test("Shows error message when error and show are true", () => {
-    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
-    expect(screen.getByText("Invalid input")).toBeInTheDocument();
-  });
-
-  test("Does not show when error is empty", () => {
-    render(ErrorDisplay, { props: { error: "", show: true } });
-    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
-  });
-
-  test("Does not show when show is false", () => {
-    render(ErrorDisplay, { props: { error: "Error message", show: false } });
-    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
-  });
-
-  test("Has error text color", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("text-red-600");
-  });
-
-  test("Has shake class when shake is true", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("animate-shake");
-  });
-
-  test("Does not have shake class when shake is false", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: false },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).not.toHaveClass("animate-shake");
-  });
-
-  test("Contains icon element", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Has flex layout", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("flex");
-    expect(wrapper).toHaveClass("items-center");
-  });
-
-  test("Applies custom className", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, className: "mt-2" },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("mt-2");
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import ErrorDisplay from "./ErrorDisplay.svelte";
+
+describe("ErrorDisplay Component Tests", () => {
+  test("Shows error message when error and show are true", () => {
+    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
+    expect(screen.getByText("Invalid input")).toBeInTheDocument();
+  });
+
+  test("Does not show when error is empty", () => {
+    render(ErrorDisplay, { props: { error: "", show: true } });
+    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
+  });
+
+  test("Does not show when show is false", () => {
+    render(ErrorDisplay, { props: { error: "Error message", show: false } });
+    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
+  });
+
+  test("Has error text color", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const icon = container.querySelector("svg");
+    expect(icon).toHaveClass("text-red-600");
+  });
+
+  test("Has shake class when shake is true", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: true },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("animate-shake");
+  });
+
+  test("Does not have shake class when shake is false", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: false },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).not.toHaveClass("animate-shake");
+  });
+
+  test("Contains icon element", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Has flex layout", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("flex");
+    expect(wrapper).toHaveClass("items-center");
+  });
+
+  test("Applies custom className", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, className: "mt-2" },
+    });
+    const wrapper = container.querySelector("div.flex");
+    expect(wrapper).toHaveClass("mt-2");
+  });
+});