@getmicdrop/svelte-components 1.0.1 → 1.0.3

package/dist/components/pages/performers/VenueItemCard.stories.svelte

@@ -0,0 +1,301 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import VenueItemCard from "./VenueItemCard.svelte";
+
+  export const meta = {
+    title: "Pages/Performers/VenueItemCard",
+    component: VenueItemCard,
+    argTypes: {
+      status: {
+        control: "select",
+        options: ["upcoming", "past", "declined"]
+      },
+    },
+  };
+</script>
+
+<Story
+  name="Active Venue - Updated Recently"
+  args={{
+    venueId: "venue-123",
+    name: "The Comedy Store",
+    image: "/images/comedy-store.jpg",
+    location: "Los Angeles, CA",
+    start: "19:00",
+    end: "23:00",
+    doorOpen: "18:30",
+    email: "bookings@comedystore.com",
+    phone: "(323) 656-6225",
+    description: "World-famous comedy club featuring top comedians from around the globe.",
+    instagram: "@thecomedystore",
+    facebook: "thecomedystore",
+    twitter: "@TheComedyStore",
+    inviteID: "invite-123",
+    lastUpdated: "2025-03-14T10:30:00",
+    timeRange: "7:00 PM - 11:00 PM",
+    dateRange: "Open Tuesday - Sunday",
+    status: "upcoming",
+    invitationAccepted: true,
+    hasAvailability: true,
+  }}
+/>
+
+<Story
+  name="Active Venue - Needs Update"
+  args={{
+    venueId: "venue-456",
+    name: "Laugh Factory",
+    image: "/images/laugh-factory.jpg",
+    location: "Hollywood, CA",
+    start: "20:00",
+    end: "00:00",
+    doorOpen: "19:00",
+    email: "info@laughfactory.com",
+    phone: "(323) 656-1336",
+    description: "Premier comedy venue showcasing established and rising comedians.",
+    instagram: "@laughfactory",
+    facebook: "laughfactory",
+    twitter: "@LaughFactory",
+    inviteID: "invite-456",
+    lastUpdated: "2025-02-20T15:45:00",
+    timeRange: "8:00 PM - 12:00 AM",
+    dateRange: "Every day",
+    status: "upcoming",
+    invitationAccepted: true,
+    hasAvailability: false,
+  }}
+/>
+
+<Story
+  name="New Venue - Invitation Accepted"
+  args={{
+    venueId: "venue-789",
+    name: "The Improv",
+    image: "/images/improv.jpg",
+    location: "West Hollywood, CA",
+    start: "19:30",
+    end: "22:30",
+    doorOpen: "19:00",
+    email: "bookings@improv.com",
+    phone: "(323) 651-2583",
+    description: "Classic comedy club with multiple shows nightly.",
+    instagram: "@theimprov",
+    facebook: "theimprov",
+    twitter: "@TheImprov",
+    inviteID: "invite-789",
+    lastUpdated: "2025-03-13T09:15:00",
+    timeRange: "7:30 PM - 10:30 PM",
+    dateRange: "Wednesday - Sunday",
+    status: "upcoming",
+    invitationAccepted: true,
+    hasAvailability: false,
+  }}
+/>
+
+<Story
+  name="Venue with Long Name"
+  args={{
+    venueId: "venue-321",
+    name: "Downtown Los Angeles Comedy Theatre & Entertainment Center",
+    image: "/images/downtown-comedy.jpg",
+    location: "Downtown Los Angeles, CA",
+    start: "18:00",
+    end: "23:00",
+    doorOpen: "17:30",
+    email: "info@dtlacomedy.com",
+    phone: "(213) 555-0123",
+    description: "State-of-the-art comedy venue in the heart of downtown with full bar and restaurant.",
+    instagram: "@dtlacomedy",
+    facebook: "dtlacomedy",
+    twitter: "@DTLAComedy",
+    inviteID: "invite-321",
+    lastUpdated: "2025-03-12T14:20:00",
+    timeRange: "6:00 PM - 11:00 PM",
+    dateRange: "Thursday - Saturday",
+    status: "upcoming",
+    invitationAccepted: true,
+    hasAvailability: true,
+  }}
+/>
+
+<Story
+  name="Venue in Different City"
+  args={{
+    venueId: "venue-654",
+    name: "Comedy Works",
+    image: "/images/comedy-works.jpg",
+    location: "Denver, CO",
+    start: "19:00",
+    end: "22:00",
+    doorOpen: "18:30",
+    email: "bookings@comedyworks.com",
+    phone: "(303) 595-3637",
+    description: "Denver's premier comedy club featuring local and national talent.",
+    instagram: "@comedyworks",
+    facebook: "comedyworks",
+    twitter: "@ComedyWorks",
+    inviteID: "invite-654",
+    lastUpdated: "2025-03-10T11:00:00",
+    timeRange: "7:00 PM - 10:00 PM",
+    dateRange: "Tuesday - Sunday",
+    status: "upcoming",
+    invitationAccepted: true,
+    hasAvailability: true,
+  }}
+/>
+
+<Story name="Venue List View">
+  <div class="max-w-4xl space-y-4">
+    <VenueItemCard
+      venueId="venue-1"
+      name="Comedy Spot"
+      image="/images/venue1.jpg"
+      location="San Diego, CA"
+      start="20:00"
+      end="23:00"
+      doorOpen="19:30"
+      email="info@comedyspot.com"
+      phone="(619) 555-0100"
+      description="Intimate comedy venue"
+      instagram="@comedyspot"
+      facebook="comedyspot"
+      twitter="@ComedySpot"
+      inviteID="invite-1"
+      lastUpdated="2025-03-14T10:00:00"
+      timeRange="8:00 PM - 11:00 PM"
+      dateRange="Friday - Saturday"
+      status="upcoming"
+      invitationAccepted={true}
+      hasAvailability={true}
+    />
+    <VenueItemCard
+      venueId="venue-2"
+      name="Blue Moon Comedy"
+      image="/images/venue2.jpg"
+      location="San Francisco, CA"
+      start="19:00"
+      end="22:00"
+      doorOpen="18:30"
+      email="bookings@bluemoon.com"
+      phone="(415) 555-0200"
+      description="Bay Area comedy club"
+      instagram="@bluemooncomedy"
+      facebook="bluemooncomedy"
+      twitter="@BlueMoonComedy"
+      inviteID="invite-2"
+      lastUpdated="2025-03-11T15:30:00"
+      timeRange="7:00 PM - 10:00 PM"
+      dateRange="Wednesday - Sunday"
+      status="upcoming"
+      invitationAccepted={true}
+      hasAvailability={true}
+    />
+    <VenueItemCard
+      venueId="venue-3"
+      name="Sunset Comedy Lounge"
+      image="/images/venue3.jpg"
+      location="Santa Monica, CA"
+      start="20:30"
+      end="23:30"
+      doorOpen="20:00"
+      email="info@sunsetcomedy.com"
+      phone="(310) 555-0300"
+      description="Beachside comedy venue"
+      instagram="@sunsetcomedy"
+      facebook="sunsetcomedy"
+      twitter="@SunsetComedy"
+      inviteID="invite-3"
+      lastUpdated="2025-02-28T09:00:00"
+      timeRange="8:30 PM - 11:30 PM"
+      dateRange="Thursday - Saturday"
+      status="upcoming"
+      invitationAccepted={true}
+      hasAvailability={false}
+    />
+  </div>
+</Story>
+
+<Story name="Venue Roster Page">
+  <div class="max-w-5xl p-6">
+    <div class="mb-6">
+      <h1 class="text-2xl font-bold text-Text-Primary mb-2">My Venue Roster</h1>
+      <p class="text-Text-Tartiary">
+        Manage your connections with comedy venues
+      </p>
+    </div>
+
+    <div class="grid gap-4 md:grid-cols-2">
+      <VenueItemCard
+        venueId="venue-a"
+        name="The Comedy Store"
+        image="/images/store.jpg"
+        location="Los Angeles, CA"
+        start="19:00"
+        end="23:00"
+        doorOpen="18:30"
+        email="bookings@comedystore.com"
+        phone="(323) 656-6225"
+        description="World-famous venue"
+        instagram="@thecomedystore"
+        facebook="thecomedystore"
+        twitter="@TheComedyStore"
+        inviteID="invite-a"
+        lastUpdated="2025-03-14T10:30:00"
+        timeRange="7:00 PM - 11:00 PM"
+        dateRange="Tuesday - Sunday"
+        status="upcoming"
+        invitationAccepted={true}
+        hasAvailability={true}
+      />
+      <VenueItemCard
+        venueId="venue-b"
+        name="Laugh Factory"
+        image="/images/factory.jpg"
+        location="Hollywood, CA"
+        start="20:00"
+        end="00:00"
+        doorOpen="19:00"
+        email="info@laughfactory.com"
+        phone="(323) 656-1336"
+        description="Premier venue"
+        instagram="@laughfactory"
+        facebook="laughfactory"
+        twitter="@LaughFactory"
+        inviteID="invite-b"
+        lastUpdated="2025-03-12T14:20:00"
+        timeRange="8:00 PM - 12:00 AM"
+        dateRange="Every day"
+        status="upcoming"
+        invitationAccepted={true}
+        hasAvailability={true}
+      />
+    </div>
+  </div>
+</Story>
+
+<Story name="Single Venue Detail">
+  <div class="max-w-2xl p-6 bg-gray-50 rounded-lg">
+    <VenueItemCard
+      venueId="venue-single"
+      name="Pacific Coast Comedy"
+      image="/images/pacific.jpg"
+      location="Malibu, CA"
+      start="19:00"
+      end="22:00"
+      doorOpen="18:30"
+      email="bookings@pacificcomedy.com"
+      phone="(310) 555-9999"
+      description="Oceanfront comedy club with stunning views and top-tier talent. Features full dining menu and craft cocktails."
+      instagram="@pacificcoastcomedy"
+      facebook="pacificcoastcomedy"
+      twitter="@PacificComedy"
+      inviteID="invite-single"
+      lastUpdated="2025-03-13T16:45:00"
+      timeRange="7:00 PM - 10:00 PM"
+      dateRange="Friday - Sunday"
+      status="upcoming"
+      invitationAccepted={true}
+      hasAvailability={true}
+    />
+  </div>
+</Story>

package/dist/components/pages/performers/VenueItemCard.stories.svelte.d.ts

@@ -0,0 +1,37 @@
+export namespace meta {
+    export let title: string;
+    export { VenueItemCard as component };
+    export namespace argTypes {
+        namespace status {
+            let control: string;
+            let options: string[];
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  VenueItemCardProps */
+/** @typedef {typeof __propDef.events}  VenueItemCardEvents */
+/** @typedef {typeof __propDef.slots}  VenueItemCardSlots */
+export default class VenueItemCard extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type VenueItemCardProps = typeof __propDef.props;
+export type VenueItemCardEvents = typeof __propDef.events;
+export type VenueItemCardSlots = typeof __propDef.slots;
+import VenueItemCard from "./VenueItemCard.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=VenueItemCard.stories.svelte.d.ts.map

package/dist/components/pages/performers/VenueItemCard.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VenueItemCard.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/VenueItemCard.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;AAsKA,4DAA4D;AAC5D,8DAA8D;AAC9D,4DAA4D;AAE5D;;;;;CACC;iCALa,OAAO,SAAS,CAAC,KAAK;kCACtB,OAAO,SAAS,CAAC,MAAM;iCACvB,OAAO,SAAS,CAAC,KAAK;0BApKR,wBAAwB;gCAJpB,QAAQ;AAqKxC;;;;;;;;;;EAAgF"}

package/dist/components/pages/performers/VenueItemCard.svelte

@@ -0,0 +1,192 @@
+<script>
+  import Input from "../../Input/Input.svelte";
+  import Modal from "../../Modal/Modal.svelte";
+  import VenueInfo from "./VenueInfo.svelte";
+  import { showToast } from "../../../../stores/toaster";
+  import { getPerformerToken } from "../../../../utils/utils";
+  import { timeAgo } from "../../../../utils/utils/utils";
+  import { buildApiUrl, API_ENDPOINTS } from "../../../../utils/apiConfig";
+  import { Dropdown, DropdownItem } from "flowbite-svelte";
+  import { DotsHorizontalOutline } from "flowbite-svelte-icons";
+  import Button from "../../Button/Button.svelte";
+
+  export let venueId;
+  export let name;
+  export let image;
+  export let location;
+  export let start;
+  export let end;
+  export let doorOpen;
+  export let email;
+  export let phone;
+  export let description;
+  export let instagram;
+  export let facebook;
+  export let twitter;
+  export let inviteID;
+  export let lastUpdated;
+  export let timeRange;
+  export let dateRange;
+
+  export let status;
+  export let invitationAccepted;
+  export let hasAvailability;
+  export let onUpdateClick = () => {};
+
+  let showLeaveVenue = false;
+  let note = "";
+
+  async function removeVenueFromRoster(venueId) {
+    // Get the token from cookies for authenticated request
+    const token = getPerformerToken();
+
+    const response = await fetch(
+      buildApiUrl(`${API_ENDPOINTS.REMOVE_VENUE_FROM_ROSTER}/${venueId}`),
+      {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token ? `Bearer ${token}` : "",
+        },
+        credentials: "include",
+      },
+    );
+
+    if (response.ok) {
+      const result = await response.json();
+      // Trigger a page reload to refresh venue list
+      window.location.reload();
+      return result;
+    } else {
+      return "failure";
+    }
+  }
+  const toggleModal = (modalName, value) => {
+    if (modalName === "leave") showLeaveVenue = value;
+  };
+
+  const handleLeaveVenue = async () => {
+    toggleModal("leave", false);
+    const result = await removeVenueFromRoster(venueId);
+    if (result === "failure") {
+      showToast(`Failed to leave ${name} venue.`, "error");
+    } else {
+      showToast(`You have left ${name} venue.`, "success");
+    }
+  };
+
+</script>
+
+<div
+  class="w-full flex flex-col bg-bg-primary border border-stroke-secondary p-3 sm:p-4 rounded-lg"
+>
+  <VenueInfo {name} {image} {location} />
+
+  <div class="mt-2">
+    {#if status === "upcoming" && (hasAvailability || invitationAccepted)}
+      {#if invitationAccepted && !hasAvailability}
+        <div class="flex flex-row gap-2">
+          <div
+            class="flex-1 bg-red-50 text-sm text-red-700 font-semibold rounded-lg flex flex-col justify-center p-2"
+          >
+            Please update your availability.
+          </div>
+          <Button variant="red-solid" responsive on:click={onUpdateClick}>Set up</Button>
+
+          <DotsHorizontalOutline
+            data-testid="dropdown-menu"
+            triggeredBy=".more-menu"
+            class="more-menu text-primary-700 border border-primary-700 rounded-lg h-auto w-9 px-1.5 hover:bg-primary-50 cursor-pointer transition-colors"
+          />
+
+          <Dropdown class="shadow-none min-w-[200px]" triggeredBy=".more-menu">
+            <DropdownItem
+              class="text-red-600"
+              on:click={() => toggleModal("leave", true)}
+            >
+              Leave this venue
+            </DropdownItem>
+          </Dropdown>
+        </div>
+      {:else}
+        <!-- Last Updated and Action Buttons Row -->
+        <div class="flex flex-row items-end gap-2 mt-2">
+          <div class="flex-1 text-xs text-Text-Tartiary">
+            Last updated: {timeAgo(lastUpdated)}
+          </div>
+          <Button
+            variant="blue-solid"
+            responsive
+            minWidth="sm"
+            on:click={onUpdateClick}
+          >
+            Update
+          </Button>
+          <DotsHorizontalOutline
+            data-testid="dropdown-menu"
+            triggeredBy=".more-menu"
+            class="more-menu text-gray-800 border border-gray-300 rounded-lg h-10 w-10 p-2 hover:bg-gray-50 cursor-pointer transition-colors"
+          />
+          <Dropdown
+            class="shadow-none min-w-[200px]"
+            triggeredBy=".more-menu"
+          >
+            <DropdownItem
+              class="text-red-600"
+              on:click={() => toggleModal("leave", true)}
+            >
+              Leave this venue
+            </DropdownItem>
+          </Dropdown>
+        </div>
+      {/if}
+    {/if}
+  </div>
+
+  <!-- Leave the Venue Modal -->
+  <Modal bind:show={showLeaveVenue}>
+    <h2 slot="header" class="text-xl font-medium text-Text-Primary">
+      Are you sure you want to leave this venue?
+    </h2>
+    <div slot="body">
+      <p class="text-sm font-medium text-Text-Tartiary mt-4">
+        You will no longer receive availability update requests. If you'd like
+        to include a note, leave it here.
+      </p>
+      <Input
+        type="textarea"
+        id="notes"
+        placeholder="Enter your note here"
+        bind:value={note}
+        textareaSize="lg"
+        className="mt-1"
+      />
+    </div>
+    <div slot="footer" class="w-full">
+      <div
+        class="w-full flex items-center justify-between md:justify-end gap-4 mt-5"
+      >
+        <Button
+          variant="gray-outline"
+          size="half"
+          minWidth="modal-responsive"
+          on:click={(e) => {
+            e.stopPropagation();
+            toggleModal("leave", false);
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="red-outline"
+          size="half"
+          minWidth="modal-responsive"
+          on:click={handleLeaveVenue}
+        >
+          Leave
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</div>
+

package/dist/components/pages/performers/VenueItemCard.svelte.d.ts

@@ -0,0 +1,66 @@
+/** @typedef {typeof __propDef.props}  VenueItemCardProps */
+/** @typedef {typeof __propDef.events}  VenueItemCardEvents */
+/** @typedef {typeof __propDef.slots}  VenueItemCardSlots */
+export default class VenueItemCard extends SvelteComponent<{
+    image: any;
+    name: any;
+    end: any;
+    start: any;
+    status: any;
+    email: any;
+    description: any;
+    location: any;
+    lastUpdated: any;
+    invitationAccepted: any;
+    hasAvailability: any;
+    venueId: any;
+    doorOpen: any;
+    phone: any;
+    instagram: any;
+    facebook: any;
+    twitter: any;
+    inviteID: any;
+    timeRange: any;
+    dateRange: any;
+    onUpdateClick?: (() => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type VenueItemCardProps = typeof __propDef.props;
+export type VenueItemCardEvents = typeof __propDef.events;
+export type VenueItemCardSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        image: any;
+        name: any;
+        end: any;
+        start: any;
+        status: any;
+        email: any;
+        description: any;
+        location: any;
+        lastUpdated: any;
+        invitationAccepted: any;
+        hasAvailability: any;
+        venueId: any;
+        doorOpen: any;
+        phone: any;
+        instagram: any;
+        facebook: any;
+        twitter: any;
+        inviteID: any;
+        timeRange: any;
+        dateRange: any;
+        onUpdateClick?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=VenueItemCard.svelte.d.ts.map

package/dist/components/pages/performers/VenueItemCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VenueItemCard.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/VenueItemCard.svelte.js"],"names":[],"mappings":"AAqKA,4DAA4D;AAC5D,8DAA8D;AAC9D,4DAA4D;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;CACC;iCALa,OAAO,SAAS,CAAC,KAAK;kCACtB,OAAO,SAAS,CAAC,MAAM;iCACvB,OAAO,SAAS,CAAC,KAAK;gCAvKJ,QAAQ;AAoKxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAmG"}

package/dist/components/pages/profile/profile-form.spec.d.ts

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

package/dist/components/pages/profile/profile-form.spec.d.ts.map

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

package/dist/components/pages/profile/profile-form.spec.js

@@ -0,0 +1,9 @@
+import { describe, it, expect, vi } from 'vitest';
+
+// Skip profile-form tests - complex component with many dependencies
+// This component is better tested via E2E tests
+describe.skip('ProfileForm', () => {
+  it('placeholder', () => {
+    expect(true).toBe(true);
+  });
+});