@getmicdrop/svelte-components 1.0.2 → 1.0.4

package/dist/components/Alert/AlertAudit.stories.svelte

@@ -0,0 +1,241 @@
+<script context="module">
+  import Alert from "./Alert.svelte";
+
+  export const meta = {
+    title: "Audit/Alert Variants",
+    component: Alert,
+  };
+</script>
+
+<script>
+  import { Story } from '@storybook/addon-svelte-csf';
+
+  let showDismissable = true;
+
+  function resetDismissable() {
+    showDismissable = false;
+    setTimeout(() => showDismissable = true, 500);
+  }
+</script>
+
+<Story name="All Alert 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">Alert Component Audit</h1>
+      <p class="text-Text-Tartiary mb-8">All alert variants as they appear across the performers portal</p>
+
+      <!-- SECTION: Alert Types -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Alert Types
+        </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">
+              type="info" (default) - blue styling
+            </div>
+            <Alert type="info" title="Information" message="This is an informational alert message." />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              type="success" - green styling
+            </div>
+            <Alert type="success" title="Success" message="Your changes have been saved successfully." />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              type="warning" - yellow styling
+            </div>
+            <Alert type="warning" title="Warning" message="Please review your information before proceeding." />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              type="danger" - red styling
+            </div>
+            <Alert type="danger" title="Error" message="Something went wrong. Please try again." />
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Content Variants -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Content 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">
+              Title only (no message)
+            </div>
+            <Alert type="info" title="Just a title" />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Message only (no title)
+            </div>
+            <Alert type="info" message="This alert has only a message, no title." />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              With slot content
+            </div>
+            <Alert type="warning" title="Custom Content">
+              <p class="mt-2">This alert uses a <strong>slot</strong> for custom HTML content.</p>
+              <ul class="list-disc list-inside mt-2 text-sm">
+                <li>Item one</li>
+                <li>Item two</li>
+              </ul>
+            </Alert>
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Dismissable -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Dismissable Alerts
+        </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">
+              onClose callback provided - shows X button
+            </div>
+            {#if showDismissable}
+              <Alert
+                type="info"
+                title="Dismissable Alert"
+                message="Click the X to dismiss this alert."
+                onClose={resetDismissable}
+              />
+            {:else}
+              <button
+                class="text-blue-500 underline text-sm"
+                on:click={resetDismissable}
+              >
+                Show alert again
+              </button>
+            {/if}
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Real Usage Examples -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Real Usage Examples
+        </h2>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-primary-700 font-semibold mb-1">Payment Settings - Error State</div>
+            <Alert
+              type="danger"
+              title="Payment Failed"
+              message="We couldn't process your payment. Please check your card details and try again."
+            />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-primary-700 font-semibold mb-1">Profile - Missing Info Warning</div>
+            <Alert
+              type="warning"
+              title="Profile Incomplete"
+              message="Please complete your profile to start receiving show invitations."
+            />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-primary-700 font-semibold mb-1">Availability - Success Message</div>
+            <Alert
+              type="success"
+              title="Availability Updated"
+              message="Your availability has been saved and sent to the venue."
+            />
+          </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">Default</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">type</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">"info"</td>
+                <td class="py-2 text-xs">info, success, warning, danger</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">title</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">""</td>
+                <td class="py-2 text-xs">Bold heading text</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">message</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">""</td>
+                <td class="py-2 text-xs">Body text below title</td>
+              </tr>
+              <tr>
+                <td class="py-2 font-mono text-xs">onClose</td>
+                <td class="py-2 text-xs">function</td>
+                <td class="py-2 text-xs">undefined</td>
+                <td class="py-2 text-xs">If provided, shows dismiss button</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- SECTION: Consolidation Recommendations -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Consolidation Recommendations
+        </h2>
+
+        <div class="space-y-4 text-sm text-Text-Tartiary">
+          <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+            <h3 class="font-semibold text-green-700 dark:text-green-400 mb-2">Keep As-Is</h3>
+            <ul class="list-disc list-inside space-y-1">
+              <li>Clean, simple API with type, title, message props</li>
+              <li>Dark mode support already implemented</li>
+              <li>Slot support for custom content</li>
+              <li>Uses Flowbite under the hood (consistent styling)</li>
+            </ul>
+          </div>
+
+          <div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
+            <h3 class="font-semibold text-yellow-700 dark:text-yellow-400 mb-2">Minor Improvements</h3>
+            <ul class="list-disc list-inside space-y-1">
+              <li>Consider adding icon prop for custom icons</li>
+              <li>Add auto-dismiss timeout option</li>
+              <li>Consider border style variant (bordered vs filled)</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</Story>

package/dist/components/Alert/AlertAudit.stories.svelte.d.ts

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

package/dist/components/Alert/AlertAudit.stories.svelte.d.ts.map

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

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

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

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

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

package/dist/components/Badges/Badge.spec.js

@@ -0,0 +1,103 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, test, expect, vi } from 'vitest';
+import Badge from './Badge.svelte';
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const onClick = vi.fn();
+  const { component, container } = render(Badge, { props: { ...args } });
+  component.$on('click', onClick);
+  const badge = container.querySelector('div');
+  return {
+    user,
+    badge,
+    onClick,
+  };
+}
+
+describe('Badge Component Tests', () => {
+  test('Renders with default props', () => {
+    const { badge } = setupTest();
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveClass('badge');
+  });
+
+  test('Renders with different sizes', () => {
+    const { badge: smallBadge } = setupTest({ size: 'small' });
+    expect(smallBadge).toHaveClass('badge-sm');
+
+    const { badge: mediumBadge } = setupTest({ size: 'medium' });
+    expect(mediumBadge).toHaveClass('badge-md');
+
+    const { badge: largeBadge } = setupTest({ size: 'large' });
+    expect(largeBadge).toHaveClass('badge-lg');
+  });
+
+  test('Handles role variant props for colors', () => {
+    const { badge: hostBadge } = setupTest({ variant: 'host' });
+    expect(hostBadge).toHaveClass('badge-host');
+
+    const { badge: headlinerBadge } = setupTest({ variant: 'headliner' });
+    expect(headlinerBadge).toHaveClass('badge-headliner');
+
+    const { badge: featureBadge } = setupTest({ variant: 'feature' });
+    expect(featureBadge).toHaveClass('badge-feature');
+
+    const { badge: specialGuestBadge } = setupTest({ variant: 'special-guest' });
+    expect(specialGuestBadge).toHaveClass('badge-special-guest');
+
+    const { badge: openerBadge } = setupTest({ variant: 'opener' });
+    expect(openerBadge).toHaveClass('badge-opener');
+
+    const { badge: guestBadge } = setupTest({ variant: 'guest' });
+    expect(guestBadge).toHaveClass('badge-guest');
+
+    const { badge: teacherBadge } = setupTest({ variant: 'teacher' });
+    expect(teacherBadge).toHaveClass('badge-teacher');
+
+    const { badge: assistantBadge } = setupTest({ variant: 'assistant' });
+    expect(assistantBadge).toHaveClass('badge-assistant');
+  });
+
+  test('Handles status variant props for colors', () => {
+    const { badge: successBadge } = setupTest({ variant: 'success' });
+    expect(successBadge).toHaveClass('badge-success');
+
+    const { badge: warningBadge } = setupTest({ variant: 'warning' });
+    expect(warningBadge).toHaveClass('badge-warning');
+
+    const { badge: errorBadge } = setupTest({ variant: 'error' });
+    expect(errorBadge).toHaveClass('badge-error');
+
+    const { badge: infoBadge } = setupTest({ variant: 'info' });
+    expect(infoBadge).toHaveClass('badge-info');
+
+    const { badge: neutralBadge } = setupTest({ variant: 'neutral' });
+    expect(neutralBadge).toHaveClass('badge-neutral');
+  });
+
+  test('Falls back to neutral variant for unknown variants', () => {
+    const { badge } = setupTest({ variant: 'unknown' });
+    expect(badge).toHaveClass('badge-neutral');
+  });
+
+  test('Handles case-insensitive variants', () => {
+    const { badge: upperBadge } = setupTest({ variant: 'HOST' });
+    expect(upperBadge).toHaveClass('badge-host');
+
+    const { badge: mixedBadge } = setupTest({ variant: 'Headliner' });
+    expect(mixedBadge).toHaveClass('badge-headliner');
+  });
+
+  test('Falls back to medium size for unknown sizes', () => {
+    const { badge } = setupTest({ size: 'unknown' });
+    expect(badge).toHaveClass('badge-md');
+  });
+
+  test('Dispatches click event', async () => {
+    const { user, badge, onClick } = setupTest();
+    await user.click(badge);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

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

@@ -0,0 +1,87 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+
+  import Badge from "./Badge.svelte";
+
+  export const meta = {
+    title: "Components/Badge",
+    component: Badge,
+    argTypes: {
+      size: { control: "select", options: ["small", "medium", "large"] },
+      variant: {
+        control: "select",
+        options: [
+          "host",
+          "headliner",
+          "feature",
+          "special-guest",
+          "opener",
+          "guest",
+          "teacher",
+          "assistant",
+          "success",
+          "warning",
+          "error",
+          "info",
+          "neutral",
+        ],
+      },
+      className: { control: "text" },
+    },
+  };
+</script>
+
+<Template let:args>
+  <Badge {...args}>Badge Text</Badge>
+</Template>
+
+<!-- Size Variants -->
+<Story name="Small Badge">
+  <Badge size="small" variant="info">Small</Badge>
+</Story>
+
+<Story name="Medium Badge">
+  <Badge size="medium" variant="info">Medium</Badge>
+</Story>
+
+<Story name="Large Badge">
+  <Badge size="large" variant="info">Large</Badge>
+</Story>
+
+<!-- Status Variants -->
+<Story name="Success Status">
+  <Badge size="large" variant="success">Feb 1, 2024</Badge>
+</Story>
+
+<Story name="Warning Status">
+  <Badge size="large" variant="warning">Pending</Badge>
+</Story>
+
+<Story name="Error Status">
+  <Badge size="large" variant="error">Declined</Badge>
+</Story>
+
+<!-- Role Variants -->
+<Story name="Role Variants">
+  <div class="flex gap-2 flex-wrap">
+    <Badge variant="host">Host</Badge>
+    <Badge variant="headliner">Headliner</Badge>
+    <Badge variant="feature">Feature</Badge>
+    <Badge variant="special-guest">Special Guest</Badge>
+    <Badge variant="opener">Opener</Badge>
+    <Badge variant="guest">Guest</Badge>
+    <Badge variant="teacher">Teacher</Badge>
+    <Badge variant="assistant">Assistant</Badge>
+  </div>
+</Story>
+
+<!-- All Status Variants -->
+<Story name="All Status Variants">
+  <div class="flex gap-2 flex-wrap">
+    <Badge variant="success">Success</Badge>
+    <Badge variant="warning">Warning</Badge>
+    <Badge variant="error">Error</Badge>
+    <Badge variant="info">Info</Badge>
+    <Badge variant="neutral">Neutral</Badge>
+  </div>
+</Story>

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

@@ -0,0 +1,47 @@
+export namespace meta {
+    export let title: string;
+    export { Badge as component };
+    export namespace argTypes {
+        namespace size {
+            let control: string;
+            let options: string[];
+        }
+        namespace variant {
+            let control_1: string;
+            export { control_1 as control };
+            let options_1: string[];
+            export { options_1 as options };
+        }
+        namespace className {
+            let control_2: string;
+            export { control_2 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  BadgeProps */
+/** @typedef {typeof __propDef.events}  BadgeEvents */
+/** @typedef {typeof __propDef.slots}  BadgeSlots */
+export default class Badge extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BadgeProps = typeof __propDef.props;
+export type BadgeEvents = typeof __propDef.events;
+export type BadgeSlots = 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=Badge.stories.svelte.d.ts.map

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

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