@getmicdrop/venue-calendar 3.3.0 → 3.3.1

package/src/lib/utils/constants.js

@@ -0,0 +1,8 @@
+/**
+ * Shared constants for the venue calendar components
+ */
+
+// Placeholder image for events without images
+// Neutral gray background with a calendar icon
+// SVG file located at /static/placeholder-event.svg
+export const PLACEHOLDER_IMAGE = "/placeholder-event.svg";

package/src/lib/utils/constants.test.js

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { PLACEHOLDER_IMAGE } from './constants.js';
+
+describe('lib/utils/constants.js', () => {
+  describe('PLACEHOLDER_IMAGE', () => {
+    it('is exported', () => {
+      expect(PLACEHOLDER_IMAGE).toBeDefined();
+    });
+
+    it('is a string', () => {
+      expect(typeof PLACEHOLDER_IMAGE).toBe('string');
+    });
+
+    it('is a path to placeholder-event.svg', () => {
+      expect(PLACEHOLDER_IMAGE).toBe('/placeholder-event.svg');
+    });
+
+    it('starts with forward slash', () => {
+      expect(PLACEHOLDER_IMAGE.startsWith('/')).toBe(true);
+    });
+
+    it('ends with .svg extension', () => {
+      expect(PLACEHOLDER_IMAGE.endsWith('.svg')).toBe(true);
+    });
+
+    it('contains placeholder in the name', () => {
+      expect(PLACEHOLDER_IMAGE).toContain('placeholder');
+    });
+
+    it('contains event in the name', () => {
+      expect(PLACEHOLDER_IMAGE).toContain('event');
+    });
+
+    it('is a valid static asset path format', () => {
+      // Should be an absolute path starting with /
+      expect(PLACEHOLDER_IMAGE).toMatch(/^\/[\w-]+\.\w+$/);
+    });
+  });
+});

package/src/lib/utils/datetime.js

@@ -0,0 +1,266 @@
+/**
+ * DateTime Utilities
+ *
+ * Consolidated date/time formatting with timezone support.
+ * Uses Intl.DateTimeFormat for consistent timezone-aware formatting.
+ *
+ * NOTE: When @getmicdrop/svelte-components is updated to include the datetime
+ * module, these functions can be replaced with re-exports.
+ *
+ * @example
+ * import { formatEventTime, formatTimeRange, getDateParts } from './datetime.js';
+ *
+ * const time = formatEventTime(event.startDateTime, event.timeZone);
+ * const range = formatTimeRange(event.startDateTime, event.endDateTime, event.timeZone);
+ * const { day, month, date } = getDateParts(event.startDateTime, event.timeZone);
+ */
+
+// Re-export timezone utilities from existing module
+export { getIANATimezone, LEGACY_TIMEZONE_MAP } from './timezone.js';
+
+/** Default timezone when none specified */
+export const DEFAULT_TIMEZONE = 'UTC';
+
+// =============================================================================
+// Timezone Utilities
+// =============================================================================
+
+/**
+ * Check if a timezone string is valid IANA timezone.
+ * @param {string} tz - Timezone string to validate
+ * @returns {boolean}
+ */
+export function isValidTimezone(tz) {
+  if (!tz || typeof tz !== 'string') return false;
+  try {
+    Intl.DateTimeFormat(undefined, { timeZone: tz });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export const isValidIANATimezone = isValidTimezone;
+
+// =============================================================================
+// Format Functions
+// =============================================================================
+
+/**
+ * Parse and validate an ISO date string.
+ * @param {string} utcIso - ISO date string
+ * @returns {Date|null}
+ */
+function parseISO(utcIso) {
+  if (!utcIso || typeof utcIso !== 'string') return null;
+  const date = new Date(utcIso);
+  return isNaN(date.getTime()) ? null : date;
+}
+
+/**
+ * Format a datetime in the specified timezone.
+ * @param {string} utcIso - ISO date string
+ * @param {string} timezone - IANA timezone
+ * @param {Object} options - Intl.DateTimeFormat options
+ * @returns {string}
+ */
+function formatInTz(utcIso, timezone, options) {
+  const date = parseISO(utcIso);
+  if (!date) return '';
+  
+  const tz = isValidTimezone(timezone) ? timezone : DEFAULT_TIMEZONE;
+  return new Intl.DateTimeFormat('en-US', { ...options, timeZone: tz }).format(date);
+}
+
+/**
+ * Format event time (e.g., "7:00 PM").
+ * @param {string} utcIso - ISO date string
+ * @param {string} timezone - IANA timezone
+ * @returns {string}
+ */
+export function formatEventTime(utcIso, timezone) {
+  return formatInTz(utcIso, timezone, {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  });
+}
+
+/**
+ * Format event date (e.g., "Dec 25, 2023").
+ * @param {string} utcIso - ISO date string
+ * @param {string} timezone - IANA timezone
+ * @returns {string}
+ */
+export function formatEventDate(utcIso, timezone) {
+  return formatInTz(utcIso, timezone, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+/**
+ * Format event datetime (e.g., "Dec 25, 2023 at 7:00 PM").
+ * @param {string} utcIso - ISO date string
+ * @param {string} timezone - IANA timezone
+ * @returns {string}
+ */
+export function formatEventDateTime(utcIso, timezone) {
+  const date = formatEventDate(utcIso, timezone);
+  const time = formatEventTime(utcIso, timezone);
+  return date && time ? `${date} at ${time}` : date || time;
+}
+
+/**
+ * Format time range (e.g., "7:00 PM - 10:00 PM").
+ * @param {string} startUtc - Start ISO date string
+ * @param {string} endUtc - End ISO date string
+ * @param {string} timezone - IANA timezone
+ * @returns {string}
+ */
+export function formatTimeRange(startUtc, endUtc, timezone) {
+  const start = formatEventTime(startUtc, timezone);
+  if (!endUtc) return start;
+  
+  const end = formatEventTime(endUtc, timezone);
+  return start && end ? `${start} - ${end}` : start;
+}
+
+/**
+ * Format clean time range (omits :00 minutes).
+ * @param {string} startUtc - Start ISO date string
+ * @param {string} endUtc - End ISO date string
+ * @param {string} timezone - IANA timezone
+ * @returns {string}
+ */
+export function formatCleanTimeRange(startUtc, endUtc, timezone) {
+  const formatClean = (utcIso) => {
+    const date = parseISO(utcIso);
+    if (!date) return '';
+    
+    const tz = isValidTimezone(timezone) ? timezone : DEFAULT_TIMEZONE;
+    const parts = new Intl.DateTimeFormat('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+      timeZone: tz,
+    }).formatToParts(date);
+    
+    const hour = parts.find(p => p.type === 'hour')?.value || '';
+    const minute = parts.find(p => p.type === 'minute')?.value || '00';
+    const period = parts.find(p => p.type === 'dayPeriod')?.value || '';
+    
+    return minute === '00' ? `${hour} ${period}` : `${hour}:${minute} ${period}`;
+  };
+  
+  const start = formatClean(startUtc);
+  if (!endUtc) return start;
+  
+  const end = formatClean(endUtc);
+  return start && end ? `${start} - ${end}` : start;
+}
+
+/**
+ * Format day of week (e.g., "Mon" or "Monday").
+ * @param {string} utcIso - ISO date string
+ * @param {string} timezone - IANA timezone
+ * @param {boolean} short - Use short format (default: true)
+ * @returns {string}
+ */
+export function formatDayOfWeek(utcIso, timezone, short = true) {
+  return formatInTz(utcIso, timezone, {
+    weekday: short ? 'short' : 'long',
+  });
+}
+
+/**
+ * Format month (e.g., "Dec" or "December").
+ * @param {string} utcIso - ISO date string
+ * @param {string} timezone - IANA timezone
+ * @param {boolean} short - Use short format (default: true)
+ * @returns {string}
+ */
+export function formatMonth(utcIso, timezone, short = true) {
+  return formatInTz(utcIso, timezone, {
+    month: short ? 'short' : 'long',
+  });
+}
+
+/**
+ * Format hour (e.g., "8 PM").
+ * @param {number} hour - Hour (0-23)
+ * @returns {string}
+ */
+export function formatHour(hour) {
+  const suffix = hour >= 12 ? 'PM' : 'AM';
+  const displayHour = hour % 12 || 12;
+  return `${displayHour} ${suffix}`;
+}
+
+/**
+ * Get date parts for display.
+ * @param {string} utcIso - ISO date string
+ * @param {string} timezone - IANA timezone
+ * @returns {{ day: string, month: string, date: number, year: number }}
+ */
+export function getDateParts(utcIso, timezone) {
+  const date = parseISO(utcIso);
+  if (!date) return { day: '', month: '', date: 0, year: 0 };
+  
+  const tz = isValidTimezone(timezone) ? timezone : DEFAULT_TIMEZONE;
+  
+  return {
+    day: formatInTz(utcIso, tz, { weekday: 'short' }),
+    month: formatInTz(utcIso, tz, { month: 'short' }),
+    date: parseInt(formatInTz(utcIso, tz, { day: 'numeric' }), 10),
+    year: parseInt(formatInTz(utcIso, tz, { year: 'numeric' }), 10),
+  };
+}
+
+/**
+ * Check if a date is today in the specified timezone.
+ * @param {string} utcIso - ISO date string
+ * @param {string} timezone - IANA timezone
+ * @returns {boolean}
+ */
+export function isToday(utcIso, timezone) {
+  const date = parseISO(utcIso);
+  if (!date) return false;
+  
+  const tz = isValidTimezone(timezone) ? timezone : DEFAULT_TIMEZONE;
+  const now = new Date();
+  
+  const dateStr = formatInTz(utcIso, tz, { year: 'numeric', month: '2-digit', day: '2-digit' });
+  const nowStr = new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    timeZone: tz,
+  }).format(now);
+  
+  return dateStr === nowStr;
+}
+
+/**
+ * Format notification time (relative for recent, date for older).
+ * @param {string} utcIso - ISO date string
+ * @param {string} timezone - IANA timezone
+ * @returns {string}
+ */
+export function formatNotificationTime(utcIso, timezone) {
+  const date = parseISO(utcIso);
+  if (!date) return '';
+  
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  
+  if (isToday(utcIso, timezone)) {
+    if (diffSec < 60) return `${diffSec} seconds ago`;
+    if (diffSec < 3600) return `${Math.floor(diffSec / 60)} minutes ago`;
+    if (diffSec < 86400) return `${Math.floor(diffSec / 3600)} hours ago`;
+  }
+  
+  return formatEventDateTime(utcIso, timezone);
+}

package/src/lib/utils/datetime.test.js

@@ -0,0 +1,340 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import {
+  isValidTimezone,
+  isValidIANATimezone,
+  formatEventTime,
+  formatEventDate,
+  formatEventDateTime,
+  formatTimeRange,
+  formatCleanTimeRange,
+  formatDayOfWeek,
+  formatMonth,
+  formatHour,
+  getDateParts,
+  isToday,
+  formatNotificationTime,
+  DEFAULT_TIMEZONE,
+} from './datetime.js';
+
+describe('datetime.js', () => {
+  describe('isValidTimezone', () => {
+    it('returns true for valid IANA timezones', () => {
+      expect(isValidTimezone('America/New_York')).toBe(true);
+      expect(isValidTimezone('America/Los_Angeles')).toBe(true);
+      expect(isValidTimezone('Europe/London')).toBe(true);
+      expect(isValidTimezone('UTC')).toBe(true);
+      expect(isValidTimezone('Asia/Tokyo')).toBe(true);
+    });
+
+    it('returns false for invalid timezones', () => {
+      expect(isValidTimezone('Invalid/Timezone')).toBe(false);
+      expect(isValidTimezone('Eastern')).toBe(false); // Not valid
+      expect(isValidTimezone('PDT')).toBe(false); // Daylight time abbreviations are not valid
+    });
+
+    it('returns true for abbreviations that are valid in Node.js', () => {
+      // Some abbreviations are actually valid in Node.js Intl
+      expect(isValidTimezone('PST')).toBe(true);
+      expect(isValidTimezone('EST')).toBe(true);
+      expect(isValidTimezone('GMT')).toBe(true);
+    });
+
+    it('returns false for null/undefined/empty', () => {
+      expect(isValidTimezone(null)).toBe(false);
+      expect(isValidTimezone(undefined)).toBe(false);
+      expect(isValidTimezone('')).toBe(false);
+    });
+
+    it('returns false for non-string values', () => {
+      expect(isValidTimezone(123)).toBe(false);
+      expect(isValidTimezone({})).toBe(false);
+      expect(isValidTimezone([])).toBe(false);
+    });
+  });
+
+  describe('isValidIANATimezone', () => {
+    it('is an alias for isValidTimezone', () => {
+      expect(isValidIANATimezone).toBe(isValidTimezone);
+    });
+  });
+
+  describe('formatEventTime', () => {
+    it('formats time correctly in UTC', () => {
+      const result = formatEventTime('2024-01-15T19:00:00Z', 'UTC');
+      expect(result).toBe('7:00 PM');
+    });
+
+    it('formats time with minutes', () => {
+      const result = formatEventTime('2024-01-15T19:30:00Z', 'UTC');
+      expect(result).toBe('7:30 PM');
+    });
+
+    it('formats morning time', () => {
+      const result = formatEventTime('2024-01-15T09:00:00Z', 'UTC');
+      expect(result).toBe('9:00 AM');
+    });
+
+    it('handles timezone conversion', () => {
+      // 7 PM UTC should be 2 PM in New York (EST = UTC-5)
+      const result = formatEventTime('2024-01-15T19:00:00Z', 'America/New_York');
+      expect(result).toBe('2:00 PM');
+    });
+
+    it('returns empty string for invalid date', () => {
+      expect(formatEventTime('invalid', 'UTC')).toBe('');
+      expect(formatEventTime(null, 'UTC')).toBe('');
+      expect(formatEventTime('', 'UTC')).toBe('');
+    });
+
+    it('falls back to UTC for invalid timezone', () => {
+      const result = formatEventTime('2024-01-15T19:00:00Z', 'Invalid/Timezone');
+      expect(result).toBe('7:00 PM');
+    });
+  });
+
+  describe('formatEventDate', () => {
+    it('formats date correctly', () => {
+      const result = formatEventDate('2024-01-15T19:00:00Z', 'UTC');
+      expect(result).toBe('Jan 15, 2024');
+    });
+
+    it('handles different months', () => {
+      expect(formatEventDate('2024-12-25T12:00:00Z', 'UTC')).toBe('Dec 25, 2024');
+      expect(formatEventDate('2024-06-01T12:00:00Z', 'UTC')).toBe('Jun 1, 2024');
+    });
+
+    it('returns empty string for invalid date', () => {
+      expect(formatEventDate('invalid', 'UTC')).toBe('');
+      expect(formatEventDate(null, 'UTC')).toBe('');
+    });
+  });
+
+  describe('formatEventDateTime', () => {
+    it('formats date and time together', () => {
+      const result = formatEventDateTime('2024-01-15T19:00:00Z', 'UTC');
+      expect(result).toBe('Jan 15, 2024 at 7:00 PM');
+    });
+
+    it('returns empty string for invalid date', () => {
+      expect(formatEventDateTime('invalid', 'UTC')).toBe('');
+      expect(formatEventDateTime(null, 'UTC')).toBe('');
+    });
+  });
+
+  describe('formatTimeRange', () => {
+    it('formats start and end time', () => {
+      const result = formatTimeRange(
+        '2024-01-15T19:00:00Z',
+        '2024-01-15T22:00:00Z',
+        'UTC'
+      );
+      expect(result).toBe('7:00 PM - 10:00 PM');
+    });
+
+    it('returns just start time if no end time', () => {
+      const result = formatTimeRange('2024-01-15T19:00:00Z', null, 'UTC');
+      expect(result).toBe('7:00 PM');
+    });
+
+    it('returns just start time if end time is empty string', () => {
+      const result = formatTimeRange('2024-01-15T19:00:00Z', '', 'UTC');
+      expect(result).toBe('7:00 PM');
+    });
+
+    it('returns empty string for invalid start', () => {
+      expect(formatTimeRange('invalid', '2024-01-15T22:00:00Z', 'UTC')).toBe('');
+    });
+  });
+
+  describe('formatCleanTimeRange', () => {
+    it('omits :00 minutes from times on the hour', () => {
+      const result = formatCleanTimeRange(
+        '2024-01-15T19:00:00Z',
+        '2024-01-15T22:00:00Z',
+        'UTC'
+      );
+      expect(result).toBe('7 PM - 10 PM');
+    });
+
+    it('keeps minutes when not on the hour', () => {
+      const result = formatCleanTimeRange(
+        '2024-01-15T19:30:00Z',
+        '2024-01-15T22:00:00Z',
+        'UTC'
+      );
+      expect(result).toBe('7:30 PM - 10 PM');
+    });
+
+    it('returns just start time if no end time', () => {
+      const result = formatCleanTimeRange('2024-01-15T19:00:00Z', null, 'UTC');
+      expect(result).toBe('7 PM');
+    });
+
+    it('returns empty string for invalid start', () => {
+      expect(formatCleanTimeRange('invalid', '2024-01-15T22:00:00Z', 'UTC')).toBe('');
+    });
+  });
+
+  describe('formatDayOfWeek', () => {
+    it('returns short day name by default', () => {
+      const result = formatDayOfWeek('2024-01-15T12:00:00Z', 'UTC');
+      expect(result).toBe('Mon');
+    });
+
+    it('returns long day name when short=false', () => {
+      const result = formatDayOfWeek('2024-01-15T12:00:00Z', 'UTC', false);
+      expect(result).toBe('Monday');
+    });
+
+    it('returns empty string for invalid date', () => {
+      expect(formatDayOfWeek('invalid', 'UTC')).toBe('');
+    });
+  });
+
+  describe('formatMonth', () => {
+    it('returns short month name by default', () => {
+      const result = formatMonth('2024-01-15T12:00:00Z', 'UTC');
+      expect(result).toBe('Jan');
+    });
+
+    it('returns long month name when short=false', () => {
+      const result = formatMonth('2024-01-15T12:00:00Z', 'UTC', false);
+      expect(result).toBe('January');
+    });
+
+    it('handles different months', () => {
+      expect(formatMonth('2024-12-15T12:00:00Z', 'UTC')).toBe('Dec');
+      expect(formatMonth('2024-06-15T12:00:00Z', 'UTC')).toBe('Jun');
+    });
+
+    it('returns empty string for invalid date', () => {
+      expect(formatMonth('invalid', 'UTC')).toBe('');
+    });
+  });
+
+  describe('formatHour', () => {
+    it('formats morning hours', () => {
+      expect(formatHour(0)).toBe('12 AM');
+      expect(formatHour(1)).toBe('1 AM');
+      expect(formatHour(9)).toBe('9 AM');
+      expect(formatHour(11)).toBe('11 AM');
+    });
+
+    it('formats afternoon/evening hours', () => {
+      expect(formatHour(12)).toBe('12 PM');
+      expect(formatHour(13)).toBe('1 PM');
+      expect(formatHour(18)).toBe('6 PM');
+      expect(formatHour(23)).toBe('11 PM');
+    });
+  });
+
+  describe('getDateParts', () => {
+    it('returns all date parts correctly', () => {
+      const result = getDateParts('2024-01-15T12:00:00Z', 'UTC');
+      expect(result.day).toBe('Mon');
+      expect(result.month).toBe('Jan');
+      expect(result.date).toBe(15);
+      expect(result.year).toBe(2024);
+    });
+
+    it('returns zeros for invalid date', () => {
+      const result = getDateParts('invalid', 'UTC');
+      expect(result.day).toBe('');
+      expect(result.month).toBe('');
+      expect(result.date).toBe(0);
+      expect(result.year).toBe(0);
+    });
+
+    it('returns zeros for null', () => {
+      const result = getDateParts(null, 'UTC');
+      expect(result.day).toBe('');
+      expect(result.month).toBe('');
+      expect(result.date).toBe(0);
+      expect(result.year).toBe(0);
+    });
+  });
+
+  describe('isToday', () => {
+    it('returns true for today', () => {
+      const now = new Date();
+      const result = isToday(now.toISOString(), 'UTC');
+      expect(result).toBe(true);
+    });
+
+    it('returns false for yesterday', () => {
+      const yesterday = new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
+      const result = isToday(yesterday.toISOString(), 'UTC');
+      expect(result).toBe(false);
+    });
+
+    it('returns false for tomorrow', () => {
+      const tomorrow = new Date();
+      tomorrow.setDate(tomorrow.getDate() + 1);
+      const result = isToday(tomorrow.toISOString(), 'UTC');
+      expect(result).toBe(false);
+    });
+
+    it('returns false for invalid date', () => {
+      expect(isToday('invalid', 'UTC')).toBe(false);
+      expect(isToday(null, 'UTC')).toBe(false);
+    });
+  });
+
+  describe('formatNotificationTime', () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it('formats seconds ago for very recent', () => {
+      const now = new Date('2024-01-15T12:00:00Z');
+      vi.setSystemTime(now);
+
+      const thirtySecondsAgo = new Date(now.getTime() - 30000).toISOString();
+      const result = formatNotificationTime(thirtySecondsAgo, 'UTC');
+      expect(result).toBe('30 seconds ago');
+    });
+
+    it('formats minutes ago', () => {
+      const now = new Date('2024-01-15T12:00:00Z');
+      vi.setSystemTime(now);
+
+      const fiveMinutesAgo = new Date(now.getTime() - 5 * 60000).toISOString();
+      const result = formatNotificationTime(fiveMinutesAgo, 'UTC');
+      expect(result).toBe('5 minutes ago');
+    });
+
+    it('formats hours ago', () => {
+      const now = new Date('2024-01-15T12:00:00Z');
+      vi.setSystemTime(now);
+
+      const threeHoursAgo = new Date(now.getTime() - 3 * 3600000).toISOString();
+      const result = formatNotificationTime(threeHoursAgo, 'UTC');
+      expect(result).toBe('3 hours ago');
+    });
+
+    it('formats as date for yesterday', () => {
+      const now = new Date('2024-01-15T12:00:00Z');
+      vi.setSystemTime(now);
+
+      const yesterday = '2024-01-14T12:00:00Z';
+      const result = formatNotificationTime(yesterday, 'UTC');
+      expect(result).toBe('Jan 14, 2024 at 12:00 PM');
+    });
+
+    it('returns empty string for invalid date', () => {
+      expect(formatNotificationTime('invalid', 'UTC')).toBe('');
+      expect(formatNotificationTime(null, 'UTC')).toBe('');
+    });
+  });
+
+  describe('DEFAULT_TIMEZONE', () => {
+    it('is UTC', () => {
+      expect(DEFAULT_TIMEZONE).toBe('UTC');
+    });
+  });
+});