@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/DarkModeToggle.stories.svelte

@@ -1,57 +1,57 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import DarkModeToggle from './DarkModeToggle.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/DarkModeToggle',
-    component: DarkModeToggle,
-    tags: ['autodocs'],
-  });
-
-</script>
-
-<script>
-  </script>
-
-<Story name="Default">
-  <div class="flex flex-col gap-4 p-4">
-    <h3 class="text-lg font-semibold">Theme Toggle (3-State)</h3>
-    <p class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
-      Cycles through: Auto → Light → Dark → Auto
-    </p>
-    <DarkModeToggle />
-    <p class="text-xs text-gray-500 dark:text-gray-400">
-      Click the toggle to cycle through theme modes. In auto mode, it follows system preferences.
-    </p>
-  </div>
-</Story>
-
-<Story name="In Header">
-  <div class="bg-white dark:bg-gray-900 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-lg">
-    <div class="flex items-center justify-between">
-      <h2 class="text-xl font-bold text-gray-900 dark:text-white dark:text-white">Application Header</h2>
-      <DarkModeToggle />
-    </div>
-  </div>
-</Story>
-
-<Story name="Theme States Demo">
-  <div class="space-y-4 p-4">
-    <div class="bg-white dark:bg-gray-900 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white dark:text-white mb-2">
-        Current Theme Demo
-      </h3>
-      <p class="text-gray-500 dark:text-gray-400 dark:text-gray-300 mb-4">
-        This content changes appearance based on the selected theme mode.
-      </p>
-      <DarkModeToggle />
-    </div>
-
-    <div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
-      <p><strong>Auto Mode:</strong> Follows system preferences</p>
-      <p><strong>Light Mode:</strong> Forces light theme</p>
-      <p><strong>Dark Mode:</strong> Forces dark theme</p>
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import DarkModeToggle from './DarkModeToggle.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/DarkModeToggle',
+    component: DarkModeToggle,
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+  </script>
+
+<Story name="Default">
+  <div class="flex flex-col gap-4 p-4">
+    <h3 class="text-lg font-semibold">Theme Toggle (3-State)</h3>
+    <p class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
+      Cycles through: Auto → Light → Dark → Auto
+    </p>
+    <DarkModeToggle />
+    <p class="text-xs text-gray-500 dark:text-gray-400">
+      Click the toggle to cycle through theme modes. In auto mode, it follows system preferences.
+    </p>
+  </div>
+</Story>
+
+<Story name="In Header">
+  <div class="bg-white dark:bg-gray-900 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-lg">
+    <div class="flex items-center justify-between">
+      <h2 class="text-xl font-bold text-gray-900 dark:text-white dark:text-white">Application Header</h2>
+      <DarkModeToggle />
+    </div>
+  </div>
+</Story>
+
+<Story name="Theme States Demo">
+  <div class="space-y-4 p-4">
+    <div class="bg-white dark:bg-gray-900 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white dark:text-white mb-2">
+        Current Theme Demo
+      </h3>
+      <p class="text-gray-500 dark:text-gray-400 dark:text-gray-300 mb-4">
+        This content changes appearance based on the selected theme mode.
+      </p>
+      <DarkModeToggle />
+    </div>
+
+    <div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
+      <p><strong>Auto Mode:</strong> Follows system preferences</p>
+      <p><strong>Light Mode:</strong> Forces light theme</p>
+      <p><strong>Dark Mode:</strong> Forces dark theme</p>
+    </div>
+  </div>
+</Story>

package/dist/primitives/DarkModeToggle.svelte

@@ -1,136 +1,136 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  import SunIcon from "./Icons/SunIcon.svelte";
-  import MoonIcon from "./Icons/MoonIcon.svelte";
-  import Button from "./Button/Button.svelte";
-
-  interface Props {
-    /** Container selector for applying dark class */
-    containerSelector?: string;
-  }
-
-  let { containerSelector = ".performer-portal" }: Props = $props();
-
-  let themeMode = $state<"auto" | "light" | "dark">("auto");
-  let isDark = $state(false);
-
-  function setMicdropDarkClass(enable: boolean) {
-    const container = document.querySelector(containerSelector);
-    if (enable) {
-      if (container) container.classList.add("dark");
-      document.documentElement.classList.add("dark");
-    } else {
-      if (container) container.classList.remove("dark");
-      document.documentElement.classList.remove("dark");
-    }
-  }
-
-  function getSystemPreference() {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  }
-
-  function applyTheme() {
-    if (themeMode === "auto") {
-      isDark = getSystemPreference();
-    } else {
-      isDark = themeMode === "dark";
-    }
-    setMicdropDarkClass(isDark);
-  }
-
-  onMount(() => {
-    const savedTheme = localStorage.getItem("theme");
-
-    if (savedTheme === "dark" || savedTheme === "light") {
-      themeMode = savedTheme;
-    } else {
-      themeMode = "auto";
-    }
-
-    applyTheme();
-
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => {
-      if (themeMode === "auto") {
-        applyTheme();
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-
-    return () => {
-      mediaQuery.removeEventListener("change", handleChange);
-    };
-  });
-
-  function toggleTheme(event: MouseEvent) {
-    if (themeMode === "auto") {
-      themeMode = "light";
-      localStorage.setItem("theme", "light");
-    } else if (themeMode === "light") {
-      themeMode = "dark";
-      localStorage.setItem("theme", "dark");
-    } else {
-      themeMode = "auto";
-      localStorage.removeItem("theme");
-    }
-
-    applyTheme();
-
-    if (event?.currentTarget) {
-      (event.currentTarget as HTMLElement).blur();
-    }
-  }
-
-  let titleText = $derived(
-    themeMode === "auto"
-      ? "Auto theme (following device) - click for light mode"
-      : themeMode === "light"
-        ? "Light mode - click for dark mode"
-        : "Dark mode - click for auto"
-  );
-</script>
-
-<Button
-  variant="alternative"
-  onclick={toggleTheme}
-  class="relative h-10 w-10 overflow-hidden p-0"
-  aria-label="Toggle theme"
-  title={titleText}
->
-  <span
-    class="text-amber-500 transition-all duration-300 {themeMode === 'light'
-      ? 'scale-100 rotate-0 opacity-100'
-      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
-  >
-    <SunIcon size="20" />
-  </span>
-
-  <span
-    class="transition-all duration-300 {themeMode === 'dark'
-      ? 'scale-100 rotate-0 opacity-100'
-      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
-  >
-    <MoonIcon size="20" color="white" />
-  </span>
-
-  {#if themeMode === "auto"}
-    <div class="absolute inset-0 overflow-hidden rounded-lg">
-      <div
-        class="absolute flex h-full w-full items-center justify-center bg-white"
-        style="clip-path: polygon(0 0, 100% 0, 0 100%)"
-      >
-        <span class="-translate-x-1 -translate-y-1 text-amber-500">
-          <SunIcon size="12" />
-        </span>
-      </div>
-      <div
-        class="absolute flex h-full w-full items-center justify-center bg-gray-800"
-        style="clip-path: polygon(100% 0, 100% 100%, 0 100%)"
-      >
-        <span class="translate-x-1 translate-y-1">
-          <MoonIcon size="12" color="white" />
-        </span>
-      </div>
-    </div>
-  {/if}
-</Button>
+<script lang="ts">
+  import { onMount } from "svelte";
+  import SunIcon from "./Icons/SunIcon.svelte";
+  import MoonIcon from "./Icons/MoonIcon.svelte";
+  import Button from "./Button/Button.svelte";
+
+  interface Props {
+    /** Container selector for applying dark class */
+    containerSelector?: string;
+  }
+
+  let { containerSelector = ".performer-portal" }: Props = $props();
+
+  let themeMode = $state<"auto" | "light" | "dark">("auto");
+  let isDark = $state(false);
+
+  function setMicdropDarkClass(enable: boolean) {
+    const container = document.querySelector(containerSelector);
+    if (enable) {
+      if (container) container.classList.add("dark");
+      document.documentElement.classList.add("dark");
+    } else {
+      if (container) container.classList.remove("dark");
+      document.documentElement.classList.remove("dark");
+    }
+  }
+
+  function getSystemPreference() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+
+  function applyTheme() {
+    if (themeMode === "auto") {
+      isDark = getSystemPreference();
+    } else {
+      isDark = themeMode === "dark";
+    }
+    setMicdropDarkClass(isDark);
+  }
+
+  onMount(() => {
+    const savedTheme = localStorage.getItem("theme");
+
+    if (savedTheme === "dark" || savedTheme === "light") {
+      themeMode = savedTheme;
+    } else {
+      themeMode = "auto";
+    }
+
+    applyTheme();
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (themeMode === "auto") {
+        applyTheme();
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  });
+
+  function toggleTheme(event: MouseEvent) {
+    if (themeMode === "auto") {
+      themeMode = "light";
+      localStorage.setItem("theme", "light");
+    } else if (themeMode === "light") {
+      themeMode = "dark";
+      localStorage.setItem("theme", "dark");
+    } else {
+      themeMode = "auto";
+      localStorage.removeItem("theme");
+    }
+
+    applyTheme();
+
+    if (event?.currentTarget) {
+      (event.currentTarget as HTMLElement).blur();
+    }
+  }
+
+  let titleText = $derived(
+    themeMode === "auto"
+      ? "Auto theme (following device) - click for light mode"
+      : themeMode === "light"
+        ? "Light mode - click for dark mode"
+        : "Dark mode - click for auto"
+  );
+</script>
+
+<Button
+  variant="alternative"
+  onclick={toggleTheme}
+  class="relative h-10 w-10 overflow-hidden p-0"
+  aria-label="Toggle theme"
+  title={titleText}
+>
+  <span
+    class="text-amber-500 transition-all duration-300 {themeMode === 'light'
+      ? 'scale-100 rotate-0 opacity-100'
+      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
+  >
+    <SunIcon size="20" />
+  </span>
+
+  <span
+    class="transition-all duration-300 {themeMode === 'dark'
+      ? 'scale-100 rotate-0 opacity-100'
+      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
+  >
+    <MoonIcon size="20" color="white" />
+  </span>
+
+  {#if themeMode === "auto"}
+    <div class="absolute inset-0 overflow-hidden rounded-lg">
+      <div
+        class="absolute flex h-full w-full items-center justify-center bg-white"
+        style="clip-path: polygon(0 0, 100% 0, 0 100%)"
+      >
+        <span class="-translate-x-1 -translate-y-1 text-amber-500">
+          <SunIcon size="12" />
+        </span>
+      </div>
+      <div
+        class="absolute flex h-full w-full items-center justify-center bg-gray-800"
+        style="clip-path: polygon(100% 0, 100% 100%, 0 100%)"
+      >
+        <span class="translate-x-1 translate-y-1">
+          <MoonIcon size="12" color="white" />
+        </span>
+      </div>
+    </div>
+  {/if}
+</Button>

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

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

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

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

package/dist/primitives/Drawer/Drawer.spec.js

@@ -0,0 +1,212 @@
+import { render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi, beforeEach, afterEach } from 'vitest';
+import Drawer from './Drawer.svelte';
+
+describe('Drawer Component', () => {
+  beforeEach(() => {
+    // Reset body overflow before each test
+    document.body.style.overflow = '';
+  });
+
+  afterEach(() => {
+    // Clean up body overflow after each test
+    document.body.style.overflow = '';
+  });
+
+  test('does not render when show is false and hidden is true', () => {
+    const { container } = render(Drawer, { props: { show: false, hidden: true } });
+    expect(container.querySelector('[role="dialog"]')).not.toBeInTheDocument();
+  });
+
+  test('renders when show is true', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+
+  test('renders when hidden is false', () => {
+    const { container } = render(Drawer, { props: { hidden: false } });
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+
+  test('has role="dialog" and aria-modal="true"', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveAttribute('aria-modal', 'true');
+  });
+
+  test('renders title when provided', () => {
+    render(Drawer, { props: { show: true, title: 'Test Drawer', id: 'test-drawer' } });
+    expect(screen.getByText('Test Drawer')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Drawer, { props: { show: true, class: 'custom-drawer' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('custom-drawer');
+  });
+
+  test('renders backdrop by default when visible', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const backdrop = container.querySelector('[role="presentation"]');
+    expect(backdrop).toBeInTheDocument();
+  });
+
+  test('does not render backdrop when backdrop is false', () => {
+    const { container } = render(Drawer, { props: { show: true, backdrop: false } });
+    const backdrop = container.querySelector('[role="presentation"]');
+    expect(backdrop).not.toBeInTheDocument();
+  });
+
+  test('passes through id prop', () => {
+    const { container } = render(Drawer, { props: { show: true, id: 'my-drawer' } });
+    const dialog = container.querySelector('#my-drawer');
+    expect(dialog).toBeInTheDocument();
+  });
+});
+
+describe('Drawer Placements', () => {
+  test('left placement has left-0 class', () => {
+    const { container } = render(Drawer, { props: { show: true, placement: 'left' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('left-0');
+  });
+
+  test('right placement has right-0 class', () => {
+    const { container } = render(Drawer, { props: { show: true, placement: 'right' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('right-0');
+  });
+
+  test('top placement has top-0 class', () => {
+    const { container } = render(Drawer, { props: { show: true, placement: 'top' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('top-0');
+  });
+
+  test('bottom placement has bottom-0 class', () => {
+    const { container } = render(Drawer, { props: { show: true, placement: 'bottom' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('bottom-0');
+  });
+});
+
+describe('Drawer Widths', () => {
+  test('sm width applies w-64', () => {
+    const { container } = render(Drawer, { props: { show: true, width: 'sm' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('w-64');
+  });
+
+  test('md width applies w-80 (default)', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('w-80');
+  });
+
+  test('lg width applies w-96', () => {
+    const { container } = render(Drawer, { props: { show: true, width: 'lg' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('w-96');
+  });
+
+  test('full width applies w-full', () => {
+    const { container } = render(Drawer, { props: { show: true, width: 'full' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('w-full');
+  });
+});
+
+describe('Drawer Accessibility', () => {
+  test('has tabindex="-1" for focus management', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveAttribute('tabindex', '-1');
+  });
+
+  test('has aria-labelledby when title and id are provided', () => {
+    const { container } = render(Drawer, { props: { show: true, title: 'Test', id: 'test-drawer' } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveAttribute('aria-labelledby', 'test-drawer-label');
+  });
+});
+
+describe('Drawer Styling', () => {
+  test('has fixed positioning', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('fixed');
+  });
+
+  test('has z-40 for stacking', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('z-40');
+  });
+
+  test('has flex flex-col layout', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('flex');
+    expect(dialog).toHaveClass('flex-col');
+  });
+
+  test('has bg-white background', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('bg-white');
+  });
+
+  test('has dark mode background', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveClass('dark:bg-gray-800');
+  });
+});
+
+describe('Drawer Edge Mode', () => {
+  test('shows edge trigger when edge=true, placement=bottom, and not visible', () => {
+    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', show: false, hidden: true } });
+    const edgeTrigger = container.querySelector('.cursor-pointer');
+    expect(edgeTrigger).toBeInTheDocument();
+  });
+
+  test('hides edge trigger when drawer is visible', () => {
+    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', show: true } });
+    // Edge trigger should not be visible when drawer is open
+    const edgeTriggers = container.querySelectorAll('.cursor-pointer.fixed');
+    // The drawer itself might have cursor classes, so check for the specific edge trigger pattern
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+});
+
+describe('Drawer Callbacks', () => {
+  test('onclose prop is accepted', () => {
+    const onclose = vi.fn();
+    const { container } = render(Drawer, {
+      props: { show: true, closeOnBackdropClick: true, onclose }
+    });
+    // Verify drawer renders with onclose callback
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+
+  test('closeOnBackdropClick prop defaults to true', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    // Drawer renders with default closeOnBackdropClick behavior
+    expect(container.querySelector('[role="presentation"]')).toBeInTheDocument();
+  });
+
+  test('closeOnEscape prop defaults to true', () => {
+    const { container } = render(Drawer, { props: { show: true } });
+    // Drawer accepts closeOnEscape prop
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+
+  test('onopen prop is accepted', () => {
+    const onopen = vi.fn();
+    const { container } = render(Drawer, {
+      props: { show: true, onopen }
+    });
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+});