@getmicdrop/svelte-components 1.0.2 → 1.0.4

package/dist/components/pages/performers/ModalShowInfo.spec.js

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import ModalShowInfo from './ModalShowInfo.svelte';
+
+// Mock the utils
+vi.mock('@/utils/utils', () => ({
+  microphonePlaceholder: '/placeholder-mic.png',
+}));
+
+describe('ModalShowInfo Component', () => {
+  const defaultProps = {
+    image: '/test-image.jpg',
+    title: 'Comedy Night',
+    showDate: 'Dec 25, 2025',
+    formattedStartTime: '8:00 PM',
+    venueName: 'The Laugh Factory',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the component', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-info')).toBeDefined();
+  });
+
+  it('renders the title', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-title').textContent).toBe('Comedy Night');
+  });
+
+  it('renders the venue name', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-venue').textContent).toBe('The Laugh Factory');
+  });
+
+  it('renders date and time when both provided', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-datetime').textContent).toContain('Dec 25, 2025');
+    expect(container.querySelector('.modal-show-datetime').textContent).toContain('8:00 PM');
+  });
+
+  it('renders "No date yet" when showDate is missing', () => {
+    const props = { ...defaultProps, showDate: '', formattedStartTime: '8:00 PM' };
+    const { container } = render(ModalShowInfo, { props });
+    expect(container.querySelector('.modal-show-datetime').textContent.trim()).toBe('No date yet');
+  });
+
+  it('renders "No date yet" when formattedStartTime is missing', () => {
+    const props = { ...defaultProps, showDate: 'Dec 25, 2025', formattedStartTime: '' };
+    const { container } = render(ModalShowInfo, { props });
+    expect(container.querySelector('.modal-show-datetime').textContent.trim()).toBe('No date yet');
+  });
+
+  it('renders "No date yet" when both are missing', () => {
+    const props = { ...defaultProps, showDate: '', formattedStartTime: '' };
+    const { container } = render(ModalShowInfo, { props });
+    expect(container.querySelector('.modal-show-datetime').textContent.trim()).toBe('No date yet');
+  });
+
+  it('handles http image URLs directly', () => {
+    const props = { ...defaultProps, image: 'https://example.com/image.jpg' };
+    const { container } = render(ModalShowInfo, { props });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.src).toBe('https://example.com/image.jpg');
+  });
+
+  it('prepends CDN URL for relative image paths', () => {
+    const props = { ...defaultProps, image: '/uploads/image.jpg' };
+    const { container } = render(ModalShowInfo, { props });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.src).toBe('https://moxy.sfo3.digitaloceanspaces.com/uploads/image.jpg');
+  });
+
+  it('uses placeholder when image is empty', () => {
+    const props = { ...defaultProps, image: '' };
+    const { container } = render(ModalShowInfo, { props });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.src).toContain('placeholder-mic.png');
+  });
+
+  it('uses placeholder when image is null', () => {
+    const props = { ...defaultProps, image: null };
+    const { container } = render(ModalShowInfo, { props });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.src).toContain('placeholder-mic.png');
+  });
+
+  it('uses placeholder when image is undefined', () => {
+    const props = { ...defaultProps, image: undefined };
+    const { container } = render(ModalShowInfo, { props });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.src).toContain('placeholder-mic.png');
+  });
+
+  it('sets alt text to title', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    const img = container.querySelector('.modal-show-image img');
+    expect(img.alt).toBe('Comedy Night');
+  });
+
+  it('renders with empty venue name', () => {
+    const props = { ...defaultProps, venueName: '' };
+    const { container } = render(ModalShowInfo, { props });
+    expect(container.querySelector('.modal-show-venue').textContent).toBe('');
+  });
+
+  it('renders with empty title', () => {
+    const props = { ...defaultProps, title: '' };
+    const { container } = render(ModalShowInfo, { props });
+    expect(container.querySelector('.modal-show-title').textContent).toBe('');
+  });
+
+  it('renders show image container', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-image')).toBeDefined();
+  });
+
+  it('renders show details container', () => {
+    const { container } = render(ModalShowInfo, { props: defaultProps });
+    expect(container.querySelector('.modal-show-details')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,88 @@
+<script>
+  import { microphonePlaceholder } from "../../../../utils/utils";
+
+  export let image;
+  export let title;
+  export let showDate;
+  export let formattedStartTime;
+  export let venueName;
+</script>
+
+<div class="modal-show-info">
+  <div class="modal-show-image">
+    <img
+      src={image && image.startsWith("http")
+        ? image
+        : image
+          ? `https://moxy.sfo3.digitaloceanspaces.com${image}`
+          : microphonePlaceholder}
+      alt={title}
+    />
+  </div>
+  <div class="modal-show-details">
+    <h4 class="modal-show-title">{title}</h4>
+    <p class="modal-show-datetime">
+      {#if showDate && formattedStartTime}
+        {showDate} • {formattedStartTime}
+      {:else}
+        No date yet
+      {/if}
+    </p>
+    <p class="modal-show-venue">{venueName}</p>
+  </div>
+</div>
+
+<style>
+  .modal-show-info {
+    display: flex;
+    gap: 0.75rem;
+    padding: 0.75rem 0;
+  }
+
+  .modal-show-image {
+    width: 80px;
+    height: 80px;
+    flex-shrink: 0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background-color: hsl(var(--BG-Secondary));
+  }
+
+  .modal-show-image img {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: contain;
+       object-fit: contain;
+  }
+
+  .modal-show-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  .modal-show-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: hsl(var(--Text-Primary));
+    margin: 0;
+    line-height: 1.3;
+  }
+
+  .modal-show-datetime {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: hsl(var(--Text-Primary));
+    margin: 0.125rem 0 0;
+    line-height: 1.4;
+  }
+
+  .modal-show-venue {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: hsl(var(--Text-Tartiary));
+    margin: 0;
+    line-height: 1.4;
+  }
+</style>

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  ModalShowInfoProps */
+/** @typedef {typeof __propDef.events}  ModalShowInfoEvents */
+/** @typedef {typeof __propDef.slots}  ModalShowInfoSlots */
+export default class ModalShowInfo extends SvelteComponent<{
+    image: any;
+    title: any;
+    showDate: any;
+    formattedStartTime: any;
+    venueName: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ModalShowInfoProps = typeof __propDef.props;
+export type ModalShowInfoEvents = typeof __propDef.events;
+export type ModalShowInfoSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        image: any;
+        title: any;
+        showDate: any;
+        formattedStartTime: any;
+        venueName: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ModalShowInfo.svelte.d.ts.map

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

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

package/dist/components/pages/performers/PageBackButton.spec.d.ts

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

package/dist/components/pages/performers/PageBackButton.spec.d.ts.map

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

package/dist/components/pages/performers/PageBackButton.spec.js

@@ -0,0 +1,89 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi, beforeEach } from "vitest";
+import PageBackButton from "./PageBackButton.svelte";
+
+// Mock history.back
+const mockHistoryBack = vi.fn();
+
+describe("PageBackButton Component Tests", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock history.back
+    Object.defineProperty(window, "history", {
+      value: {
+        back: mockHistoryBack,
+      },
+      writable: true,
+    });
+  });
+
+  test("Renders button element", () => {
+    render(PageBackButton, { props: { headerTitle: "Back" } });
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+  });
+
+  test("Renders header title", () => {
+    render(PageBackButton, { props: { headerTitle: "Profile Settings" } });
+    expect(screen.getByText("Profile Settings")).toBeInTheDocument();
+  });
+
+  test("Has button type", () => {
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("type", "button");
+  });
+
+  test("Calls history.back on click", async () => {
+    const user = userEvent.setup();
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+
+    await user.click(button);
+
+    expect(mockHistoryBack).toHaveBeenCalledTimes(1);
+  });
+
+  test("Has flexbox layout", () => {
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("flex");
+    expect(button).toHaveClass("items-center");
+  });
+
+  test("Has correct typography classes", () => {
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("font-semibold");
+    expect(button).toHaveClass("text-xl");
+    expect(button).toHaveClass("text-Text-Primary");
+  });
+
+  test("Contains Back icon", () => {
+    const { container } = render(PageBackButton, { props: { headerTitle: "Title" } });
+    // Icon component should render an SVG
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Works with empty title", () => {
+    render(PageBackButton, { props: { headerTitle: "" } });
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+  });
+
+  test("Has responsive gap classes", () => {
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+    expect(button.className).toMatch(/gap-1\.5/);
+    expect(button.className).toMatch(/sm:gap-2/);
+  });
+
+  test("Has responsive margin classes", () => {
+    render(PageBackButton, { props: { headerTitle: "Title" } });
+    const button = screen.getByRole("button");
+    expect(button.className).toMatch(/my-0\.5/);
+    expect(button.className).toMatch(/sm:my-1/);
+  });
+});

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

@@ -0,0 +1,72 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import PageBackButton from "./PageBackButton.svelte";
+
+  export const meta = {
+    title: "Pages/Performers/PageBackButton",
+    component: PageBackButton,
+    argTypes: {
+      headerTitle: { control: "text" },
+    },
+  };
+</script>
+
+<Template let:args>
+  <PageBackButton {...args} />
+</Template>
+
+<Story
+  name="Show Details"
+  args={{
+    headerTitle: "Show Details",
+  }}
+/>
+
+<Story
+  name="Venue Information"
+  args={{
+    headerTitle: "Venue Information",
+  }}
+/>
+
+<Story
+  name="My Profile"
+  args={{
+    headerTitle: "My Profile",
+  }}
+/>
+
+<Story
+  name="Payment Settings"
+  args={{
+    headerTitle: "Payment Settings",
+  }}
+/>
+
+<Story
+  name="Availability"
+  args={{
+    headerTitle: "Availability",
+  }}
+/>
+
+<Story
+  name="Booking History"
+  args={{
+    headerTitle: "Booking History",
+  }}
+/>
+
+<Story
+  name="Edit Availability"
+  args={{
+    headerTitle: "Edit Availability",
+  }}
+/>
+
+<Story
+  name="Long Title"
+  args={{
+    headerTitle: "Update Your Availability Preferences",
+  }}
+/>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageBackButton.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/PageBackButton.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;AAsDA,6DAA6D;AAC7D,+DAA+D;AAC/D,6DAA6D;AAE7D;;;;;CACC;kCALa,OAAO,SAAS,CAAC,KAAK;mCACtB,OAAO,SAAS,CAAC,MAAM;kCACvB,OAAO,SAAS,CAAC,KAAK;2BApDP,yBAAyB;gCAJtB,QAAQ;AAqDxC;;;;;;;;;;EAAgF"}

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

@@ -0,0 +1,13 @@
+<script>
+  import Icon from "../../Icons/Icon.svelte";
+  export let headerTitle = "";
+</script>
+
+<button
+  type="button"
+  class="my-0.5 sm:my-1 flex items-center gap-1.5 sm:gap-2 font-semibold text-xl text-Text-Primary"
+  on:click={() => history.back()}
+>
+  <Icon name="Back" />
+  {headerTitle}
+</button>

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

@@ -0,0 +1,26 @@
+/** @typedef {typeof __propDef.props}  PageBackButtonProps */
+/** @typedef {typeof __propDef.events}  PageBackButtonEvents */
+/** @typedef {typeof __propDef.slots}  PageBackButtonSlots */
+export default class PageBackButton extends SvelteComponent<{
+    headerTitle?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PageBackButtonProps = typeof __propDef.props;
+export type PageBackButtonEvents = typeof __propDef.events;
+export type PageBackButtonSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        headerTitle?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=PageBackButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageBackButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/PageBackButton.svelte.js"],"names":[],"mappings":"AAkBA,6DAA6D;AAC7D,+DAA+D;AAC/D,6DAA6D;AAE7D;;;;;CACC;kCALa,OAAO,SAAS,CAAC,KAAK;mCACtB,OAAO,SAAS,CAAC,MAAM;kCACvB,OAAO,SAAS,CAAC,KAAK;gCApBJ,QAAQ;AAiBxC;;;;;;;;;;EAAiG"}

package/dist/components/pages/performers/SectionHeader.spec.d.ts

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

package/dist/components/pages/performers/SectionHeader.spec.d.ts.map

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

package/dist/components/pages/performers/SectionHeader.spec.js

@@ -0,0 +1,75 @@
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import SectionHeader from "./SectionHeader.svelte";
+
+describe("SectionHeader Component Tests", () => {
+  test("Renders title", () => {
+    render(SectionHeader, { props: { title: "Header Title" } });
+    expect(screen.getByText("Header Title")).toBeInTheDocument();
+  });
+
+  test("Renders description", () => {
+    render(SectionHeader, {
+      props: { title: "Title", description: "This is a description" },
+    });
+    expect(screen.getByText("This is a description")).toBeInTheDocument();
+  });
+
+  test("Renders both title and description", () => {
+    render(SectionHeader, {
+      props: { title: "My Title", description: "My Description" },
+    });
+    expect(screen.getByText("My Title")).toBeInTheDocument();
+    expect(screen.getByText("My Description")).toBeInTheDocument();
+  });
+
+  test("Title is h3 element", () => {
+    render(SectionHeader, { props: { title: "Title", description: "" } });
+    const title = screen.getByText("Title");
+    expect(title.tagName).toBe("H3");
+  });
+
+  test("Description is p element", () => {
+    render(SectionHeader, {
+      props: { title: "Title", description: "Description" },
+    });
+    const description = screen.getByText("Description");
+    expect(description.tagName).toBe("P");
+  });
+
+  test("Title has correct styling", () => {
+    render(SectionHeader, { props: { title: "Title", description: "" } });
+    const title = screen.getByText("Title");
+    expect(title).toHaveClass("font-semibold");
+    expect(title).toHaveClass("text-Text-Primary");
+    expect(title).toHaveClass("text-xl");
+  });
+
+  test("Description has correct styling", () => {
+    render(SectionHeader, {
+      props: { title: "Title", description: "Description" },
+    });
+    const description = screen.getByText("Description");
+    expect(description).toHaveClass("text-sm");
+    expect(description).toHaveClass("text-Text-Tartiary");
+  });
+
+  test("Works with empty title", () => {
+    render(SectionHeader, { props: { title: "", description: "Only description" } });
+    expect(screen.getByText("Only description")).toBeInTheDocument();
+  });
+
+  test("Works with empty description", () => {
+    render(SectionHeader, { props: { title: "Only title", description: "" } });
+    expect(screen.getByText("Only title")).toBeInTheDocument();
+  });
+
+  test("Works with default empty props", () => {
+    const { container } = render(SectionHeader, { props: {} });
+    const h3 = container.querySelector("h3");
+    const p = container.querySelector("p");
+    expect(h3).toBeInTheDocument();
+    // Description is conditionally rendered - only appears when provided
+    expect(p).not.toBeInTheDocument();
+  });
+});