@getmicdrop/svelte-components 1.0.1 → 1.0.3

package/dist/components/StatusIndicator/StatusIndicator.spec.js

@@ -0,0 +1,129 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import StatusIndicator from './StatusIndicator.svelte';
+
+describe('StatusIndicator', () => {
+  describe('idle state', () => {
+    it('renders empty container when status is idle', () => {
+      const { container } = render(StatusIndicator, { status: 'idle' });
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator).toBeTruthy();
+      expect(indicator.children.length).toBe(0);
+    });
+
+    it('uses default status of idle', () => {
+      const { container } = render(StatusIndicator);
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator.children.length).toBe(0);
+    });
+  });
+
+  describe('loading state', () => {
+    it('renders spinner when status is loading', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner).toBeTruthy();
+    });
+
+    it('renders spinner SVG with track and head circles', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.querySelector('svg')).toBeTruthy();
+      expect(spinner.querySelector('.spinner-track')).toBeTruthy();
+      expect(spinner.querySelector('.spinner-head')).toBeTruthy();
+    });
+
+    it('applies size to spinner', () => {
+      const { container } = render(StatusIndicator, { status: 'loading', size: 64 });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.style.width).toBe('64px');
+      expect(spinner.style.height).toBe('64px');
+    });
+  });
+
+  describe('success state', () => {
+    it('renders success circle when status is success', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      const success = container.querySelector('.success-circle');
+      expect(success).toBeTruthy();
+    });
+
+    it('renders success SVG with background and checkmark', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      const success = container.querySelector('.success-circle');
+      expect(success.querySelector('svg')).toBeTruthy();
+      expect(success.querySelector('.success-bg')).toBeTruthy();
+      expect(success.querySelector('.checkmark')).toBeTruthy();
+    });
+
+    it('applies size to success circle', () => {
+      const { container } = render(StatusIndicator, { status: 'success', size: 32 });
+      const success = container.querySelector('.success-circle');
+      expect(success.style.width).toBe('32px');
+      expect(success.style.height).toBe('32px');
+    });
+  });
+
+  describe('error state', () => {
+    it('renders error circle when status is error', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      const error = container.querySelector('.error-circle');
+      expect(error).toBeTruthy();
+    });
+
+    it('renders error SVG with background and X lines', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      const error = container.querySelector('.error-circle');
+      expect(error.querySelector('svg')).toBeTruthy();
+      expect(error.querySelector('.error-bg')).toBeTruthy();
+      const xLines = error.querySelectorAll('.error-x');
+      expect(xLines.length).toBe(2);
+    });
+
+    it('applies size to error circle', () => {
+      const { container } = render(StatusIndicator, { status: 'error', size: 24 });
+      const error = container.querySelector('.error-circle');
+      expect(error.style.width).toBe('24px');
+      expect(error.style.height).toBe('24px');
+    });
+  });
+
+  describe('size prop', () => {
+    it('uses default size of 48px', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator.style.width).toBe('48px');
+      expect(indicator.style.height).toBe('48px');
+    });
+
+    it('accepts custom size', () => {
+      const { container } = render(StatusIndicator, { status: 'loading', size: 100 });
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator.style.width).toBe('100px');
+      expect(indicator.style.height).toBe('100px');
+    });
+  });
+
+  describe('state transitions', () => {
+    it('only renders one state at a time - loading', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      expect(container.querySelector('.spinner')).toBeTruthy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
+    });
+
+    it('only renders one state at a time - success', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeTruthy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
+    });
+
+    it('only renders one state at a time - error', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeTruthy();
+    });
+  });
+});

package/dist/components/StatusIndicator/StatusIndicator.svelte

@@ -0,0 +1,206 @@
+<script>
+  /**
+   * StatusIndicator - Animated spinner/checkmark/error indicator
+   *
+   * Shows loading spinner, success checkmark, or error X with smooth animations.
+   * Used in modals to show action progress and result.
+   */
+  export let status = "idle"; // "idle" | "loading" | "success" | "error"
+  export let size = 48; // Size in pixels
+</script>
+
+<div
+  class="status-indicator"
+  style="width: {size}px; height: {size}px;"
+>
+  {#if status === "loading"}
+    <div class="spinner" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="spinner-track"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="4"
+        />
+        <circle
+          class="spinner-head"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="4"
+        />
+      </svg>
+    </div>
+  {:else if status === "success"}
+    <div class="success-circle" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="success-bg"
+          cx="25"
+          cy="25"
+          r="23"
+          fill="none"
+          stroke-width="2"
+        />
+        <polyline
+          class="checkmark"
+          points="15,26 22,33 35,18"
+          fill="none"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  {:else if status === "error"}
+    <div class="error-circle" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="error-bg"
+          cx="25"
+          cy="25"
+          r="23"
+          fill="none"
+          stroke-width="2"
+        />
+        <line
+          class="error-x"
+          x1="17" y1="17" x2="33" y2="33"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+        <line
+          class="error-x error-x-2"
+          x1="33" y1="17" x2="17" y2="33"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+      </svg>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .status-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Spinner */
+  .spinner svg {
+    animation: rotate 1s linear infinite;
+  }
+
+  .spinner-track {
+    stroke: hsl(var(--Stroke-Primary, 220 13% 91%));
+  }
+
+  .spinner-head {
+    stroke: hsl(var(--primary-700, 221 78% 48%));
+    stroke-dasharray: 80, 200;
+    stroke-dashoffset: 0;
+    animation: dash 1.2s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 80, 200;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 80, 200;
+      stroke-dashoffset: -125;
+    }
+  }
+
+  /* Success */
+  .success-circle {
+    animation: pop-in 300ms ease-out;
+  }
+
+  .success-bg {
+    stroke: #16a34a;
+    fill: #f0fdf4;
+  }
+
+  .checkmark {
+    stroke: #16a34a;
+    stroke-dasharray: 40;
+    stroke-dashoffset: 40;
+    animation: draw-check 400ms ease-out 100ms forwards;
+  }
+
+  @keyframes pop-in {
+    0% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes draw-check {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  /* Error */
+  .error-circle {
+    animation: pop-in 300ms ease-out;
+  }
+
+  .error-bg {
+    stroke: #dc2626;
+    fill: #fef2f2;
+  }
+
+  .error-x {
+    stroke: #dc2626;
+    stroke-dasharray: 25;
+    stroke-dashoffset: 25;
+    animation: draw-x 300ms ease-out 100ms forwards;
+  }
+
+  .error-x-2 {
+    animation-delay: 200ms;
+  }
+
+  @keyframes draw-x {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  /* Dark mode */
+  :global(.dark) .spinner-track {
+    stroke: hsl(var(--Stroke-Primary, 215 28% 25%));
+  }
+
+  :global(.dark) .success-bg {
+    fill: rgba(22, 163, 74, 0.15);
+  }
+
+  :global(.dark) .error-bg {
+    fill: rgba(220, 38, 38, 0.15);
+  }
+</style>

package/dist/components/StatusIndicator/StatusIndicator.svelte.d.ts

@@ -0,0 +1,28 @@
+/** @typedef {typeof __propDef.props}  StatusIndicatorProps */
+/** @typedef {typeof __propDef.events}  StatusIndicatorEvents */
+/** @typedef {typeof __propDef.slots}  StatusIndicatorSlots */
+export default class StatusIndicator extends SvelteComponent<{
+    size?: number | undefined;
+    status?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type StatusIndicatorProps = typeof __propDef.props;
+export type StatusIndicatorEvents = typeof __propDef.events;
+export type StatusIndicatorSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+        status?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=StatusIndicator.svelte.d.ts.map

package/dist/components/StatusIndicator/StatusIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/StatusIndicator/StatusIndicator.svelte.js"],"names":[],"mappings":"AAmDA,8DAA8D;AAC9D,gEAAgE;AAChE,8DAA8D;AAE9D;;;;;;CACC;mCALa,OAAO,SAAS,CAAC,KAAK;oCACtB,OAAO,SAAS,CAAC,MAAM;mCACvB,OAAO,SAAS,CAAC,KAAK;gCArDJ,QAAQ;AAkDxC;;;;;;;;;;;EAAmG"}

package/dist/components/Toaster/Toaster.stories.svelte

@@ -0,0 +1,61 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import { Toaster } from "svelte-sonner";
+  import { showToast } from "../../../stores/toaster";
+
+  export const meta = {
+    title: "Components/Toaster",
+  };
+
+  function showSuccessToast() {
+    showToast("Action completed successfully!", "success");
+  }
+
+  function showErrorToast() {
+    showToast("An error occurred. Please try again.", "error");
+  }
+</script>
+
+<Story name="Trigger Success Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-BG-Primary border border-stroke-Primary",
+        classes: {
+          error: "text-red-600",
+          success: "text-green-600",
+        },
+      }}
+    />
+    <button
+      on:click={showSuccessToast}
+      class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+    >
+      Show Success Toast
+    </button>
+    <p class="mt-4 text-sm text-gray-600">Click the button to see a success toast notification</p>
+  </div>
+</Story>
+
+<Story name="Trigger Error Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-BG-Primary border border-stroke-Primary",
+        classes: {
+          error: "text-red-600",
+          success: "text-green-600",
+        },
+      }}
+    />
+    <button
+      on:click={showErrorToast}
+      class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
+    >
+      Show Error Toast
+    </button>
+    <p class="mt-4 text-sm text-gray-600">Click the button to see an error toast notification</p>
+  </div>
+</Story>

package/dist/components/Toaster/Toaster.stories.svelte.d.ts

@@ -0,0 +1,29 @@
+export namespace meta {
+    let title: string;
+}
+/** @typedef {typeof __propDef.props}  ToasterProps */
+/** @typedef {typeof __propDef.events}  ToasterEvents */
+/** @typedef {typeof __propDef.slots}  ToasterSlots */
+export default class Toaster extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ToasterProps = typeof __propDef.props;
+export type ToasterEvents = typeof __propDef.events;
+export type ToasterSlots = 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=Toaster.stories.svelte.d.ts.map

package/dist/components/Toaster/Toaster.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Toaster/Toaster.stories.svelte.js"],"names":[],"mappings":";;;AAuDA,sDAAsD;AACtD,wDAAwD;AACxD,sDAAsD;AAEtD;;;;;CACC;2BALa,OAAO,SAAS,CAAC,KAAK;4BACtB,OAAO,SAAS,CAAC,MAAM;2BACvB,OAAO,SAAS,CAAC,KAAK;gCAzDJ,QAAQ;AAsDxC;;;;;;;;;;EAAgF"}

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

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

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

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

package/dist/components/Toggle.spec.js

@@ -0,0 +1,158 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Toggle from './Toggle.svelte';
+
+describe('Toggle Component', () => {
+  it('renders a toggle button', () => {
+    const { container } = render(Toggle);
+    const button = container.querySelector('button');
+    expect(button).toBeTruthy();
+    expect(button.getAttribute('role')).toBe('switch');
+  });
+
+  it('has aria-checked false by default', () => {
+    const { container } = render(Toggle);
+    const button = container.querySelector('button');
+    expect(button.getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('has aria-checked true when checked', () => {
+    const { container } = render(Toggle, { props: { checked: true } });
+    const button = container.querySelector('button');
+    expect(button.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('toggles checked state on click', async () => {
+    const { container, component } = render(Toggle);
+    const button = container.querySelector('button');
+
+    let changeEvent = null;
+    component.$on('change', (e) => {
+      changeEvent = e;
+    });
+
+    await fireEvent.click(button);
+
+    expect(changeEvent).toBeTruthy();
+    expect(changeEvent.detail.checked).toBe(true);
+    expect(button.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('toggles from checked to unchecked on click', async () => {
+    const { container, component } = render(Toggle, { props: { checked: true } });
+    const button = container.querySelector('button');
+
+    let changeEvent = null;
+    component.$on('change', (e) => {
+      changeEvent = e;
+    });
+
+    await fireEvent.click(button);
+
+    expect(changeEvent.detail.checked).toBe(false);
+    expect(button.getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('does not toggle when disabled', async () => {
+    const { container, component } = render(Toggle, { props: { disabled: true } });
+    const button = container.querySelector('button');
+
+    let changeEventCalled = false;
+    component.$on('change', () => {
+      changeEventCalled = true;
+    });
+
+    await fireEvent.click(button);
+
+    expect(changeEventCalled).toBe(false);
+    expect(button.getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('has toggle-checked class when checked', () => {
+    const { container } = render(Toggle, { props: { checked: true } });
+    const button = container.querySelector('button');
+    expect(button.classList.contains('toggle-checked')).toBe(true);
+  });
+
+  it('does not have toggle-checked class when unchecked', () => {
+    const { container } = render(Toggle, { props: { checked: false } });
+    const button = container.querySelector('button');
+    expect(button.classList.contains('toggle-checked')).toBe(false);
+  });
+
+  it('has toggle-disabled class when disabled', () => {
+    const { container } = render(Toggle, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button.classList.contains('toggle-disabled')).toBe(true);
+  });
+
+  it('has toggle-thumb element', () => {
+    const { container } = render(Toggle);
+    const thumb = container.querySelector('.toggle-thumb');
+    expect(thumb).toBeTruthy();
+  });
+
+  it('toggles on Enter key press', async () => {
+    const { container, component } = render(Toggle);
+    const button = container.querySelector('button');
+
+    let changeEvent = null;
+    component.$on('change', (e) => {
+      changeEvent = e;
+    });
+
+    await fireEvent.keyDown(button, { key: 'Enter' });
+
+    expect(changeEvent).toBeTruthy();
+    expect(changeEvent.detail.checked).toBe(true);
+  });
+
+  it('toggles on Space key press', async () => {
+    const { container, component } = render(Toggle);
+    const button = container.querySelector('button');
+
+    let changeEvent = null;
+    component.$on('change', (e) => {
+      changeEvent = e;
+    });
+
+    await fireEvent.keyDown(button, { key: ' ' });
+
+    expect(changeEvent).toBeTruthy();
+    expect(changeEvent.detail.checked).toBe(true);
+  });
+
+  it('does not toggle on other key press', async () => {
+    const { container, component } = render(Toggle);
+    const button = container.querySelector('button');
+
+    let changeEventCalled = false;
+    component.$on('change', () => {
+      changeEventCalled = true;
+    });
+
+    await fireEvent.keyDown(button, { key: 'Tab' });
+
+    expect(changeEventCalled).toBe(false);
+  });
+
+  it('does not toggle on keypress when disabled', async () => {
+    const { container, component } = render(Toggle, { props: { disabled: true } });
+    const button = container.querySelector('button');
+
+    let changeEventCalled = false;
+    component.$on('change', () => {
+      changeEventCalled = true;
+    });
+
+    await fireEvent.keyDown(button, { key: 'Enter' });
+
+    expect(changeEventCalled).toBe(false);
+  });
+
+  it('has type="button" attribute', () => {
+    const { container } = render(Toggle);
+    const button = container.querySelector('button');
+    expect(button.getAttribute('type')).toBe('button');
+  });
+});