@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/components/pages/shows/TabContent.stories.svelte

@@ -1,254 +0,0 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import TabContent from "./TabContent.svelte";
-
-  export const meta = {
-    title: "Pages/Shows/TabContent",
-    component: TabContent,
-    argTypes: {
-      activeTab: {
-        control: "select",
-        options: ["upcoming", "invitations", "declined", "past"]
-      },
-      shows: { control: "object" },
-      loadedItems: { control: "object" },
-    },
-  };
-
-  const sampleShows = {
-    upcoming: [
-      {
-        id: 1,
-        venueId: "venue-123",
-        title: "Comedy Night Live",
-        role: "Headliner",
-        startDateTime: "2024-03-15T20:00:00Z",
-        doorsOpenTime: "2024-03-15T19:00:00Z",
-        spotDuration: "20 min spot",
-        venueName: "The Laugh Factory",
-        shortVenue: "Laugh Factory",
-        location: "Los Angeles, CA",
-        invitationAccepted: true,
-        hasAvailability: true,
-        lastUpdated: "2024-03-01T10:00:00Z",
-        image: "https://via.placeholder.com/150",
-        details: {
-          description: "Weekly comedy showcase",
-          ticketPrice: "$15",
-        },
-      },
-      {
-        id: 2,
-        venueId: "venue-456",
-        title: "Friday Night Laughs",
-        role: "Feature",
-        startDateTime: "2024-03-22T21:00:00Z",
-        doorsOpenTime: "2024-03-22T20:30:00Z",
-        spotDuration: "15 min spot",
-        venueName: "Chuckles Comedy Bar",
-        shortVenue: "Chuckles",
-        location: "Chicago, IL",
-        invitationAccepted: true,
-        hasAvailability: true,
-        lastUpdated: "2024-03-08T09:15:00Z",
-        image: "https://via.placeholder.com/150",
-        details: {
-          description: "Weekend comedy show",
-          ticketPrice: "$25",
-        },
-      },
-    ],
-    invitations: [
-      {
-        id: 3,
-        venueId: "venue-789",
-        title: "New Talent Night",
-        role: "Opener",
-        startDateTime: "2024-03-25T20:00:00Z",
-        doorsOpenTime: "2024-03-25T19:30:00Z",
-        spotDuration: "10 min spot",
-        venueName: "The Comedy Spot",
-        shortVenue: "Comedy Spot",
-        location: "Austin, TX",
-        invitationAccepted: false,
-        hasAvailability: false,
-        lastUpdated: "2024-03-10T12:00:00Z",
-        image: "https://via.placeholder.com/150",
-        details: {
-          description: "Emerging comedians showcase",
-          ticketPrice: "$10",
-        },
-      },
-    ],
-    declined: [],
-    past: [
-      {
-        id: 4,
-        venueId: "venue-301",
-        title: "Valentine's Day Special",
-        role: "Headliner",
-        startDateTime: "2024-02-14T20:00:00Z",
-        doorsOpenTime: "2024-02-14T19:30:00Z",
-        spotDuration: "25 min spot",
-        venueName: "Love & Laughs Theatre",
-        shortVenue: "Love & Laughs",
-        location: "San Francisco, CA",
-        invitationAccepted: true,
-        hasAvailability: true,
-        lastUpdated: "2024-02-01T10:00:00Z",
-        image: "https://via.placeholder.com/150",
-        details: {
-          description: "Valentine's comedy event",
-          ticketPrice: "$35",
-        },
-      },
-    ],
-  };
-
-  const createLoadedItems = (shows, tab) => {
-    return {
-      [tab]: {
-        data: shows[tab] || [],
-        isMoreLoading: false,
-      },
-    };
-  };
-
-  const mockLoadMore = (tab) => {
-    console.log(`Loading more shows for tab: ${tab}`);
-  };
-</script>
-
-<Template let:args>
-  <div class="max-w-7xl mx-auto bg-gray-50">
-    <TabContent {...args} />
-  </div>
-</Template>
-
-<Story
-  name="Upcoming Shows Tab"
-  args={{
-    activeTab: "upcoming",
-    shows: sampleShows,
-    loadedItems: createLoadedItems(sampleShows, "upcoming"),
-    loadMore: mockLoadMore,
-  }}
-/>
-
-<Story
-  name="Invitations Tab"
-  args={{
-    activeTab: "invitations",
-    shows: sampleShows,
-    loadedItems: createLoadedItems(sampleShows, "invitations"),
-    loadMore: mockLoadMore,
-  }}
-/>
-
-<Story
-  name="Past Shows Tab"
-  args={{
-    activeTab: "past",
-    shows: sampleShows,
-    loadedItems: createLoadedItems(sampleShows, "past"),
-    loadMore: mockLoadMore,
-  }}
-/>
-
-<Story
-  name="Empty Tab - No Upcoming Shows"
-  args={{
-    activeTab: "upcoming",
-    shows: { upcoming: [], invitations: [], declined: [], past: [] },
-    loadedItems: createLoadedItems({ upcoming: [] }, "upcoming"),
-    loadMore: mockLoadMore,
-  }}
-/>
-
-<Story
-  name="Empty Tab - No Invitations"
-  args={{
-    activeTab: "invitations",
-    shows: { upcoming: [], invitations: [], declined: [], past: [] },
-    loadedItems: createLoadedItems({ invitations: [] }, "invitations"),
-    loadMore: mockLoadMore,
-  }}
-/>
-
-<Story
-  name="Empty Tab - No Declined Shows"
-  args={{
-    activeTab: "declined",
-    shows: { upcoming: [], invitations: [], declined: [], past: [] },
-    loadedItems: createLoadedItems({ declined: [] }, "declined"),
-    loadMore: mockLoadMore,
-  }}
-/>
-
-<Story
-  name="Empty Tab - No Past Shows"
-  args={{
-    activeTab: "past",
-    shows: { upcoming: [], invitations: [], declined: [], past: [] },
-    loadedItems: createLoadedItems({ past: [] }, "past"),
-    loadMore: mockLoadMore,
-  }}
-/>
-
-<Story
-  name="Loading More Shows"
-  args={{
-    activeTab: "upcoming",
-    shows: {
-      upcoming: Array(20).fill(null).map((_, i) => ({
-        id: i,
-        venueId: `venue-${i}`,
-        title: `Comedy Show ${i + 1}`,
-        role: i % 3 === 0 ? "Headliner" : i % 3 === 1 ? "Feature" : "Opener",
-        startDateTime: new Date(Date.now() + i * 86400000).toISOString(),
-        doorsOpenTime: new Date(Date.now() + i * 86400000 - 3600000).toISOString(),
-        spotDuration: `${10 + i % 20} min spot`,
-        venueName: `Comedy Club ${i + 1}`,
-        shortVenue: `Club ${i + 1}`,
-        location: "Various, USA",
-        invitationAccepted: true,
-        hasAvailability: true,
-        lastUpdated: new Date().toISOString(),
-        image: "https://via.placeholder.com/150",
-        details: {
-          description: `Comedy show number ${i + 1}`,
-          ticketPrice: "$15",
-        },
-      })),
-      invitations: [],
-      declined: [],
-      past: [],
-    },
-    loadedItems: {
-      upcoming: {
-        data: Array(8).fill(null).map((_, i) => ({
-          id: i,
-          venueId: `venue-${i}`,
-          title: `Comedy Show ${i + 1}`,
-          role: i % 3 === 0 ? "Headliner" : i % 3 === 1 ? "Feature" : "Opener",
-          startDateTime: new Date(Date.now() + i * 86400000).toISOString(),
-          doorsOpenTime: new Date(Date.now() + i * 86400000 - 3600000).toISOString(),
-          spotDuration: `${10 + i % 20} min spot`,
-          venueName: `Comedy Club ${i + 1}`,
-          shortVenue: `Club ${i + 1}`,
-          location: "Various, USA",
-          invitationAccepted: true,
-          hasAvailability: true,
-          lastUpdated: new Date().toISOString(),
-          image: "https://via.placeholder.com/150",
-          details: {
-            description: `Comedy show number ${i + 1}`,
-            ticketPrice: "$15",
-          },
-        })),
-        isMoreLoading: true,
-      },
-    },
-    loadMore: mockLoadMore,
-  }}
-/>

package/dist/components/pages/shows/TabContent.stories.svelte.d.ts

@@ -1,46 +0,0 @@
-export namespace meta {
-    export let title: string;
-    export { TabContent as component };
-    export namespace argTypes {
-        namespace activeTab {
-            let control: string;
-            let options: string[];
-        }
-        namespace shows {
-            let control_1: string;
-            export { control_1 as control };
-        }
-        namespace loadedItems {
-            let control_2: string;
-            export { control_2 as control };
-        }
-    }
-}
-export default TabContent;
-type TabContent = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const TabContent: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import TabContent from "./TabContent.svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-//# sourceMappingURL=TabContent.stories.svelte.d.ts.map

package/dist/components/pages/shows/TabContent.stories.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabContent.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/TabContent.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoPA;;;;mBAAsH;uBAhP7F,qBAAqB;6CAuOD,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/components/pages/shows/TabContent.svelte

@@ -1,94 +0,0 @@
-<script>
-  import { onMount, onDestroy } from "svelte";
-  import { browser } from '../../../__LIB_ENVIRONMENT__.js';
-  import SectionHeader from "../performers/SectionHeader.svelte";
-  import ShowList from "./ShowList.svelte";
-
-  export let activeTab;
-  export let shows;
-  export let loadedItems;
-  export let loadMore;
-
-  const content = {
-    upcoming: {
-      title: "Upcoming shows",
-      description:
-        "Currently, there are no upcoming shows. Once a venue schedules a new show, it will appear here.",
-    },
-    invitations: {
-      title: "Booking invites",
-      description:
-        "You currently have no show invites. Once you receive an invite, it will appear here.",
-    },
-    declined: {
-      title: "Declined invites",
-      description:
-        "You haven't declined any shows yet. Once you decline an invitation, it will appear here.",
-      notice: "Events on this page will be automatically removed after 30 days.",
-    },
-    past: {
-      title: "Past shows",
-      description:
-        "You currently have no past shows. Once you complete a show, it will be listed here.",
-      notice: "Events on this page will be automatically removed after 30 days.",
-    },
-  };
-
-  let sentinel;
-  let observer;
-
-  onMount(() => {
-    observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting) {
-          loadMore(activeTab);
-        }
-      },
-      { threshold: 0.1 }
-    );
-  });
-
-  onDestroy(() => {
-    if (observer) {
-      observer.disconnect();
-    }
-  });
-
-  $: if (browser && sentinel && observer) {
-    observer.observe(sentinel);
-  }
-</script>
-
-{#if loadedItems[activeTab]?.data?.length}
-  {#if content[activeTab].notice}
-    <div class="bg-bg-primary md:rounded-b-lg px-3 sm:px-4 py-2">
-      <p class="text-xs text-text-tertiary">{content[activeTab].notice}</p>
-    </div>
-  {/if}
-
-  <div class="w-full px-3 sm:px-0 mt-3">
-    <ShowList shows={loadedItems[activeTab].data} status={activeTab} />
-  </div>
-
-  {#if loadedItems[activeTab].data.length < shows[activeTab].length}
-    <div class="loading-indicator" bind:this={sentinel}>
-      {loadedItems[activeTab].isMoreLoading ? "Loading..." : ""}
-    </div>
-  {/if}
-{:else}
-  <div class="bg-bg-primary md:rounded-b-lg p-3 sm:p-4">
-    <SectionHeader
-      title={content[activeTab].title}
-      description={content[activeTab].description}
-    />
-  </div>
-{/if}
-
-<style>
-  .loading-indicator {
-    text-align: center;
-    padding: 16px;
-    font-size: 14px;
-    color: #666;
-  }
-</style>

package/dist/components/pages/shows/TabContent.svelte.d.ts

@@ -1,33 +0,0 @@
-export default TabContent;
-type TabContent = SvelteComponent<{
-    activeTab: any;
-    shows: any;
-    loadedItems: any;
-    loadMore: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const TabContent: $$__sveltets_2_IsomorphicComponent<{
-    activeTab: any;
-    shows: any;
-    loadedItems: any;
-    loadMore: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-//# sourceMappingURL=TabContent.svelte.d.ts.map

package/dist/components/pages/shows/TabContent.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabContent.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/TabContent.svelte.js"],"names":[],"mappings":";;;;;;;;;;;AAwGA;;;;;;;mBAAsH;6CATzE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/pages/shows/TabNavigation.spec.d.ts

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

package/dist/components/pages/shows/TabNavigation.spec.d.ts.map

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

package/dist/components/pages/shows/TabNavigation.spec.js

@@ -1,143 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import TabNavigation from "./TabNavigation.svelte";
-
-const sampleTabs = [
-  { key: "upcoming", label: "Upcoming" },
-  { key: "invitations", label: "Invitations", badge: () => 3 },
-  { key: "declined", label: "Declined" },
-  { key: "past", label: "Past" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component, container } = render(TabNavigation, {
-    props: {
-      tabs: sampleTabs,
-      activeTab: "upcoming",
-      ...args,
-    },
-  });
-  return { user, component, container };
-}
-
-describe("TabNavigation Component Tests", () => {
-  test("Renders all tabs", () => {
-    setupTest();
-    expect(screen.getByText("Upcoming")).toBeInTheDocument();
-    expect(screen.getByText("Invitations")).toBeInTheDocument();
-    expect(screen.getByText("Declined")).toBeInTheDocument();
-    expect(screen.getByText("Past")).toBeInTheDocument();
-  });
-
-  test("Tabs have tab role", () => {
-    setupTest();
-    const tabs = screen.getAllByRole("tab");
-    expect(tabs.length).toBe(4);
-  });
-
-  test("Active tab has active class", () => {
-    setupTest({ activeTab: "upcoming" });
-    const upcomingTab = screen.getByText("Upcoming").closest('[role="tab"]');
-    expect(upcomingTab).toHaveClass("active");
-  });
-
-  test("Non-active tabs do not have active class", () => {
-    setupTest({ activeTab: "upcoming" });
-    const declinedTab = screen.getByText("Declined").closest('[role="tab"]');
-    expect(declinedTab).not.toHaveClass("active");
-  });
-
-  test("Dispatches tabChange event on click", async () => {
-    const { user, component } = setupTest({ activeTab: "upcoming" });
-    const changeSpy = vi.fn();
-    component.$on("tabChange", changeSpy);
-
-    await user.click(screen.getByText("Declined"));
-
-    expect(changeSpy).toHaveBeenCalled();
-    expect(changeSpy.mock.calls[0][0].detail).toBe("declined");
-  });
-
-  test("Dispatches tabChange event on Enter key", async () => {
-    const { user, component } = setupTest({ activeTab: "upcoming" });
-    const changeSpy = vi.fn();
-    component.$on("tabChange", changeSpy);
-
-    const declinedTab = screen.getByText("Declined").closest('[role="tab"]');
-    declinedTab.focus();
-    await user.keyboard("{Enter}");
-
-    expect(changeSpy).toHaveBeenCalled();
-    expect(changeSpy.mock.calls[0][0].detail).toBe("declined");
-  });
-
-  test("Tabs are focusable", () => {
-    setupTest();
-    const tabs = screen.getAllByRole("tab");
-    tabs.forEach((tab) => {
-      expect(tab).toHaveAttribute("tabindex", "0");
-    });
-  });
-
-  test("Shows badge indicator for invitations when badge returns truthy", () => {
-    const { container } = setupTest({ activeTab: "upcoming" });
-    // Look for the red dot badge
-    const badge = container.querySelector(".bg-red-500.rounded-full");
-    expect(badge).toBeInTheDocument();
-  });
-
-  test("Does not show badge for tabs without badge function", () => {
-    const tabsWithoutBadge = [
-      { key: "upcoming", label: "Upcoming" },
-      { key: "past", label: "Past" },
-    ];
-    const { container } = render(TabNavigation, {
-      props: { tabs: tabsWithoutBadge, activeTab: "upcoming" },
-    });
-    const badges = container.querySelectorAll(".bg-red-500.rounded-full");
-    expect(badges.length).toBe(0);
-  });
-
-  test("Has flex layout", () => {
-    const { container } = setupTest();
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("flex");
-    expect(wrapper).toHaveClass("flex-row");
-  });
-
-  test("Switching active tab updates appearance", async () => {
-    const { user, component } = setupTest({ activeTab: "upcoming" });
-
-    // Initially upcoming is active
-    let upcomingTab = screen.getByText("Upcoming").closest('[role="tab"]');
-    expect(upcomingTab).toHaveClass("active");
-
-    // Update the active tab prop
-    await component.$set({ activeTab: "past" });
-
-    // Now past should be active
-    const pastTab = screen.getByText("Past").closest('[role="tab"]');
-    expect(pastTab).toHaveClass("active");
-
-    // And upcoming should no longer be active
-    upcomingTab = screen.getByText("Upcoming").closest('[role="tab"]');
-    expect(upcomingTab).not.toHaveClass("active");
-  });
-
-  test("Works with empty tabs array", () => {
-    const { container } = render(TabNavigation, {
-      props: { tabs: [], activeTab: "" },
-    });
-    const tabs = screen.queryAllByRole("tab");
-    expect(tabs.length).toBe(0);
-  });
-
-  test("Works with single tab", () => {
-    render(TabNavigation, {
-      props: { tabs: [{ key: "only", label: "Only Tab" }], activeTab: "only" },
-    });
-    expect(screen.getByText("Only Tab")).toBeInTheDocument();
-  });
-});