@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/components/Button/ButtonAudit.stories.svelte

@@ -0,0 +1,333 @@
+<script context="module">
+  export const meta = {
+    title: "Audit/Button Variants",
+    component: null,
+    parameters: {
+      layout: "padded",
+    },
+  };
+</script>
+
+<script>
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Button from "./Button.svelte";
+
+  // All button variants in the codebase after consolidation
+  const buttonVariants = [
+    // ========== BLUE SOLID (default) ==========
+    {
+      id: 1,
+      category: "Blue Solid (Full Width)",
+      label: "Sign in / Send code / Verify / Continue",
+      props: { size: "full" },
+      containerWidth: "400px",
+      sources: [
+        { file: "login/+page.svelte", context: "Sign in, Send reset link, Send login link" },
+        { file: "auth/.../firstTime/[email]/+page.svelte", context: "Complete Setup, Go to Login" },
+        { file: "verify-phone/+page.svelte", context: "Send code, Verify, Continue" },
+      ],
+    },
+    {
+      id: 2,
+      category: "Blue Solid (Fixed Width)",
+      label: "Save / Accept",
+      props: { className: "min-w-[150px]" },
+      containerWidth: "auto",
+      sources: [
+        { file: "profile/+page.svelte", context: "Save changes" },
+        { file: "notification-settings/+page.svelte", context: "Save changes" },
+        { file: "payment-settings/*.svelte", context: "Save changes" },
+        { file: "ShowItemCard.svelte", context: "Accept invitation" },
+      ],
+    },
+
+    // ========== GRAY OUTLINE ==========
+    {
+      id: 10,
+      category: "Gray Outline (Full Width)",
+      label: "Send me a login link",
+      props: { variant: "gray-outline", size: "full" },
+      containerWidth: "400px",
+      sources: [
+        { file: "login/+page.svelte", context: "Send me a login link" },
+      ],
+    },
+    {
+      id: 11,
+      category: "Gray Outline (Fixed Width)",
+      label: "Cancel / Browse files",
+      props: { variant: "gray-outline", className: "min-w-[150px]" },
+      containerWidth: "auto",
+      sources: [
+        { file: "profile/+page.svelte", context: "Cancel, Browse files" },
+        { file: "notification-settings/+page.svelte", context: "Cancel" },
+        { file: "payment-settings/*.svelte", context: "Cancel" },
+        { file: "ShowItemCard.svelte", context: "Modal cancel buttons" },
+      ],
+    },
+
+    // ========== BLUE OUTLINE ==========
+    {
+      id: 20,
+      category: "Blue Outline (Full Width)",
+      label: "View upcoming shows",
+      props: { variant: "blue-outline", className: "w-full" },
+      containerWidth: "300px",
+      sources: [
+        { file: "+page.svelte (home)", context: "Dashboard shortcuts" },
+      ],
+    },
+    {
+      id: 21,
+      category: "Blue Outline",
+      label: "View details / Message",
+      props: { variant: "blue-outline", size: "lg" },
+      containerWidth: "auto",
+      sources: [
+        { file: "QuarterView.svelte", context: "Today button" },
+        { file: "ShowItemCard.svelte", context: "View details, Message" },
+      ],
+    },
+
+    // ========== RED SOLID ==========
+    {
+      id: 30,
+      category: "Red Solid",
+      label: "Decline / Set up",
+      props: { variant: "red-solid" },
+      containerWidth: "auto",
+      sources: [
+        { file: "ShowItemCard.svelte", context: "Decline invitation" },
+        { file: "VenueItemCard.svelte", context: "Set up" },
+      ],
+    },
+
+    // ========== RED OUTLINE ==========
+    {
+      id: 40,
+      category: "Red Outline",
+      label: "Decline booking / Yes, cancel / Leave",
+      props: { variant: "red-outline" },
+      containerWidth: "auto",
+      sources: [
+        { file: "ShowItemCard.svelte", context: "Decline booking, Cancel booking, Leave venue" },
+        { file: "ShowDetails.svelte", context: "Cancel booking" },
+        { file: "VenueItemCard.svelte", context: "Leave venue" },
+        { file: "ConfirmationModal", context: "Destructive confirmations" },
+      ],
+    },
+
+    // ========== RED TEXT ==========
+    {
+      id: 50,
+      category: "Red Text",
+      label: "Sign out / Remove method",
+      props: { variant: "red-text" },
+      containerWidth: "auto",
+      sources: [
+        { file: "Sidebar.svelte", context: "Sign out" },
+        { file: "payment-settings/*.svelte", context: "Remove payment method" },
+      ],
+    },
+
+    // ========== NATIVE BUTTONS (not using Button component) ==========
+    {
+      id: 60,
+      category: "Native Text Link",
+      label: "Forgot your password? / Return to sign in",
+      props: { _native: true, className: "text-sm font-medium text-blue-600 hover:text-blue-500 transition-colors cursor-pointer" },
+      containerWidth: "auto",
+      sources: [
+        { file: "login/+page.svelte", context: "Text links in login flow" },
+      ],
+    },
+  ];
+
+  $: categories = [...new Set(buttonVariants.map(v => v.category))];
+</script>
+
+<Story name="All Button Variants">
+  <div class="space-y-8 p-4 max-w-4xl">
+    <div class="mb-8">
+      <h1 class="text-2xl font-bold mb-2">Button Audit</h1>
+      <p class="text-gray-600">
+        All button variants in the performers portal using the new API.
+        The dashed border shows the simulated container width.
+      </p>
+    </div>
+
+    {#each buttonVariants as variant}
+      <div class="border rounded-lg overflow-hidden">
+        <div class="bg-gray-100 px-4 py-2 font-semibold text-sm">
+          {variant.category}
+        </div>
+
+        <div class="p-4 flex flex-col gap-4">
+          <!-- Button Preview -->
+          <div class="flex items-start gap-4">
+            <div
+              class="border-2 border-dashed border-gray-300 p-3 rounded bg-white flex-shrink-0"
+              style="width: {variant.containerWidth === 'auto' ? 'fit-content' : variant.containerWidth}; min-width: 120px;"
+            >
+              {#if variant.props._native}
+                <button class={variant.props.className}>
+                  {variant.label}
+                </button>
+              {:else}
+                <Button {...variant.props}>
+                  {variant.label}
+                </Button>
+              {/if}
+            </div>
+            <div class="text-xs text-gray-400 pt-1">
+              container: {variant.containerWidth}
+            </div>
+          </div>
+
+          <!-- Props display -->
+          <div class="font-mono text-xs bg-gray-100 p-2 rounded overflow-x-auto">
+            {#if variant.props._native}
+              <span class="text-orange-600">&lt;button class="..."&gt;</span>
+            {:else}
+              <span class="text-blue-600">&lt;Button</span>
+              {#each Object.entries(variant.props) as [key, value]}
+                {#if typeof value === "string"}
+                  <span class="text-purple-600"> {key}="{value}"</span>
+                {/if}
+              {/each}
+              <span class="text-blue-600">&gt;</span>
+            {/if}
+          </div>
+
+          <!-- Source files -->
+          <div class="text-xs text-gray-500">
+            <span class="font-medium">Used in:</span>
+            <ul class="mt-1 space-y-0.5">
+              {#each variant.sources as source}
+                <li>
+                  <code class="bg-gray-100 px-1 rounded">{source.file}</code>
+                  <span class="text-gray-400">— {source.context}</span>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        </div>
+      </div>
+    {/each}
+
+    <!-- Summary -->
+    <div class="mt-8 border-2 border-green-300 rounded-lg p-4 bg-green-50">
+      <h2 class="text-lg font-semibold mb-3">Button API Summary</h2>
+      <div class="text-sm space-y-4">
+        <div>
+          <h3 class="font-medium mb-2">Variants:</h3>
+          <ul class="space-y-1 ml-4">
+            <li><code class="bg-white px-1 rounded">variant="blue-solid"</code> — Default primary action (or omit variant)</li>
+            <li><code class="bg-white px-1 rounded">variant="blue-outline"</code> — Secondary action with blue accent</li>
+            <li><code class="bg-white px-1 rounded">variant="gray-outline"</code> — De-emphasized secondary action</li>
+            <li><code class="bg-white px-1 rounded">variant="red-solid"</code> — Destructive primary action</li>
+            <li><code class="bg-white px-1 rounded">variant="red-outline"</code> — Destructive secondary action</li>
+            <li><code class="bg-white px-1 rounded">variant="red-text"</code> — Subtle destructive action</li>
+          </ul>
+        </div>
+        <div>
+          <h3 class="font-medium mb-2">Sizes:</h3>
+          <ul class="space-y-1 ml-4">
+            <li><code class="bg-white px-1 rounded">size="full"</code> — Full width</li>
+            <li><code class="bg-white px-1 rounded">size="lg"</code> — Large</li>
+            <li><code class="bg-white px-1 rounded">size="md"</code> — Medium</li>
+            <li><code class="bg-white px-1 rounded">size="sm"</code> — Small</li>
+            <li><code class="bg-white px-1 rounded">size="xs"</code> — Extra small</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="All Variants Grid">
+  <div class="p-6 space-y-8">
+    <h2 class="text-xl font-bold">All Button Variants</h2>
+
+    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+      <div class="space-y-2">
+        <p class="text-xs text-gray-500 font-medium">blue-solid (default)</p>
+        <Button>Primary Action</Button>
+      </div>
+      <div class="space-y-2">
+        <p class="text-xs text-gray-500 font-medium">blue-outline</p>
+        <Button variant="blue-outline">View Details</Button>
+      </div>
+      <div class="space-y-2">
+        <p class="text-xs text-gray-500 font-medium">gray-outline</p>
+        <Button variant="gray-outline">Cancel</Button>
+      </div>
+      <div class="space-y-2">
+        <p class="text-xs text-gray-500 font-medium">red-solid</p>
+        <Button variant="red-solid">Delete</Button>
+      </div>
+      <div class="space-y-2">
+        <p class="text-xs text-gray-500 font-medium">red-outline</p>
+        <Button variant="red-outline">Decline</Button>
+      </div>
+      <div class="space-y-2">
+        <p class="text-xs text-gray-500 font-medium">red-text</p>
+        <Button variant="red-text">Sign out</Button>
+      </div>
+    </div>
+
+    <h2 class="text-xl font-bold mt-8">All Sizes</h2>
+
+    <div class="space-y-4">
+      <div class="max-w-md">
+        <p class="text-xs text-gray-500 font-medium mb-2">size="full"</p>
+        <Button size="full">Full Width Button</Button>
+      </div>
+      <div class="flex flex-wrap gap-4 items-end">
+        <div class="space-y-2">
+          <p class="text-xs text-gray-500 font-medium">size="lg"</p>
+          <Button size="lg">Large</Button>
+        </div>
+        <div class="space-y-2">
+          <p class="text-xs text-gray-500 font-medium">size="md"</p>
+          <Button size="md">Medium</Button>
+        </div>
+        <div class="space-y-2">
+          <p class="text-xs text-gray-500 font-medium">(default)</p>
+          <Button>Default</Button>
+        </div>
+        <div class="space-y-2">
+          <p class="text-xs text-gray-500 font-medium">size="sm"</p>
+          <Button size="sm">Small</Button>
+        </div>
+        <div class="space-y-2">
+          <p class="text-xs text-gray-500 font-medium">size="xs"</p>
+          <Button size="xs">XS</Button>
+        </div>
+      </div>
+    </div>
+
+    <h2 class="text-xl font-bold mt-8">States</h2>
+
+    <div class="flex flex-wrap gap-4">
+      <div class="space-y-2">
+        <p class="text-xs text-gray-500 font-medium">disabled</p>
+        <Button disabled>Disabled</Button>
+      </div>
+      <div class="space-y-2">
+        <p class="text-xs text-gray-500 font-medium">loading</p>
+        <Button loading>Loading</Button>
+      </div>
+      <div class="space-y-2">
+        <p class="text-xs text-gray-500 font-medium">success</p>
+        <Button success>Success</Button>
+      </div>
+    </div>
+  </div>
+</Story>
+
+<style>
+  code {
+    font-size: 0.75rem;
+  }
+</style>

package/dist/components/Button/ButtonAudit.stories.svelte.d.ts

@@ -0,0 +1,33 @@
+export namespace meta {
+    let title: string;
+    let component: null;
+    namespace parameters {
+        let layout: string;
+    }
+}
+/** @typedef {typeof __propDef.props}  ButtonAuditProps */
+/** @typedef {typeof __propDef.events}  ButtonAuditEvents */
+/** @typedef {typeof __propDef.slots}  ButtonAuditSlots */
+export default class ButtonAudit extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ButtonAuditProps = typeof __propDef.props;
+export type ButtonAuditEvents = typeof __propDef.events;
+export type ButtonAuditSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ButtonAudit.stories.svelte.d.ts.map

package/dist/components/Button/ButtonAudit.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button/ButtonAudit.stories.svelte.js"],"names":[],"mappings":";;;;;;;AAiVA,0DAA0D;AAC1D,4DAA4D;AAC5D,0DAA0D;AAE1D;;;;;CACC;+BALa,OAAO,SAAS,CAAC,KAAK;gCACtB,OAAO,SAAS,CAAC,MAAM;+BACvB,OAAO,SAAS,CAAC,KAAK;gCAnVJ,QAAQ;AAgVxC;;;;;;;;;;EAAgF"}

package/dist/components/Button/ButtonSaveDemo.spec.d.ts

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

package/dist/components/Button/ButtonSaveDemo.spec.d.ts.map

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

package/dist/components/Button/ButtonSaveDemo.spec.js

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import ButtonSaveDemo from './ButtonSaveDemo.svelte';
+
+describe('ButtonSaveDemo', () => {
+  // Helper to get the Save button specifically (not the Reset button)
+  const getSaveButton = () => screen.getByRole('button', { name: /save|saving|saved/i });
+
+  describe('rendering', () => {
+    it('renders save button', () => {
+      render(ButtonSaveDemo);
+      expect(screen.getByText('Save')).toBeInTheDocument();
+    });
+
+    it('renders as button element', () => {
+      render(ButtonSaveDemo);
+      expect(getSaveButton()).toBeInTheDocument();
+    });
+
+    it('renders reset button', () => {
+      render(ButtonSaveDemo);
+      expect(screen.getByText(/Reset/)).toBeInTheDocument();
+    });
+  });
+
+  describe('save states', () => {
+    it('shows saving state when clicked', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+
+      // Button should now be in loading state (disabled)
+      expect(button).toHaveAttribute('disabled');
+    });
+  });
+
+  describe('button disabled state', () => {
+    it('is disabled while saving', async () => {
+      render(ButtonSaveDemo);
+      const button = getSaveButton();
+
+      await fireEvent.click(button);
+
+      expect(button).toHaveAttribute('disabled');
+    });
+  });
+});

package/dist/components/Button/ButtonSaveDemo.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Button from "./Button.svelte";
+
+  let loading = false;
+  let success = false;
+
+  function handleSave() {
+    if (loading || success) return;
+    loading = true;
+    setTimeout(() => {
+      loading = false;
+      success = true;
+    }, 1000);
+  }
+
+  function resetState() {
+    success = false;
+  }
+</script>
+
+<div class="flex gap-4 items-center">
+  <Button on:click={handleSave} {loading} {success}>Save</Button>
+  <button class="text-sm text-gray-500 underline" on:click={resetState}>Reset (simulates user edit)</button>
+</div>

package/dist/components/Button/ButtonSaveDemo.svelte.d.ts

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

package/dist/components/Button/ButtonSaveDemo.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSaveDemo.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button/ButtonSaveDemo.svelte.js"],"names":[],"mappings":"AAiCA,6DAA6D;AAC7D,+DAA+D;AAC/D,6DAA6D;AAE7D;;;;;CACC;kCALa,OAAO,SAAS,CAAC,KAAK;mCACtB,OAAO,SAAS,CAAC,MAAM;kCACvB,OAAO,SAAS,CAAC,KAAK;gCAnCJ,QAAQ;AAgCxC;;;;;;;;;;EAAgF"}

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

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

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

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

package/dist/components/Calendar/Calendar.spec.js

@@ -0,0 +1,131 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+
+// Mock FullCalendar since it's complex and requires DOM
+vi.mock('@fullcalendar/core', () => ({
+  Calendar: vi.fn().mockImplementation(() => ({
+    render: vi.fn(),
+    destroy: vi.fn(),
+    next: vi.fn(),
+    prev: vi.fn(),
+    today: vi.fn(),
+    getDate: vi.fn(() => new Date()),
+    changeView: vi.fn(),
+  })),
+}));
+
+vi.mock('@fullcalendar/daygrid', () => ({
+  default: {},
+}));
+
+vi.mock('@fullcalendar/interaction', () => ({
+  default: {},
+}));
+
+vi.mock('$app/environment', () => ({
+  browser: true,
+}));
+
+// Import after mocks
+import Calendar from './Calendar.svelte';
+
+describe('Calendar', () => {
+  describe('basic rendering', () => {
+    it('renders calendar container', () => {
+      const { container } = render(Calendar);
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders with default variant availability', () => {
+      const { container } = render(Calendar);
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+
+  describe('props', () => {
+    it('accepts variant prop', () => {
+      const { container } = render(Calendar, { variant: 'scheduler' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts view prop', () => {
+      const { container } = render(Calendar, { view: 'dayGridMonth' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts events prop', () => {
+      const events = [
+        { title: 'Event 1', start: '2025-01-01' },
+        { title: 'Event 2', start: '2025-01-02' },
+      ];
+      const { container } = render(Calendar, { events });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts selectedDates prop', () => {
+      const selectedDates = ['2025-01-01', '2025-01-02'];
+      const { container } = render(Calendar, { selectedDates });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts compact prop', () => {
+      const { container } = render(Calendar, { compact: true });
+      // Component renders with compact mode - verify container exists
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts readOnly prop', () => {
+      const { container } = render(Calendar, { readOnly: true });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts showNavigation prop', () => {
+      const { container } = render(Calendar, { showNavigation: false });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts showLegend prop', () => {
+      const { container } = render(Calendar, { showLegend: false });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+
+  describe('variant styles', () => {
+    it('renders availability variant', () => {
+      const { container } = render(Calendar, { variant: 'availability' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders scheduler variant', () => {
+      const { container } = render(Calendar, { variant: 'scheduler' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders display variant', () => {
+      const { container } = render(Calendar, { variant: 'display' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders public variant', () => {
+      const { container } = render(Calendar, { variant: 'public' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+
+  describe('saveStatus states', () => {
+    it('handles saving status', () => {
+      const { container } = render(Calendar, { saveStatus: 'saving' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('handles saved status', () => {
+      const { container } = render(Calendar, { saveStatus: 'saved' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('handles empty status', () => {
+      const { container } = render(Calendar, { saveStatus: '' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+});