@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/calendar/ShowCard/ShowCard.svelte

@@ -1,157 +1,157 @@
-<script>
-  import { ShareOutline, CheckOutline } from '../../primitives/Icons';
-  import ShowTimeCard from '../ShowTimeCard/ShowTimeCard.svelte';
-  import { typography } from '../../tokens/typography';
-
-  let {
-    event = {},
-    showtimes = [],
-    showTitle = true,
-    formatDateTime = (dateStr) => {
-      if (!dateStr) return '';
-      const date = new Date(dateStr);
-      if (isNaN(date.getTime())) return dateStr;
-      return date.toLocaleDateString('en-US', {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit'
-      });
-    },
-    formatTimeline = (timeStr) => {
-      if (!timeStr) return '';
-      const date = new Date(timeStr);
-      if (!isNaN(date.getTime())) {
-        return date.toLocaleTimeString('en-US', {
-          hour: 'numeric',
-          minute: '2-digit',
-          hour12: true
-        });
-      }
-      return timeStr;
-    },
-    onShowtimeSelect,
-  } = $props();
-
-  let selectedDate = $state(null);
-  let shareSuccess = $state(false);
-
-  function handleSelect(e) {
-    selectedDate = e.date;
-    onShowtimeSelect?.({ date: e.date, ...e });
-  }
-
-  async function handleShare() {
-    const shareData = {
-      title: event.name,
-      text: `Check out ${event.name} at ${event.venue?.name || 'this venue'}!`,
-      url: typeof window !== 'undefined' ? window.location.href : ''
-    };
-
-    try {
-      if (typeof navigator !== 'undefined' && navigator.share && navigator.canShare && navigator.canShare(shareData)) {
-        await navigator.share(shareData);
-      } else if (typeof navigator !== 'undefined' && navigator.clipboard) {
-        await navigator.clipboard.writeText(shareData.url);
-        shareSuccess = true;
-        setTimeout(() => {
-          shareSuccess = false;
-        }, 2000);
-      }
-    } catch (err) {
-      if (err.name !== 'AbortError' && typeof navigator !== 'undefined' && navigator.clipboard) {
-        try {
-          await navigator.clipboard.writeText(shareData.url);
-          shareSuccess = true;
-          setTimeout(() => {
-            shareSuccess = false;
-          }, 2000);
-        } catch {
-          console.error('Share failed:', err);
-        }
-      }
-    }
-  }
-</script>
-
-<div class="h-fit rounded-lg sm:px-5 py-4 md:border md:border-gray-200 md:dark:border-gray-700 bg-white dark:bg-gray-800">
-  {#if showTitle}
-    <div class="flex justify-between items-start gap-2 mb-4">
-      <h2 class="{typography.h2} flex-1 text-left">
-        {event.name || ''}
-      </h2>
-      <button
-        class="flex-shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
-        aria-label="Share event"
-        onclick={handleShare}
-      >
-        {#if shareSuccess}
-          <CheckOutline class="w-5 h-5 text-green-600 dark:text-green-500" />
-        {:else}
-          <ShareOutline class="w-5 h-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer" />
-        {/if}
-      </button>
-    </div>
-  {/if}
-
-  <div class="space-y-1">
-    <p class="{typography.label}">{formatDateTime(event.startDateTime)}</p>
-    {#if event.displayStartTime && event.doorsOpenTime}
-      <p class="{typography.smMuted}">Doors open {formatTimeline(event.doorsOpenTime)}</p>
-    {/if}
-    {#if event.displayEndTime && event.endDateTime}
-      <p class="{typography.smMuted}">Ends {formatTimeline(event.endDateTime)}</p>
-    {/if}
-  </div>
-
-  {#if showtimes && showtimes.length > 1}
-    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-      <p class="{typography.smMuted} mb-2">More showtimes</p>
-      <div class="flex flex-wrap gap-2">
-        {#each showtimes as showtime}
-          <div class="w-24">
-            <ShowTimeCard
-              day={showtime.day}
-              date={showtime.date}
-              time={showtime.time}
-              isSelected={selectedDate === showtime.date}
-              onselect={handleSelect}
-            />
-          </div>
-        {/each}
-      </div>
-    </div>
-  {/if}
-
-  {#if event.venue}
-    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-      <a
-        href="https://www.google.com/maps/search/?api=1&query={encodeURIComponent(event.venue.googleLocationNameCache || event.venue.address || event.venue.name)}"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group block"
-      >
-        <p class="{typography.label} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
-          {event.venue.name}
-        </p>
-        <p class="{typography.smMuted} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
-          {event.venue.address || ''}
-        </p>
-      </a>
-
-      {#if event.hasAgeRestriction || event.ageRequirement || event.minimumAge}
-        <p class="{typography.smMuted} mt-2">
-          {#if event.ageRequirement != null}
-            {event.ageRequirement <= 1 ? 'All ages' : `${event.ageRequirement}+`}
-          {:else if event.minimumAge != null}
-            {event.minimumAge <= 1 ? 'All ages' : `${event.minimumAge}+`}
-          {:else if event.ageRestriction != null}
-            {event.ageRestriction <= 1 ? 'All ages' : `${event.ageRestriction}+`}
-          {/if}
-        </p>
-      {/if}
-    </div>
-  {/if}
-</div>
+<script>
+  import { ShareOutline, CheckOutline } from '../../primitives/Icons';
+  import ShowTimeCard from '../ShowTimeCard/ShowTimeCard.svelte';
+  import { typography } from '../../tokens/typography';
+
+  let {
+    event = {},
+    showtimes = [],
+    showTitle = true,
+    formatDateTime = (dateStr) => {
+      if (!dateStr) return '';
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) return dateStr;
+      return date.toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      });
+    },
+    formatTimeline = (timeStr) => {
+      if (!timeStr) return '';
+      const date = new Date(timeStr);
+      if (!isNaN(date.getTime())) {
+        return date.toLocaleTimeString('en-US', {
+          hour: 'numeric',
+          minute: '2-digit',
+          hour12: true
+        });
+      }
+      return timeStr;
+    },
+    onShowtimeSelect,
+  } = $props();
+
+  let selectedDate = $state(null);
+  let shareSuccess = $state(false);
+
+  function handleSelect(e) {
+    selectedDate = e.date;
+    onShowtimeSelect?.({ date: e.date, ...e });
+  }
+
+  async function handleShare() {
+    const shareData = {
+      title: event.name,
+      text: `Check out ${event.name} at ${event.venue?.name || 'this venue'}!`,
+      url: typeof window !== 'undefined' ? window.location.href : ''
+    };
+
+    try {
+      if (typeof navigator !== 'undefined' && navigator.share && navigator.canShare && navigator.canShare(shareData)) {
+        await navigator.share(shareData);
+      } else if (typeof navigator !== 'undefined' && navigator.clipboard) {
+        await navigator.clipboard.writeText(shareData.url);
+        shareSuccess = true;
+        setTimeout(() => {
+          shareSuccess = false;
+        }, 2000);
+      }
+    } catch (err) {
+      if (err.name !== 'AbortError' && typeof navigator !== 'undefined' && navigator.clipboard) {
+        try {
+          await navigator.clipboard.writeText(shareData.url);
+          shareSuccess = true;
+          setTimeout(() => {
+            shareSuccess = false;
+          }, 2000);
+        } catch {
+          console.error('Share failed:', err);
+        }
+      }
+    }
+  }
+</script>
+
+<div class="h-fit rounded-lg sm:px-5 py-4 md:border md:border-gray-200 md:dark:border-gray-700 bg-white dark:bg-gray-800">
+  {#if showTitle}
+    <div class="flex justify-between items-start gap-2 mb-4">
+      <h2 class="{typography.h2} flex-1 text-left">
+        {event.name || ''}
+      </h2>
+      <button
+        class="flex-shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
+        aria-label="Share event"
+        onclick={handleShare}
+      >
+        {#if shareSuccess}
+          <CheckOutline class="w-5 h-5 text-green-600 dark:text-green-500" />
+        {:else}
+          <ShareOutline class="w-5 h-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer" />
+        {/if}
+      </button>
+    </div>
+  {/if}
+
+  <div class="space-y-1">
+    <p class="{typography.label}">{formatDateTime(event.startDateTime)}</p>
+    {#if event.displayStartTime && event.doorsOpenTime}
+      <p class="{typography.smMuted}">Doors open {formatTimeline(event.doorsOpenTime)}</p>
+    {/if}
+    {#if event.displayEndTime && event.endDateTime}
+      <p class="{typography.smMuted}">Ends {formatTimeline(event.endDateTime)}</p>
+    {/if}
+  </div>
+
+  {#if showtimes && showtimes.length > 1}
+    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+      <p class="{typography.smMuted} mb-2">More showtimes</p>
+      <div class="flex flex-wrap gap-2">
+        {#each showtimes as showtime}
+          <div class="w-24">
+            <ShowTimeCard
+              day={showtime.day}
+              date={showtime.date}
+              time={showtime.time}
+              isSelected={selectedDate === showtime.date}
+              onselect={handleSelect}
+            />
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  {#if event.venue}
+    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+      <a
+        href="https://www.google.com/maps/search/?api=1&query={encodeURIComponent(event.venue.googleLocationNameCache || event.venue.address || event.venue.name)}"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="group block"
+      >
+        <p class="{typography.label} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
+          {event.venue.name}
+        </p>
+        <p class="{typography.smMuted} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
+          {event.venue.address || ''}
+        </p>
+      </a>
+
+      {#if event.hasAgeRestriction || event.ageRequirement || event.minimumAge}
+        <p class="{typography.smMuted} mt-2">
+          {#if event.ageRequirement != null}
+            {event.ageRequirement <= 1 ? 'All ages' : `${event.ageRequirement}+`}
+          {:else if event.minimumAge != null}
+            {event.minimumAge <= 1 ? 'All ages' : `${event.minimumAge}+`}
+          {:else if event.ageRestriction != null}
+            {event.ageRestriction <= 1 ? 'All ages' : `${event.ageRestriction}+`}
+          {/if}
+        </p>
+      {/if}
+    </div>
+  {/if}
+</div>

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

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

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

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

package/dist/calendar/ShowTimeCard/ShowTimeCard.spec.js

@@ -0,0 +1,241 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/svelte';
+import ShowTimeCard from './ShowTimeCard.svelte';
+
+describe('ShowTimeCard Component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('rendering', () => {
+    it('renders a button element', () => {
+      render(ShowTimeCard);
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('displays the day', () => {
+      render(ShowTimeCard, { props: { day: 'Monday' } });
+      expect(screen.getByText('Monday')).toBeInTheDocument();
+    });
+
+    it('displays formatted date', () => {
+      render(ShowTimeCard, { props: { date: '2024-03-15' } });
+      // Date may vary by timezone, just check the format
+      const button = screen.getByRole('button');
+      expect(button.textContent).toMatch(/Mar 1[45]/);
+    });
+
+    it('displays formatted time', () => {
+      render(ShowTimeCard, { props: { time: '19:30:00' } });
+      expect(screen.getByText('7:30 PM')).toBeInTheDocument();
+    });
+
+    it('handles empty values gracefully', () => {
+      const { container } = render(ShowTimeCard);
+      expect(container.querySelector('[role="button"]')).toBeInTheDocument();
+    });
+  });
+
+  describe('date formatting', () => {
+    it('formats valid date string', () => {
+      render(ShowTimeCard, { props: { date: '2024-12-25' } });
+      // Date may show as Dec 24 or Dec 25 depending on timezone
+      const button = screen.getByRole('button');
+      expect(button.textContent).toMatch(/Dec 2[45]/);
+    });
+
+    it('returns original string for invalid date', () => {
+      render(ShowTimeCard, { props: { date: 'invalid-date' } });
+      expect(screen.getByText('invalid-date')).toBeInTheDocument();
+    });
+
+    it('handles empty date', () => {
+      render(ShowTimeCard, { props: { date: '' } });
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('time formatting', () => {
+    it('formats morning time', () => {
+      render(ShowTimeCard, { props: { time: '09:00:00' } });
+      expect(screen.getByText('9:00 AM')).toBeInTheDocument();
+    });
+
+    it('formats afternoon time', () => {
+      render(ShowTimeCard, { props: { time: '14:30:00' } });
+      expect(screen.getByText('2:30 PM')).toBeInTheDocument();
+    });
+
+    it('formats midnight', () => {
+      render(ShowTimeCard, { props: { time: '00:00:00' } });
+      expect(screen.getByText('12:00 AM')).toBeInTheDocument();
+    });
+
+    it('formats noon', () => {
+      render(ShowTimeCard, { props: { time: '12:00:00' } });
+      expect(screen.getByText('12:00 PM')).toBeInTheDocument();
+    });
+
+    it('returns original string for invalid time', () => {
+      render(ShowTimeCard, { props: { time: 'invalid' } });
+      expect(screen.getByText('invalid')).toBeInTheDocument();
+    });
+
+    it('handles empty time', () => {
+      render(ShowTimeCard, { props: { time: '' } });
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('selection state', () => {
+    it('is not selected by default', () => {
+      render(ShowTimeCard);
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('shows selected state when isSelected is true', () => {
+      render(ShowTimeCard, { props: { isSelected: true } });
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('aria-pressed', 'true');
+    });
+
+    it('applies selected border class', () => {
+      const { container } = render(ShowTimeCard, { props: { isSelected: true } });
+      const card = container.querySelector('[role="button"]');
+      expect(card.className).toContain('border-blue-700');
+    });
+
+    it('applies unselected border class when not selected', () => {
+      const { container } = render(ShowTimeCard, { props: { isSelected: false } });
+      const card = container.querySelector('[role="button"]');
+      expect(card.className).toContain('border-gray-200');
+    });
+  });
+
+  describe('click handling', () => {
+    it('calls onselect when clicked', async () => {
+      const onselect = vi.fn();
+      render(ShowTimeCard, { props: { onselect, date: '2024-03-15' } });
+
+      const button = screen.getByRole('button');
+      await fireEvent.click(button);
+
+      expect(onselect).toHaveBeenCalledWith({ date: '2024-03-15' });
+    });
+
+    it('does not throw when onselect is not provided', async () => {
+      render(ShowTimeCard);
+      const button = screen.getByRole('button');
+
+      await expect(fireEvent.click(button)).resolves.not.toThrow();
+    });
+  });
+
+  describe('keyboard handling', () => {
+    it('calls onselect when Enter is pressed', async () => {
+      const onselect = vi.fn();
+      render(ShowTimeCard, { props: { onselect, date: '2024-03-15' } });
+
+      const button = screen.getByRole('button');
+      await fireEvent.keyDown(button, { key: 'Enter' });
+
+      expect(onselect).toHaveBeenCalledWith({ date: '2024-03-15' });
+    });
+
+    it('calls onselect when Space is pressed', async () => {
+      const onselect = vi.fn();
+      render(ShowTimeCard, { props: { onselect, date: '2024-03-15' } });
+
+      const button = screen.getByRole('button');
+      await fireEvent.keyDown(button, { key: ' ' });
+
+      expect(onselect).toHaveBeenCalledWith({ date: '2024-03-15' });
+    });
+
+    it('does not call onselect for other keys', async () => {
+      const onselect = vi.fn();
+      render(ShowTimeCard, { props: { onselect, date: '2024-03-15' } });
+
+      const button = screen.getByRole('button');
+      await fireEvent.keyDown(button, { key: 'Tab' });
+
+      expect(onselect).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('has aria-label with day, date, and time', () => {
+      render(ShowTimeCard, {
+        props: { day: 'Monday', date: '2024-03-15', time: '19:30:00' }
+      });
+
+      const button = screen.getByRole('button');
+      const ariaLabel = button.getAttribute('aria-label');
+      expect(ariaLabel).toContain('Monday');
+      expect(ariaLabel).toContain('Mar');
+      expect(ariaLabel).toContain('7:30 PM');
+    });
+
+    it('includes selected in aria-label when selected', () => {
+      render(ShowTimeCard, {
+        props: { day: 'Monday', date: '2024-03-15', time: '19:30:00', isSelected: true }
+      });
+
+      const button = screen.getByRole('button');
+      const ariaLabel = button.getAttribute('aria-label');
+      expect(ariaLabel).toContain('selected');
+    });
+
+    it('is focusable', () => {
+      render(ShowTimeCard);
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('tabindex', '0');
+    });
+  });
+
+  describe('styling', () => {
+    it('has correct base classes', () => {
+      const { container } = render(ShowTimeCard);
+      const card = container.querySelector('[role="button"]');
+      expect(card).toHaveClass('w-full', 'h-28', 'rounded-lg');
+    });
+
+    it('has flex layout', () => {
+      const { container } = render(ShowTimeCard);
+      const card = container.querySelector('[role="button"]');
+      expect(card).toHaveClass('flex', 'flex-col', 'justify-center', 'items-center');
+    });
+
+    it('has cursor pointer', () => {
+      const { container } = render(ShowTimeCard);
+      const card = container.querySelector('[role="button"]');
+      expect(card).toHaveClass('cursor-pointer');
+    });
+
+    it('has transition', () => {
+      const { container } = render(ShowTimeCard);
+      const card = container.querySelector('[role="button"]');
+      expect(card).toHaveClass('transition-colors');
+    });
+
+    it('includes dark mode background', () => {
+      const { container } = render(ShowTimeCard);
+      const card = container.querySelector('[role="button"]');
+      expect(card.className).toContain('dark:bg-gray-800');
+    });
+
+    it('applies selected text color when selected', () => {
+      const { container } = render(ShowTimeCard, {
+        props: { date: '2024-03-15', isSelected: true }
+      });
+      // Find the date span (middle one) which gets the selected color
+      const spans = container.querySelectorAll('span');
+      const dateSpan = spans[1]; // Second span is the date
+      expect(dateSpan.className).toContain('text-blue-700');
+    });
+  });
+});