@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/calendar/PublicCard/PublicCard.spec.d.ts

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

package/dist/calendar/PublicCard/PublicCard.spec.d.ts.map

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

package/dist/calendar/PublicCard/PublicCard.spec.js

@@ -0,0 +1,301 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/svelte';
+import PublicCard from './PublicCard.svelte';
+
+describe('PublicCard Component', () => {
+  const mockEvent = {
+    name: 'Test Event',
+    date: '2024-03-15',
+    status: 'On Sale',
+    image: 'https://example.com/image.jpg',
+    timeline: '8:00 PM - 11:00 PM',
+    description: 'This is a test event description',
+    doorsTimeline: 'Doors at 7:00 PM',
+  };
+
+  beforeEach(() => {
+    // Mock window.innerWidth
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1024,
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders event name', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    it('renders nothing when events array is empty', () => {
+      const { container } = render(PublicCard, { props: { events: [] } });
+      expect(container.querySelector('article')).not.toBeInTheDocument();
+    });
+
+    it('renders multiple events', () => {
+      const events = [
+        { name: 'Event 1', date: '2024-03-15' },
+        { name: 'Event 2', date: '2024-03-16' },
+      ];
+      render(PublicCard, { props: { events } });
+      expect(screen.getByText('Event 1')).toBeInTheDocument();
+      expect(screen.getByText('Event 2')).toBeInTheDocument();
+    });
+
+    it('renders event image', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      const img = screen.getByAltText('Test Event');
+      expect(img).toHaveAttribute('src', 'https://example.com/image.jpg');
+    });
+
+    it('uses placeholder when no image provided', () => {
+      const eventWithoutImage = { ...mockEvent, image: null };
+      render(PublicCard, { props: { events: [eventWithoutImage] } });
+      const img = screen.getByAltText('Test Event');
+      expect(img.src).toContain('data:image/svg+xml');
+    });
+
+    it('uses custom placeholder image', () => {
+      const eventWithoutImage = { ...mockEvent, image: null };
+      render(PublicCard, {
+        props: {
+          events: [eventWithoutImage],
+          placeholderImage: 'https://custom-placeholder.jpg'
+        }
+      });
+      const img = screen.getByAltText('Test Event');
+      expect(img).toHaveAttribute('src', 'https://custom-placeholder.jpg');
+    });
+  });
+
+  describe('date formatting', () => {
+    it('formats date correctly', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      // Date may vary by timezone
+      const button = screen.getByRole('button');
+      expect(button.textContent).toMatch(/Mar/);
+    });
+
+    it('handles missing date', () => {
+      const eventWithoutDate = { ...mockEvent, date: null };
+      render(PublicCard, { props: { events: [eventWithoutDate] } });
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    it('displays timeline start time', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      // Time is rendered within nested spans - check article contains it
+      const article = container.querySelector('article');
+      expect(article.textContent).toContain('8:00 PM');
+    });
+  });
+
+  describe('status badges', () => {
+    it('shows Sold out badge', () => {
+      const soldOutEvent = { ...mockEvent, status: 'Sold out' };
+      render(PublicCard, { props: { events: [soldOutEvent] } });
+      expect(screen.getByText('Sold out')).toBeInTheDocument();
+    });
+
+    it('shows Selling fast badge', () => {
+      const sellingFastEvent = { ...mockEvent, status: 'Selling fast' };
+      render(PublicCard, { props: { events: [sellingFastEvent] } });
+      expect(screen.getByText('Selling fast')).toBeInTheDocument();
+    });
+
+    it('shows Almost sold out badge', () => {
+      const almostSoldOutEvent = { ...mockEvent, status: 'Almost sold out' };
+      render(PublicCard, { props: { events: [almostSoldOutEvent] } });
+      expect(screen.getByText('Almost sold out')).toBeInTheDocument();
+    });
+
+    it('does not show badge for On Sale status', () => {
+      const onSaleEvent = { ...mockEvent, status: 'On Sale' };
+      render(PublicCard, { props: { events: [onSaleEvent] } });
+      // On Sale should not show as a badge
+      expect(screen.queryByText('On Sale')).not.toBeInTheDocument();
+    });
+
+    it('applies correct class for Sold out', () => {
+      const soldOutEvent = { ...mockEvent, status: 'Sold out' };
+      render(PublicCard, { props: { events: [soldOutEvent] } });
+      const badge = screen.getByText('Sold out');
+      expect(badge.className).toContain('bg-red-100');
+    });
+
+    it('applies correct class for Selling fast', () => {
+      const sellingFastEvent = { ...mockEvent, status: 'Selling fast' };
+      render(PublicCard, { props: { events: [sellingFastEvent] } });
+      const badge = screen.getByText('Selling fast');
+      expect(badge.className).toContain('bg-yellow-100');
+    });
+  });
+
+  describe('view modes', () => {
+    it('uses row view by default', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      const article = container.querySelector('article');
+      expect(article.className).toContain('grid');
+    });
+
+    it('applies col view classes', () => {
+      const { container } = render(PublicCard, {
+        props: { events: [mockEvent], view: 'col' }
+      });
+      const article = container.querySelector('article');
+      expect(article.className).toContain('flex-col');
+    });
+
+    it('shows description in row view', () => {
+      render(PublicCard, { props: { events: [mockEvent], view: 'row' } });
+      expect(screen.getByText('This is a test event description')).toBeInTheDocument();
+    });
+
+    it('hides description in col view', () => {
+      render(PublicCard, { props: { events: [mockEvent], view: 'col' } });
+      expect(screen.queryByText('This is a test event description')).not.toBeInTheDocument();
+    });
+
+    it('shows doors timeline in row view', () => {
+      render(PublicCard, { props: { events: [mockEvent], view: 'row' } });
+      expect(screen.getByText('Doors at 7:00 PM')).toBeInTheDocument();
+    });
+
+    it('hides doors timeline in col view', () => {
+      render(PublicCard, { props: { events: [mockEvent], view: 'col' } });
+      expect(screen.queryByText('Doors at 7:00 PM')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('click handling', () => {
+    it('calls onEventClick when clicked', async () => {
+      const onEventClick = vi.fn();
+      render(PublicCard, {
+        props: { events: [mockEvent], onEventClick }
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.click(button);
+
+      expect(onEventClick).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('does not throw when onEventClick is not provided', async () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      const button = screen.getByRole('button');
+
+      await expect(fireEvent.click(button)).resolves.not.toThrow();
+    });
+  });
+
+  describe('keyboard handling', () => {
+    it('calls onEventClick when Enter is pressed', async () => {
+      const onEventClick = vi.fn();
+      render(PublicCard, {
+        props: { events: [mockEvent], onEventClick }
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.keyDown(button, { key: 'Enter' });
+
+      expect(onEventClick).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('calls onEventClick when Space is pressed', async () => {
+      const onEventClick = vi.fn();
+      render(PublicCard, {
+        props: { events: [mockEvent], onEventClick }
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.keyDown(button, { key: ' ' });
+
+      expect(onEventClick).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('does not call onEventClick for other keys', async () => {
+      const onEventClick = vi.fn();
+      render(PublicCard, {
+        props: { events: [mockEvent], onEventClick }
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.keyDown(button, { key: 'Tab' });
+
+      expect(onEventClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('has correct aria-label', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      const button = screen.getByRole('button');
+      const ariaLabel = button.getAttribute('aria-label');
+      expect(ariaLabel).toContain('Test Event');
+      expect(ariaLabel).toContain('On Sale');
+      expect(ariaLabel).toContain('Press Enter to view details');
+    });
+
+    it('is focusable', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('tabindex', '0');
+    });
+
+    it('has lazy loading on images', () => {
+      render(PublicCard, { props: { events: [mockEvent] } });
+      const img = screen.getByAltText('Test Event');
+      expect(img).toHaveAttribute('loading', 'lazy');
+    });
+  });
+
+  describe('styling', () => {
+    it('has transition effects', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      const article = container.querySelector('article');
+      expect(article).toHaveClass('transition-all');
+    });
+
+    it('has hover effects', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      const article = container.querySelector('article');
+      expect(article.className).toContain('hover:shadow-lg');
+    });
+
+    it('has focus ring', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      const article = container.querySelector('article');
+      expect(article.className).toContain('focus:ring-4');
+    });
+
+    it('has dark mode support', () => {
+      const { container } = render(PublicCard, { props: { events: [mockEvent] } });
+      const article = container.querySelector('article');
+      expect(article.className).toContain('dark:bg-gray-800');
+    });
+  });
+
+  describe('responsive behavior', () => {
+    it('handles resize events', async () => {
+      const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+      render(PublicCard, { props: { events: [mockEvent] } });
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+    });
+
+    it('removes resize listener on cleanup', () => {
+      const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+      const { unmount } = render(PublicCard, { props: { events: [mockEvent] } });
+
+      unmount();
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+    });
+  });
+});

package/dist/calendar/PublicCard/PublicCard.svelte

@@ -1,75 +1,75 @@
-<script>
-  import { typography } from '../../tokens/typography';
-
-  let {
-    events = [],
-    view = "row",
-    placeholderImage = null,
-    onEventClick,
-  } = $props();
-
-  let isSmallScreen = $state(false);
-
-  const DEFAULT_PLACEHOLDER = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%23e5e7eb' width='100' height='100'/%3E%3Cpath d='M50 25c-8.3 0-15 6.7-15 15v5c0 8.3 6.7 15 15 15s15-6.7 15-15v-5c0-8.3-6.7-15-15-15zm0 45c-13.8 0-25 5.6-25 12.5V90h50v-7.5c0-6.9-11.2-12.5-25-12.5z' fill='%239ca3af'/%3E%3C/svg%3E";
-
-  let placeholder = $derived(placeholderImage || DEFAULT_PLACEHOLDER);
-
-  let options = {
-    weekday: "short",
-    month: "short",
-    day: "numeric",
-  };
-
-  function handleResize() {
-    isSmallScreen = window.innerWidth < 768;
-  }
-
-  $effect(() => {
-    isSmallScreen = window.innerWidth < 768;
-    window.addEventListener("resize", handleResize);
-    return () => {
-      if (typeof window !== 'undefined') {
-        window.removeEventListener("resize", handleResize);
-      }
-    };
-  });
-
-  function handleEventClick(event) {
-    onEventClick?.(event);
-  }
-
-  function handleKeydown(e, event) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleEventClick(event);
-    }
-  }
-
-  function getStatusBadgeClass(status) {
-    switch (status) {
-      case 'Sold out':
-        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
-      case 'Selling fast':
-        return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
-      case 'Almost sold out':
-        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
-      default:
-        return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
-    }
-  }
-
-  function shouldShowBadge(status) {
-    return status === 'Sold out' || status === 'Selling fast' || status === 'Almost sold out';
-  }
-
-  function formatEventDate(dateStr) {
-    if (!dateStr) return '';
-    const [year, month, day] = dateStr.split('-').map(Number);
-    const date = new Date(year, month - 1, day);
-    return date.toLocaleDateString("en-US", options);
-  }
-</script>
-
+<script>
+  import { typography } from '../../tokens/typography';
+
+  let {
+    events = [],
+    view = "row",
+    placeholderImage = null,
+    onEventClick,
+  } = $props();
+
+  let isSmallScreen = $state(false);
+
+  const DEFAULT_PLACEHOLDER = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect fill='%23e5e7eb' width='100' height='100'/%3E%3Cpath d='M50 25c-8.3 0-15 6.7-15 15v5c0 8.3 6.7 15 15 15s15-6.7 15-15v-5c0-8.3-6.7-15-15-15zm0 45c-13.8 0-25 5.6-25 12.5V90h50v-7.5c0-6.9-11.2-12.5-25-12.5z' fill='%239ca3af'/%3E%3C/svg%3E";
+
+  let placeholder = $derived(placeholderImage || DEFAULT_PLACEHOLDER);
+
+  let options = {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+  };
+
+  function handleResize() {
+    isSmallScreen = window.innerWidth < 768;
+  }
+
+  $effect(() => {
+    isSmallScreen = window.innerWidth < 768;
+    window.addEventListener("resize", handleResize);
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener("resize", handleResize);
+      }
+    };
+  });
+
+  function handleEventClick(event) {
+    onEventClick?.(event);
+  }
+
+  function handleKeydown(e, event) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleEventClick(event);
+    }
+  }
+
+  function getStatusBadgeClass(status) {
+    switch (status) {
+      case 'Sold out':
+        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+      case 'Selling fast':
+        return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
+      case 'Almost sold out':
+        return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+      default:
+        return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
+    }
+  }
+
+  function shouldShowBadge(status) {
+    return status === 'Sold out' || status === 'Selling fast' || status === 'Almost sold out';
+  }
+
+  function formatEventDate(dateStr) {
+    if (!dateStr) return '';
+    const [year, month, day] = dateStr.split('-').map(Number);
+    const date = new Date(year, month - 1, day);
+    return date.toLocaleDateString("en-US", options);
+  }
+</script>
+
 {#each events as event}
   <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
   <article
@@ -82,65 +82,65 @@
     role="button"
     aria-label={`${event.name}, ${event.status || 'On Sale'}, ${formatEventDate(event.date)}. Press Enter to view details.`}
   >
-    <div
-      class="bg-gray-100 dark:bg-gray-700 flex items-center justify-center overflow-hidden {view === 'col'
-        ? 'w-full aspect-[4/3] rounded-t-lg'
-        : 'w-24 h-24 sm:w-40 sm:h-32 rounded-lg flex-shrink-0'}"
-    >
-      <img
-        src={event.image || placeholder}
-        alt={event.name}
-        class="object-contain w-full h-full"
-        loading="lazy"
-      />
-    </div>
-
-    <div
-      class="flex flex-col {view === 'col' ? 'p-3 gap-1' : 'gap-1.5 sm:gap-2 justify-center'}"
-    >
-      {#if view === "col" && event.status && shouldShowBadge(event.status)}
-        <span
-          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded absolute top-2 left-2 {getStatusBadgeClass(event.status)}"
-        >
-          {event.status}
-        </span>
-      {/if}
-
-      {#if view === "row" && event.status && shouldShowBadge(event.status)}
-        <span
-          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded {getStatusBadgeClass(event.status)}"
-        >
-          {event.status}
-        </span>
-      {/if}
-
-      <h4 class="{typography.h4} leading-tight line-clamp-2">
-        {event.name}
-      </h4>
-
-      <div
-        class="{typography.textMuted} {view === 'col' ? 'text-xs' : 'text-xs sm:text-sm'}"
-      >
-        <span class="font-medium">
-          {formatEventDate(event.date)}
-          {#if event.timeline}
-            <span class="text-gray-500 dark:text-gray-500">&#8226;</span>
-            {event.timeline.split("-")[0].trim()}
-          {/if}
-        </span>
-      </div>
-
-      {#if view === "row" && event.description}
-        <p class="{typography.xsMuted} text-xs sm:text-sm line-clamp-2 mt-1">
-          {event.description}
-        </p>
-      {/if}
-
-      {#if event.doorsTimeline && view === "row"}
-        <div class="{typography.xsMuted} text-xs">
-          {event.doorsTimeline}
-        </div>
-      {/if}
-    </div>
-  </article>
-{/each}
+    <div
+      class="bg-gray-100 dark:bg-gray-700 flex items-center justify-center overflow-hidden {view === 'col'
+        ? 'w-full aspect-[4/3] rounded-t-lg'
+        : 'w-24 h-24 sm:w-40 sm:h-32 rounded-lg flex-shrink-0'}"
+    >
+      <img
+        src={event.image || placeholder}
+        alt={event.name}
+        class="object-contain w-full h-full"
+        loading="lazy"
+      />
+    </div>
+
+    <div
+      class="flex flex-col {view === 'col' ? 'p-3 gap-1' : 'gap-1.5 sm:gap-2 justify-center'}"
+    >
+      {#if view === "col" && event.status && shouldShowBadge(event.status)}
+        <span
+          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded absolute top-2 left-2 {getStatusBadgeClass(event.status)}"
+        >
+          {event.status}
+        </span>
+      {/if}
+
+      {#if view === "row" && event.status && shouldShowBadge(event.status)}
+        <span
+          class="inline-flex items-center w-fit px-2 py-0.5 text-xs font-semibold rounded {getStatusBadgeClass(event.status)}"
+        >
+          {event.status}
+        </span>
+      {/if}
+
+      <h4 class="{typography.h4} leading-tight line-clamp-2">
+        {event.name}
+      </h4>
+
+      <div
+        class="{typography.textMuted} {view === 'col' ? 'text-xs' : 'text-xs sm:text-sm'}"
+      >
+        <span class="font-medium">
+          {formatEventDate(event.date)}
+          {#if event.timeline}
+            <span class="text-gray-500 dark:text-gray-500">&#8226;</span>
+            {event.timeline.split("-")[0].trim()}
+          {/if}
+        </span>
+      </div>
+
+      {#if view === "row" && event.description}
+        <p class="{typography.xsMuted} text-xs sm:text-sm line-clamp-2 mt-1">
+          {event.description}
+        </p>
+      {/if}
+
+      {#if event.doorsTimeline && view === "row"}
+        <div class="{typography.xsMuted} text-xs">
+          {event.doorsTimeline}
+        </div>
+      {/if}
+    </div>
+  </article>
+{/each}

package/dist/calendar/ShowCard/ShowCard.spec.d.ts

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

package/dist/calendar/ShowCard/ShowCard.spec.d.ts.map

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