@getmicdrop/svelte-components 5.4.0 → 5.4.1

package/dist/patterns/navigation/BottomNav.spec.js

@@ -1,130 +1,130 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import BottomNav from './BottomNav.svelte';
-
-// Mock fetch for API calls
-global.fetch = vi.fn(() =>
-  Promise.resolve({
-    ok: true,
-    json: () => Promise.resolve([]),
-  })
-);
-
-// Mock SvelteKit modules
-vi.mock('$app/stores', () => ({
-  page: {
-    subscribe: (fn) => {
-      fn({ url: { pathname: '/shows' } });
-      return () => {};
-    }
-  }
-}));
-
-vi.mock('$app/paths', () => ({
-  base: '/performers'
-}));
-
-describe('BottomNav', () => {
-  const defaultLinks = [
-    { label: 'Home', href: '/', icon: 'home' },
-    { label: 'Shows', href: '/shows', icon: 'shows' },
-    { label: 'Availability', href: '/availability', icon: 'availability' },
-    { label: 'Profile', href: '/profile', icon: 'profile' }
-  ];
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    global.fetch.mockImplementation(() =>
-      Promise.resolve({
-        ok: true,
-        json: () => Promise.resolve([]),
-      })
-    );
-  });
-
-  describe('basic rendering', () => {
-    it('renders all navigation links', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const navItems = container.querySelectorAll('.bottom-nav-item');
-      expect(navItems.length).toBe(4);
-    });
-
-    it('renders link labels as aria-label', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const homeLink = container.querySelector('[aria-label="Home"]');
-      expect(homeLink).toBeTruthy();
-    });
-
-    it('renders icons for each link', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const icons = container.querySelectorAll('.bottom-nav-icon');
-      expect(icons.length).toBe(4);
-    });
-  });
-
-  describe('active state', () => {
-    it('marks current path as active', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const showsLink = container.querySelector('a[href="/shows"]');
-      expect(showsLink.classList.contains('active')).toBe(true);
-    });
-
-    it('non-current paths are not active', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const homeLink = container.querySelector('a[href="/"]');
-      expect(homeLink.classList.contains('active')).toBe(false);
-    });
-  });
-
-  describe('notification dot', () => {
-    it('shows notification dot when there are invitations', async () => {
-      global.fetch.mockImplementationOnce(() =>
-        Promise.resolve({
-          ok: true,
-          json: () => Promise.resolve([{ acceptedState: 0 }]),
-        })
-      );
-
-      const { container } = render(BottomNav, { links: defaultLinks });
-
-      // Wait for the fetch to complete
-      await vi.waitFor(() => {
-        const dot = container.querySelector('.notification-dot');
-        return dot !== null;
-      }, { timeout: 1000 }).catch(() => null);
-    });
-
-    it('does not show notification dot when no invitations', () => {
-      const { container } = render(BottomNav, { links: defaultLinks });
-      const dot = container.querySelector('.notification-dot');
-      expect(dot).toBeFalsy();
-    });
-  });
-
-  describe('empty links', () => {
-    it('renders nothing when links array is empty', () => {
-      const { container } = render(BottomNav, { links: [] });
-      const navItems = container.querySelectorAll('.bottom-nav-item');
-      expect(navItems.length).toBe(0);
-    });
-  });
-
-  describe('API error handling', () => {
-    it('handles fetch error gracefully', async () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      global.fetch.mockImplementationOnce(() =>
-        Promise.resolve({
-          ok: false,
-        })
-      );
-
-      const { container } = render(BottomNav, { links: defaultLinks });
-
-      // Component should still render despite fetch error
-      const navItems = container.querySelectorAll('.bottom-nav-item');
-      expect(navItems.length).toBe(4);
-
-      consoleSpy.mockRestore();
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import BottomNav from './BottomNav.svelte';
+
+// Mock fetch for API calls
+global.fetch = vi.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve([]),
+  })
+);
+
+// Mock SvelteKit modules
+vi.mock('$app/stores', () => ({
+  page: {
+    subscribe: (fn) => {
+      fn({ url: { pathname: '/shows' } });
+      return () => {};
+    }
+  }
+}));
+
+vi.mock('$app/paths', () => ({
+  base: '/performers'
+}));
+
+describe('BottomNav', () => {
+  const defaultLinks = [
+    { label: 'Home', href: '/', icon: 'home' },
+    { label: 'Shows', href: '/shows', icon: 'shows' },
+    { label: 'Availability', href: '/availability', icon: 'availability' },
+    { label: 'Profile', href: '/profile', icon: 'profile' }
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch.mockImplementation(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve([]),
+      })
+    );
+  });
+
+  describe('basic rendering', () => {
+    it('renders all navigation links', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(4);
+    });
+
+    it('renders link labels as aria-label', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const homeLink = container.querySelector('[aria-label="Home"]');
+      expect(homeLink).toBeTruthy();
+    });
+
+    it('renders icons for each link', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const icons = container.querySelectorAll('.bottom-nav-icon');
+      expect(icons.length).toBe(4);
+    });
+  });
+
+  describe('active state', () => {
+    it('marks current path as active', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const showsLink = container.querySelector('a[href="/shows"]');
+      expect(showsLink.classList.contains('active')).toBe(true);
+    });
+
+    it('non-current paths are not active', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const homeLink = container.querySelector('a[href="/"]');
+      expect(homeLink.classList.contains('active')).toBe(false);
+    });
+  });
+
+  describe('notification dot', () => {
+    it('shows notification dot when there are invitations', async () => {
+      global.fetch.mockImplementationOnce(() =>
+        Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve([{ acceptedState: 0 }]),
+        })
+      );
+
+      const { container } = render(BottomNav, { links: defaultLinks });
+
+      // Wait for the fetch to complete
+      await vi.waitFor(() => {
+        const dot = container.querySelector('.notification-dot');
+        return dot !== null;
+      }, { timeout: 1000 }).catch(() => null);
+    });
+
+    it('does not show notification dot when no invitations', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const dot = container.querySelector('.notification-dot');
+      expect(dot).toBeFalsy();
+    });
+  });
+
+  describe('empty links', () => {
+    it('renders nothing when links array is empty', () => {
+      const { container } = render(BottomNav, { links: [] });
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(0);
+    });
+  });
+
+  describe('API error handling', () => {
+    it('handles fetch error gracefully', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      global.fetch.mockImplementationOnce(() =>
+        Promise.resolve({
+          ok: false,
+        })
+      );
+
+      const { container } = render(BottomNav, { links: defaultLinks });
+
+      // Component should still render despite fetch error
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(4);
+
+      consoleSpy.mockRestore();
+    });
+  });
+});

package/dist/patterns/navigation/BottomNav.stories.svelte

@@ -1,117 +1,117 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import BottomNav from './BottomNav.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Layout/BottomNav',
-    component: BottomNav,
-    tags: ['autodocs'],
-  });
-
-</script>
-
-<script>
-  
-  const defaultLinks = [
-    { label: 'Home', href: '/', icon: 'Home' },
-    { label: 'Shows', href: '/shows', icon: 'Shows' },
-    { label: 'Availability', href: '/availability', icon: 'Availability' },
-    { label: 'Profile', href: '/profile', icon: 'Profile' },
-  ];
-
-  const extendedLinks = [
-    { label: 'Home', href: '/', icon: 'Home' },
-    { label: 'Shows', href: '/shows', icon: 'Shows' },
-    { label: 'Availability', href: '/availability', icon: 'Availability' },
-    { label: 'Messages', href: '/messages', icon: 'Message' },
-    { label: 'Profile', href: '/profile', icon: 'Profile' },
-  ];
-</script>
-
-<Story name="Default (4 Tabs)">
-  <div class="bg-gray-100 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Mobile Bottom Navigation (4 tabs)</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
-      <div class="h-64 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
-      </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
-        <BottomNav links={defaultLinks} />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="With 5 Tabs">
-  <div class="bg-gray-100 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Extended Navigation (5 tabs)</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
-      <div class="h-64 bg-gradient-to-br from-purple-50 to-purple-100 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
-      </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
-        <BottomNav links={extendedLinks} />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Different Icon Set">
-  <div class="bg-gray-100 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Custom Icons</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
-      <div class="h-64 bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
-      </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
-        <BottomNav
-          links={[
-            { label: 'Dashboard', href: '/', icon: 'Home' },
-            { label: 'Events', href: '/events', icon: 'Shows' },
-            { label: 'Notifications', href: '/notifications', icon: 'Notification' },
-            { label: 'Settings', href: '/settings', icon: 'Profile' },
-          ]}
-        />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Mobile Viewport">
-  <div class="max-w-[375px] mx-auto bg-white dark:bg-gray-900 shadow-2xl rounded-3xl overflow-hidden">
-    <!-- Mock iPhone screen -->
-    <div class="h-[667px] flex flex-col">
-      <!-- Status bar -->
-      <div class="h-6 bg-black flex items-center justify-between px-4">
-        <span class="text-white text-xs">9:41</span>
-        <span class="text-white text-xs">100%</span>
-      </div>
-
-      <!-- Content area -->
-      <div class="flex-1 bg-gradient-to-br from-blue-50 to-purple-50 p-4">
-        <h1 class="text-2xl font-bold mb-2">Home</h1>
-        <p class="text-gray-500 dark:text-gray-400">This is a mobile viewport simulation</p>
-      </div>
-
-      <!-- Bottom navigation -->
-      <div class="flex border-t bg-white dark:bg-gray-900 safe-bottom">
-        <BottomNav links={defaultLinks} />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Dark Mode">
-  <div class="dark bg-gray-900 p-4 min-h-screen">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Dark Mode Bottom Navigation</p>
-    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-2xl overflow-hidden">
-      <div class="h-64 bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Dark Mode Content</p>
-      </div>
-      <div class="flex border-t border-gray-700 bg-gray-800">
-        <BottomNav links={defaultLinks} />
-      </div>
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import BottomNav from './BottomNav.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Layout/BottomNav',
+    component: BottomNav,
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+  
+  const defaultLinks = [
+    { label: 'Home', href: '/', icon: 'Home' },
+    { label: 'Shows', href: '/shows', icon: 'Shows' },
+    { label: 'Availability', href: '/availability', icon: 'Availability' },
+    { label: 'Profile', href: '/profile', icon: 'Profile' },
+  ];
+
+  const extendedLinks = [
+    { label: 'Home', href: '/', icon: 'Home' },
+    { label: 'Shows', href: '/shows', icon: 'Shows' },
+    { label: 'Availability', href: '/availability', icon: 'Availability' },
+    { label: 'Messages', href: '/messages', icon: 'Message' },
+    { label: 'Profile', href: '/profile', icon: 'Profile' },
+  ];
+</script>
+
+<Story name="Default (4 Tabs)">
+  <div class="bg-gray-100 dark:bg-gray-700 p-4">
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Mobile Bottom Navigation (4 tabs)</p>
+    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center">
+        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-white dark:bg-gray-900">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="With 5 Tabs">
+  <div class="bg-gray-100 dark:bg-gray-700 p-4">
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Extended Navigation (5 tabs)</p>
+    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-purple-50 to-purple-100 flex items-center justify-center">
+        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-white dark:bg-gray-900">
+        <BottomNav links={extendedLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Different Icon Set">
+  <div class="bg-gray-100 dark:bg-gray-700 p-4">
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Custom Icons</p>
+    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center">
+        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-white dark:bg-gray-900">
+        <BottomNav
+          links={[
+            { label: 'Dashboard', href: '/', icon: 'Home' },
+            { label: 'Events', href: '/events', icon: 'Shows' },
+            { label: 'Notifications', href: '/notifications', icon: 'Notification' },
+            { label: 'Settings', href: '/settings', icon: 'Profile' },
+          ]}
+        />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Mobile Viewport">
+  <div class="max-w-[375px] mx-auto bg-white dark:bg-gray-900 shadow-2xl rounded-3xl overflow-hidden">
+    <!-- Mock iPhone screen -->
+    <div class="h-[667px] flex flex-col">
+      <!-- Status bar -->
+      <div class="h-6 bg-black flex items-center justify-between px-4">
+        <span class="text-white text-xs">9:41</span>
+        <span class="text-white text-xs">100%</span>
+      </div>
+
+      <!-- Content area -->
+      <div class="flex-1 bg-gradient-to-br from-blue-50 to-purple-50 p-4">
+        <h1 class="text-2xl font-bold mb-2">Home</h1>
+        <p class="text-gray-500 dark:text-gray-400">This is a mobile viewport simulation</p>
+      </div>
+
+      <!-- Bottom navigation -->
+      <div class="flex border-t bg-white dark:bg-gray-900 safe-bottom">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Dark Mode">
+  <div class="dark bg-gray-900 p-4 min-h-screen">
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Dark Mode Bottom Navigation</p>
+    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-2xl overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center">
+        <p class="text-gray-500 dark:text-gray-400">Dark Mode Content</p>
+      </div>
+      <div class="flex border-t border-gray-700 bg-gray-800">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>

package/dist/patterns/navigation/BottomNav.svelte

@@ -1,54 +1,54 @@
-<script>
-  import { page } from '../../__LIB_STORES__.js';
-  import { base } from '../../__LIB_PATHS__.js';
-  import Icon from "../../primitives/Icons/Icon.svelte";
-  import { typography } from '../../tokens/typography';
-
-  let {
-    links = [],
-  } = $props();
-
-  let shows = $state({ invitation: [] });
-
-  let currentPath = $derived($page.url.pathname);
-
-  function isActive(href, path) {
-    if (href === `${base}/` || href === '/') {
-      return path === href || path === `${base}/`;
-    }
-    return path.startsWith(href);
-  }
-
-  $effect(() => {
-    (async () => {
-      try {
-        const res = await fetch(`/api/getEventsForVenue`);
-        if (!res.ok) throw new Error("Failed to fetch shows.");
-        const events = await res.json();
-        shows.invitation = events.filter((event) => event.acceptedState === 0);
-      } catch (err) {
-        console.error("Failed to fetch shows:", err);
-      }
-    })();
-  });
-</script>
-
-{#each links as { label, href, icon }}
-  <a
-    {href}
-    class={`flex-1 flex items-center justify-center py-3 px-2 no-underline bg-transparent border-none cursor-pointer min-w-0
-      ${typography.textMuted} transition-colors duration-150
-      hover:text-gray-900 hover:no-underline dark:hover:text-white
-      select-none touch-manipulation
-      ${isActive(href, currentPath) ? 'text-blue-700 dark:text-blue-500' : ''}`}
-    aria-label={label}
-    style="-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;"
-  >
-    <span class="relative flex items-center justify-center transition-transform duration-150 active:scale-[0.8]">
-      <Icon name={icon} size="24" />
-      {#if label === "Shows" && shows?.invitation?.length > 0}
-        <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
-      {/if}
-    </span>
-  </a>
-{/each}
+<script>
+  import { page } from '../../__LIB_STORES__.js';
+  import { base } from '../../__LIB_PATHS__.js';
+  import Icon from "../../primitives/Icons/Icon.svelte";
+  import { typography } from '../../tokens/typography';
+
+  let {
+    links = [],
+  } = $props();
+
+  let shows = $state({ invitation: [] });
+
+  let currentPath = $derived($page.url.pathname);
+
+  function isActive(href, path) {
+    if (href === `${base}/` || href === '/') {
+      return path === href || path === `${base}/`;
+    }
+    return path.startsWith(href);
+  }
+
+  $effect(() => {
+    (async () => {
+      try {
+        const res = await fetch(`/api/getEventsForVenue`);
+        if (!res.ok) throw new Error("Failed to fetch shows.");
+        const events = await res.json();
+        shows.invitation = events.filter((event) => event.acceptedState === 0);
+      } catch (err) {
+        console.error("Failed to fetch shows:", err);
+      }
+    })();
+  });
+</script>
+
+{#each links as { label, href, icon }}
+  <a
+    {href}
+    class={`flex-1 flex items-center justify-center py-3 px-2 no-underline bg-transparent border-none cursor-pointer min-w-0
+      ${typography.textMuted} transition-colors duration-150
+      hover:text-gray-900 hover:no-underline dark:hover:text-white
+      select-none touch-manipulation
+      ${isActive(href, currentPath) ? 'text-blue-700 dark:text-blue-500' : ''}`}
+    aria-label={label}
+    style="-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;"
+  >
+    <span class="relative flex items-center justify-center transition-transform duration-150 active:scale-[0.8]">
+      <Icon name={icon} size="24" />
+      {#if label === "Shows" && shows?.invitation?.length > 0}
+        <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+      {/if}
+    </span>
+  </a>
+{/each}