@getmicdrop/venue-calendar 3.1.0 → 3.2.0

package/dist/types/index.d.ts

@@ -0,0 +1,395 @@
+/**
+ * TypeScript definitions for @getmicdrop/venue-calendar
+ */
+
+// ============================================================================
+// Event Data Types
+// ============================================================================
+
+/**
+ * Event data structure returned from the API or passed to components
+ */
+export interface EventData {
+  id: string | number;
+  name: string;
+  date: string;
+  startDateTime?: string;
+  endDateTime?: string;
+  image?: string;
+  description?: string;
+  venueId?: string | number;
+  venueID?: string | number;
+  timeZone?: string;
+  location?: string;
+  slug?: string;
+  status?: 'on_sale' | 'selling_fast' | 'sold_out';
+}
+
+/**
+ * Ticket data structure
+ */
+export interface TicketData {
+  id: string | number;
+  name: string;
+  price: number;
+  quantity?: number;
+  description?: string;
+  available?: number;
+}
+
+// ============================================================================
+// Theme Types
+// ============================================================================
+
+/**
+ * Theme color configuration using HSL format
+ * All values should be HSL strings like "217 91% 60%"
+ */
+export interface ThemeColors {
+  /** Brand primary color */
+  brandPrimary: string;
+  /** Primary text color */
+  textPrimary: string;
+  /** Secondary text color */
+  textSecondary: string;
+  /** Tertiary text color */
+  textTertiary: string;
+  /** Primary background color */
+  bgPrimary: string;
+  /** Secondary background color */
+  bgSecondary: string;
+  /** Quaternary background color */
+  bgQuaternary: string;
+  /** Primary stroke/border color */
+  strokePrimary: string;
+  /** Secondary stroke/border color */
+  strokeSecondary: string;
+  /** On sale status color */
+  statusOnSale: string;
+  /** Selling fast status color */
+  statusSellingFast: string;
+  /** Sold out status color */
+  statusSoldOut: string;
+  /** Today's date background color */
+  todayBg: string;
+  /** Today's date text color */
+  todayText: string;
+  /** Event dot color for on sale */
+  eventDotOnSale: string;
+  /** Event dot color for selling fast */
+  eventDotSellingFast: string;
+  /** Event dot color for sold out */
+  eventDotSoldOut: string;
+  /** Hover background color */
+  hoverBg: string;
+  /** Focus ring color */
+  focusRing: string;
+}
+
+/**
+ * Preset themes collection
+ */
+export interface Themes {
+  light: ThemeColors;
+  dark: ThemeColors;
+  highContrast: ThemeColors;
+}
+
+// ============================================================================
+// View Option Types
+// ============================================================================
+
+/**
+ * View option for the calendar view switcher
+ */
+export interface ViewOption {
+  id: number;
+  text: string;
+  icon: string;
+  ariaLabel?: string;
+}
+
+export type ViewType = 'list' | 'gallery' | 'calendar';
+
+// ============================================================================
+// Component Props Interfaces
+// ============================================================================
+
+/**
+ * Base options for all init functions
+ */
+export interface BaseInitOptions {
+  /** CSS selector or HTMLElement to mount the component */
+  target: string | HTMLElement;
+  /** The venue ID (optional, default: '1') */
+  venueId?: string;
+  /** The organization ID (optional, default: '1') */
+  organizationId?: string;
+}
+
+/**
+ * Options for initializing the Venue Calendar component
+ */
+export interface CalendarProps extends BaseInitOptions {
+  /** Initial view: 'list', 'gallery', or 'calendar' (default: 'calendar') */
+  view?: ViewType;
+  /** Array of event objects to display */
+  events?: EventData[];
+  /** Whether to show view switcher (default: true) */
+  showViewOptions?: boolean;
+  /** Whether to show month navigation (default: true) */
+  showMonthSwitcher?: boolean;
+  /** Current month store (Svelte writable store) */
+  currentMonth?: import('svelte/store').Writable<number>;
+  /** Current year store (Svelte writable store) */
+  currentYear?: import('svelte/store').Writable<number>;
+  /** Handler for navigating to next month */
+  handleNext?: () => void;
+  /** Handler for navigating to previous month */
+  handlePrev?: () => void;
+  /** Callback function when an event is clicked */
+  onEventClick?: (event: EventData) => void;
+}
+
+/**
+ * Options for initializing the Event Details View
+ */
+export interface EventDetailsOptions extends BaseInitOptions {
+  /** The event ID to display */
+  eventId: string;
+  /** Callback when back button is clicked */
+  onNavigateBack?: () => void;
+  /** Callback when navigating to cart */
+  onNavigateToCart?: (eventId: string) => void;
+}
+
+/**
+ * Options for initializing the Cart View
+ */
+export interface CartViewOptions extends BaseInitOptions {
+  /** The event ID for the cart */
+  eventId: string;
+  /** Callback when back button is clicked */
+  onNavigateBack?: () => void;
+  /** Callback when navigating to checkout */
+  onNavigateToCheckout?: (eventId: string) => void;
+}
+
+/**
+ * Success callback data from checkout
+ */
+export interface CheckoutSuccessData {
+  orderId?: string;
+  eventId?: string;
+  event?: EventData;
+}
+
+/**
+ * Options for initializing the Checkout View
+ */
+export interface CheckoutOptions extends BaseInitOptions {
+  /** The event ID to display */
+  eventId: string;
+  /** The event slug (optional) */
+  slug?: string;
+  /** Array of available tickets (optional) */
+  availableTickets?: TicketData[];
+  /** Callback when checkout is successful */
+  onSuccess?: (data: CheckoutSuccessData) => void;
+  /** Callback when navigating to success page */
+  onNavigateToSuccess?: (data: CheckoutSuccessData) => void;
+}
+
+/**
+ * Options for initializing the Success View
+ */
+export interface SuccessViewOptions extends BaseInitOptions {
+  /** The event ID (optional) */
+  eventId?: string;
+  /** The event slug (optional) */
+  slug?: string;
+  /** The order ID (optional) */
+  orderId?: string;
+}
+
+/**
+ * Alias for CalendarProps for backward compatibility
+ */
+export type InitOptions = CalendarProps;
+
+// ============================================================================
+// Svelte Component Instance
+// ============================================================================
+
+/**
+ * Svelte component instance returned by init functions
+ */
+export interface SvelteComponentInstance {
+  /** Destroy the component and clean up */
+  $destroy?: () => void;
+  /** Internal cleanup for success listener */
+  _successCleanup?: () => void;
+}
+
+// ============================================================================
+// Exported Functions
+// ============================================================================
+
+/**
+ * Initialize the Venue Calendar component
+ * @param options - Configuration options
+ * @returns The Svelte component instance, or null if target not found
+ */
+export function initVenueCalendar(options: CalendarProps): SvelteComponentInstance | null;
+
+/**
+ * Initialize the Event Details View
+ * @param options - Configuration options
+ * @returns The Svelte component instance, or null if target not found or eventId missing
+ */
+export function initEventDetailsView(options: EventDetailsOptions): SvelteComponentInstance | null;
+
+/**
+ * Initialize the Cart View
+ * @param options - Configuration options
+ * @returns The Svelte component instance, or null if target not found or eventId missing
+ */
+export function initCartView(options: CartViewOptions): SvelteComponentInstance | null;
+
+/**
+ * Alias for initCartView
+ */
+export const initCart: typeof initCartView;
+
+/**
+ * Initialize the Checkout View
+ * @param options - Configuration options
+ * @returns The Svelte component instance, or null if target not found or eventId missing
+ */
+export function initCheckoutView(options: CheckoutOptions): SvelteComponentInstance | null;
+
+/**
+ * Alias for initCheckoutView
+ */
+export const initCheckout: typeof initCheckoutView;
+
+/**
+ * Initialize the Success View
+ * @param options - Configuration options
+ * @returns The Svelte component instance, or null if target not found
+ */
+export function initSuccessView(options: SuccessViewOptions): SvelteComponentInstance | null;
+
+/**
+ * Alias for initSuccessView
+ */
+export const initSuccess: typeof initSuccessView;
+
+/**
+ * Auto-mount: Automatically finds and mounts calendar to elements with class 'micdrop-calendar-container'
+ */
+export function autoMount(): void;
+
+// ============================================================================
+// Theme Exports
+// ============================================================================
+
+/**
+ * Collection of preset themes
+ */
+export const themes: Themes;
+
+/**
+ * Light theme preset
+ */
+export const lightTheme: ThemeColors;
+
+/**
+ * Dark theme preset
+ */
+export const darkTheme: ThemeColors;
+
+/**
+ * High contrast theme preset for accessibility
+ */
+export const highContrastTheme: ThemeColors;
+
+/**
+ * Apply a theme to the calendar widget
+ * @param theme - Theme object with HSL color values
+ * @param container - Optional container element (defaults to document.documentElement)
+ */
+export function applyTheme(theme: Partial<ThemeColors>, container?: HTMLElement): void;
+
+/**
+ * Generate CSS string for embedding themes
+ * @param theme - Theme object
+ * @returns CSS string with custom properties
+ */
+export function generateThemeCSS(theme: Partial<ThemeColors>): string;
+
+// ============================================================================
+// Svelte Component Exports
+// ============================================================================
+
+/**
+ * VenueCalendar Svelte component (CalendarContainer)
+ */
+export const VenueCalendar: any;
+
+/**
+ * EventDetailsView Svelte component
+ */
+export const EventDetailsView: any;
+
+/**
+ * CartView Svelte component
+ */
+export const CartView: any;
+
+/**
+ * Checkout Svelte component
+ */
+export const Checkout: any;
+
+/**
+ * CheckoutView alias for Checkout
+ */
+export const CheckoutView: any;
+
+/**
+ * Success Svelte component
+ */
+export const Success: any;
+
+// ============================================================================
+// Default Export
+// ============================================================================
+
+declare const _default: {
+  initVenueCalendar: typeof initVenueCalendar;
+  initEventDetailsView: typeof initEventDetailsView;
+  initCartView: typeof initCartView;
+  initCart: typeof initCartView;
+  initCheckoutView: typeof initCheckoutView;
+  initCheckout: typeof initCheckoutView;
+  initSuccessView: typeof initSuccessView;
+  initSuccess: typeof initSuccessView;
+  autoMount: typeof autoMount;
+  VenueCalendar: any;
+  themes: Themes;
+  lightTheme: ThemeColors;
+  darkTheme: ThemeColors;
+  highContrastTheme: ThemeColors;
+  applyTheme: typeof applyTheme;
+  generateThemeCSS: typeof generateThemeCSS;
+  EventDetailsView: any;
+  CartView: any;
+  Checkout: any;
+  CheckoutView: any;
+  Success: any;
+  /** @deprecated Use Success instead */
+  Sucess: any;
+};
+
+export default _default;