@getmicdrop/svelte-components 1.0.2 → 1.0.4

package/dist/components/Badges/Badge.svelte

@@ -0,0 +1,182 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { classNames } from "./../../utils/utils.js";
+
+  const dispatch = createEventDispatcher();
+
+  export let size = "medium";
+  export let className = "";
+  /** @type {string} Semantic variant (required) */
+  export let variant = "neutral";
+
+  $: sizeClass = (() => {
+    switch (size) {
+      case "small":
+        return "badge-sm";
+      case "medium":
+        return "badge-md";
+      case "large":
+        return "badge-lg";
+      default:
+        return "badge-md";
+    }
+  })();
+
+  $: variantClass = (() => {
+    switch (variant.toLowerCase()) {
+      // Role variants
+      case "host":
+        return "badge-host";
+      case "headliner":
+        return "badge-headliner";
+      case "feature":
+        return "badge-feature";
+      case "special-guest":
+        return "badge-special-guest";
+      case "opener":
+        return "badge-opener";
+      case "guest":
+        return "badge-guest";
+      case "teacher":
+        return "badge-teacher";
+      case "assistant":
+        return "badge-assistant";
+      // Status variants
+      case "success":
+        return "badge-success";
+      case "warning":
+        return "badge-warning";
+      case "error":
+        return "badge-error";
+      case "info":
+        return "badge-info";
+      case "neutral":
+      default:
+        return "badge-neutral";
+    }
+  })();
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class={classNames(
+    "badge",
+    sizeClass,
+    variantClass,
+    className
+  )}
+  on:click={(event) => dispatch("click", event)}
+>
+  <slot />
+</div>
+
+<!--
+  Usage: <Badge variant="host">Host</Badge>
+
+  Role variants: host, headliner, feature, special-guest, opener, guest, teacher, assistant
+  Status variants: success, warning, error, info, neutral
+-->
+
+<style>
+  /* Base badge styles */
+  .badge {
+    cursor: pointer;
+    gap: 0.25rem;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /* Size variants */
+  .badge-sm {
+    padding-left: 2px;
+    padding-right: 2px;
+    font-size: 7px;
+    line-height: 7px;
+    border-radius: 4px;
+    font-weight: 500;
+  }
+
+  .badge-md {
+    padding: 2px 8.5px;
+    font-size: 10px;
+    line-height: 14px;
+    border-radius: 6px;
+    font-weight: 600;
+  }
+
+  .badge-lg {
+    padding: 6px 15.5px;
+    font-size: 0.875rem;
+    line-height: 14px;
+    border-radius: 6px;
+    font-weight: 500;
+  }
+
+  /* Role variants */
+  .badge-host {
+    color: #dc2626;
+    background-color: #fef2f2;
+  }
+
+  .badge-headliner {
+    color: #9333ea;
+    background-color: #faf5ff;
+  }
+
+  .badge-feature {
+    color: #2563eb;
+    background-color: #eff6ff;
+  }
+
+  .badge-special-guest {
+    color: #16a34a;
+    background-color: #f0fdf4;
+  }
+
+  .badge-opener {
+    color: #ea580c;
+    background-color: #fff7ed;
+  }
+
+  .badge-guest {
+    color: #4b5563;
+    background-color: #f9fafb;
+  }
+
+  .badge-teacher {
+    color: #ca8a04;
+    background-color: #fefce8;
+  }
+
+  .badge-assistant {
+    color: #4f46e5;
+    background-color: #eef2ff;
+  }
+
+  /* Status variants */
+  .badge-success {
+    color: #16a34a;
+    background-color: #f0fdf4;
+  }
+
+  .badge-warning {
+    color: #ca8a04;
+    background-color: #fefce8;
+  }
+
+  .badge-error {
+    color: #dc2626;
+    background-color: #fef2f2;
+  }
+
+  .badge-info {
+    color: #2563eb;
+    background-color: #eff6ff;
+  }
+
+  .badge-neutral {
+    color: #4b5563;
+    background-color: #f9fafb;
+  }
+</style>

package/dist/components/Badges/Badge.svelte.d.ts

@@ -0,0 +1,38 @@
+/** @typedef {typeof __propDef.props}  BadgeProps */
+/** @typedef {typeof __propDef.events}  BadgeEvents */
+/** @typedef {typeof __propDef.slots}  BadgeSlots */
+export default class Badge extends SvelteComponent<{
+    size?: string | undefined;
+    className?: string | undefined;
+    variant?: string | undefined;
+}, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type BadgeProps = typeof __propDef.props;
+export type BadgeEvents = typeof __propDef.events;
+export type BadgeSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+        className?: string | undefined;
+        variant?: string | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Badge.svelte.d.ts.map

package/dist/components/Badges/Badge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":"AAoFA,oDAAoD;AACpD,sDAAsD;AACtD,oDAAoD;AAEpD;;;;;;;;;;;CACC;yBALa,OAAO,SAAS,CAAC,KAAK;0BACtB,OAAO,SAAS,CAAC,MAAM;yBACvB,OAAO,SAAS,CAAC,KAAK;gCAtFJ,QAAQ;AAmFxC;;;;;;;;;;;;;;;;EAAgH"}

package/dist/components/Badges/BadgeAudit.stories.svelte

@@ -0,0 +1,238 @@
+<script context="module">
+  import Badge from "./Badge.svelte";
+
+  export const meta = {
+    title: "Audit/Badge Variants",
+    component: Badge,
+  };
+</script>
+
+<script>
+  import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="All Badge Variants">
+  <div class="performer-portal p-6 space-y-8 bg-BG-Primary min-h-screen">
+    <div class="max-w-2xl mx-auto">
+      <h1 class="text-2xl font-bold text-Text-Primary mb-2">Badge Component Audit</h1>
+      <p class="text-Text-Tartiary mb-8">All badge variants as they appear across the performers portal</p>
+
+      <!-- SECTION: Size Variants -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Size Variants
+        </h2>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              size="small" - tiny badge for compact spaces
+            </div>
+            <div class="flex items-center gap-2">
+              <Badge size="small" variant="info">Small</Badge>
+              <span class="text-xs text-Text-Tartiary">px-[2px] text-[7px]</span>
+            </div>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              size="medium" (default) - standard badge size
+            </div>
+            <div class="flex items-center gap-2">
+              <Badge size="medium" variant="info">Medium</Badge>
+              <span class="text-xs text-Text-Tartiary">px-[8.5px] py-[2px] text-[10px]</span>
+            </div>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              size="large" - prominent badge
+            </div>
+            <div class="flex items-center gap-2">
+              <Badge size="large" variant="info">Large</Badge>
+              <span class="text-xs text-Text-Tartiary">px-[15.5px] py-[6px] text-sm</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Role Variants (NEW!) -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Role Variants (Semantic)
+        </h2>
+        <p class="text-sm text-Text-Tartiary mb-4">
+          Use the <code class="bg-gray-100 px-1 rounded">variant</code> prop for semantic role badges.
+        </p>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="host"
+            </div>
+            <Badge variant="host">Host</Badge>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="headliner"
+            </div>
+            <Badge variant="headliner">Headliner</Badge>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="feature"
+            </div>
+            <Badge variant="feature">Feature</Badge>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="special-guest"
+            </div>
+            <Badge variant="special-guest">Special Guest</Badge>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="opener"
+            </div>
+            <Badge variant="opener">Opener</Badge>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="guest"
+            </div>
+            <Badge variant="guest">Guest</Badge>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="teacher"
+            </div>
+            <Badge variant="teacher">Teacher</Badge>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="assistant"
+            </div>
+            <Badge variant="assistant">Assistant</Badge>
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Status Variants -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Status Variants
+        </h2>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="success"
+            </div>
+            <Badge variant="success">Active</Badge>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="warning"
+            </div>
+            <Badge variant="warning">Pending</Badge>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="error"
+            </div>
+            <Badge variant="error">Cancelled</Badge>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="info"
+            </div>
+            <Badge variant="info">Info</Badge>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              variant="neutral"
+            </div>
+            <Badge variant="neutral">Neutral</Badge>
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Real Usage -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Real Usage in ShowItemCard
+        </h2>
+
+        <div class="p-4 bg-BG-Secondary rounded-lg">
+          <div class="text-xs text-Text-Tartiary mb-4 font-mono">
+            Badge is used to display performer role on show cards
+          </div>
+
+          <!-- Simulated Show Card Header -->
+          <div class="bg-BG-Primary p-4 rounded-lg border border-stroke-Primary">
+            <div class="flex items-start gap-3">
+              <div class="w-16 h-16 bg-gray-300 rounded-lg flex items-center justify-center text-gray-500">
+                IMG
+              </div>
+              <div class="flex-1">
+                <div class="flex items-center gap-2 mb-1">
+                  <h3 class="font-semibold text-Text-Primary">Comedy Night Live</h3>
+                  <Badge size="small" variant="headliner">Headliner</Badge>
+                </div>
+                <p class="text-sm text-Text-Tartiary">The Laugh Factory</p>
+                <p class="text-xs text-Text-Tartiary">Saturday, Dec 14 at 8:00 PM</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Props Summary -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Props Summary
+        </h2>
+
+        <div class="bg-BG-Secondary rounded-lg p-4 text-sm">
+          <table class="w-full text-left">
+            <thead>
+              <tr class="border-b border-stroke-Primary">
+                <th class="py-2 text-Text-Primary">Prop</th>
+                <th class="py-2 text-Text-Primary">Type</th>
+                <th class="py-2 text-Text-Primary">Description</th>
+              </tr>
+            </thead>
+            <tbody class="text-Text-Tartiary">
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">variant</td>
+                <td class="py-2 text-xs">string (required)</td>
+                <td class="py-2 text-xs">Semantic variant: host, headliner, feature, special-guest, opener, guest, teacher, assistant, success, warning, error, info, neutral</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">size</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">small, medium (default), large</td>
+              </tr>
+              <tr>
+                <td class="py-2 font-mono text-xs">className</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">Additional CSS classes</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  </div>
+</Story>

package/dist/components/Badges/BadgeAudit.stories.svelte.d.ts

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

package/dist/components/Badges/BadgeAudit.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/BadgeAudit.stories.svelte.js"],"names":[],"mappings":";;;;AAwPA,yDAAyD;AACzD,2DAA2D;AAC3D,yDAAyD;AAEzD;;;;;CACC;8BALa,OAAO,SAAS,CAAC,KAAK;+BACtB,OAAO,SAAS,CAAC,MAAM;8BACvB,OAAO,SAAS,CAAC,KAAK;kBAvPhB,gBAAgB;gCAHJ,QAAQ;AAuPxC;;;;;;;;;;EAAgF"}

package/dist/components/BottomSheet/BottomSheet.spec.d.ts

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

package/dist/components/BottomSheet/BottomSheet.spec.d.ts.map

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

package/dist/components/BottomSheet/BottomSheet.spec.js

@@ -0,0 +1,127 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import BottomSheet from './BottomSheet.svelte';
+
+describe('BottomSheet Component', () => {
+  beforeEach(() => {
+    // Reset body overflow
+    document.body.style.overflow = '';
+  });
+
+  afterEach(() => {
+    document.body.style.overflow = '';
+  });
+
+  it('does not render when show is false', () => {
+    const { container } = render(BottomSheet, { props: { show: false } });
+    const backdrop = container.querySelector('.bottom-sheet-backdrop');
+    expect(backdrop).toBeFalsy();
+  });
+
+  it('renders when show is true', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    const backdrop = container.querySelector('.bottom-sheet-backdrop');
+    expect(backdrop).toBeTruthy();
+  });
+
+  it('renders title when provided', () => {
+    const { getByText } = render(BottomSheet, {
+      props: { show: true, title: 'Test Title' },
+    });
+    expect(getByText('Test Title')).toBeTruthy();
+  });
+
+  it('does not render title when not provided', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    const header = container.querySelector('.bottom-sheet__header');
+    expect(header).toBeFalsy();
+  });
+
+  it('locks body scroll when shown', async () => {
+    render(BottomSheet, { props: { show: true } });
+    // Wait for reactive update
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(document.body.style.overflow).toBe('hidden');
+  });
+
+  it('unlocks body scroll when hidden', async () => {
+    const { component } = render(BottomSheet, { props: { show: true } });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    component.$set({ show: false });
+    await new Promise((resolve) => setTimeout(resolve, 10));
+
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('dispatches close event on backdrop click', async () => {
+    const { container, component } = render(BottomSheet, { props: { show: true } });
+    const backdrop = container.querySelector('.bottom-sheet-backdrop');
+
+    let closeCalled = false;
+    component.$on('close', () => {
+      closeCalled = true;
+    });
+
+    await fireEvent.click(backdrop);
+    expect(closeCalled).toBe(true);
+  });
+
+  it('does not dispatch close when clicking sheet content', async () => {
+    const { container, component } = render(BottomSheet, { props: { show: true } });
+    const sheet = container.querySelector('.bottom-sheet');
+
+    let closeCalled = false;
+    component.$on('close', () => {
+      closeCalled = true;
+    });
+
+    await fireEvent.click(sheet);
+    expect(closeCalled).toBe(false);
+  });
+
+  it('dispatches close event on Escape key', async () => {
+    const { component } = render(BottomSheet, { props: { show: true } });
+
+    let closeCalled = false;
+    component.$on('close', () => {
+      closeCalled = true;
+    });
+
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closeCalled).toBe(true);
+  });
+
+  it('does not dispatch close on Escape when not shown', async () => {
+    const { component } = render(BottomSheet, { props: { show: false } });
+
+    let closeCalled = false;
+    component.$on('close', () => {
+      closeCalled = true;
+    });
+
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    expect(closeCalled).toBe(false);
+  });
+
+  it('has handle bar element', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    const handle = container.querySelector('.bottom-sheet__handle');
+    expect(handle).toBeTruthy();
+  });
+
+  it('has content area for slot content', () => {
+    const { container } = render(BottomSheet, { props: { show: true } });
+    const content = container.querySelector('.bottom-sheet__content');
+    expect(content).toBeTruthy();
+  });
+
+  it('cleans up body overflow on destroy', () => {
+    const { component } = render(BottomSheet, { props: { show: true } });
+    document.body.style.overflow = 'hidden';
+
+    component.$destroy();
+
+    expect(document.body.style.overflow).toBe('');
+  });
+});