@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/components/PageLoader.spec.js

@@ -0,0 +1,54 @@
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import PageLoader from "./PageLoader.svelte";
+
+describe("PageLoader Component Tests", () => {
+  test("Shows spinner when loading", () => {
+    render(PageLoader, { props: { isLoading: true } });
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  test("Shows error alert when error is set", () => {
+    render(PageLoader, {
+      props: { isLoading: false, error: "Something went wrong" },
+    });
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+  });
+
+  test("Shows custom error title", () => {
+    render(PageLoader, {
+      props: {
+        isLoading: false,
+        error: "Failed",
+        errorTitle: "Loading Error",
+      },
+    });
+    expect(screen.getByText("Loading Error")).toBeInTheDocument();
+  });
+
+  test("Does not show spinner when not loading", () => {
+    render(PageLoader, { props: { isLoading: false } });
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+
+  test("Does not show error when no error", () => {
+    render(PageLoader, { props: { isLoading: false, error: null } });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  test("Has custom min height class", () => {
+    const { container } = render(PageLoader, {
+      props: { isLoading: true, minHeight: "h-96" },
+    });
+    const loadingDiv = container.querySelector(".h-96");
+    expect(loadingDiv).toBeInTheDocument();
+  });
+
+  test("Shows loading message when provided", () => {
+    render(PageLoader, {
+      props: { isLoading: true, loadingMessage: "Please wait..." },
+    });
+    expect(screen.getByText("Please wait...")).toBeInTheDocument();
+  });
+});

package/dist/components/PageLoader.stories.svelte

@@ -0,0 +1,145 @@
+<script context="module">
+  import PageLoader from './PageLoader.svelte';
+
+  export const meta = {
+    title: 'Components/PageLoader',
+    component: PageLoader,
+    tags: ['autodocs'],
+    argTypes: {
+      isLoading: { control: 'boolean' },
+      error: { control: 'text' },
+      loadingMessage: { control: 'text' },
+      errorTitle: { control: 'text' },
+      showRetry: { control: 'boolean' },
+    },
+  };
+</script>
+
+<script>
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+
+  let loading = true;
+  let hasError = false;
+
+  function simulateLoading() {
+    loading = true;
+    hasError = false;
+    setTimeout(() => {
+      loading = false;
+    }, 2000);
+  }
+
+  function simulateError() {
+    loading = true;
+    hasError = false;
+    setTimeout(() => {
+      loading = false;
+      hasError = true;
+    }, 1000);
+  }
+</script>
+
+<Template let:args>
+  <PageLoader {...args}>
+    <div class="p-8 text-center">
+      <h2 class="text-2xl font-bold">Content Loaded!</h2>
+      <p class="text-gray-600 mt-2">This is the actual page content.</p>
+    </div>
+  </PageLoader>
+</Template>
+
+<Story
+  name="Loading State"
+  args={{
+    isLoading: true,
+    error: null,
+  }}
+/>
+
+<Story
+  name="Loading with Message"
+  args={{
+    isLoading: true,
+    error: null,
+    loadingMessage: 'Fetching your data...',
+  }}
+/>
+
+<Story
+  name="Error State"
+  args={{
+    isLoading: false,
+    error: 'Failed to load data. Please try again.',
+    errorTitle: 'Loading Failed',
+  }}
+/>
+
+<Story
+  name="Error with Retry"
+  args={{
+    isLoading: false,
+    error: 'Network connection failed',
+    errorTitle: 'Connection Error',
+    showRetry: true,
+    onRetry: () => alert('Retrying...'),
+  }}
+/>
+
+<Story
+  name="Content Loaded"
+  args={{
+    isLoading: false,
+    error: null,
+  }}
+/>
+
+<Story name="Interactive Loading">
+  <div class="space-y-4">
+    <div class="flex gap-2">
+      <button
+        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        on:click={simulateLoading}
+      >
+        Simulate Loading
+      </button>
+      <button
+        class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+        on:click={simulateError}
+      >
+        Simulate Error
+      </button>
+    </div>
+
+    <PageLoader
+      isLoading={loading}
+      error={hasError ? 'Failed to load content' : null}
+      loadingMessage="Please wait..."
+      showRetry={true}
+      onRetry={simulateLoading}
+    >
+      <div class="p-8 bg-green-50 rounded-lg">
+        <h3 class="text-xl font-bold text-green-800">Success!</h3>
+        <p class="text-green-600 mt-2">Your content has loaded successfully.</p>
+      </div>
+    </PageLoader>
+  </div>
+</Story>
+
+<Story name="Different Heights">
+  <div class="space-y-8">
+    <div class="border rounded p-4">
+      <h4 class="font-semibold mb-2">Small (h-32)</h4>
+      <PageLoader isLoading={true} minHeight="h-32" />
+    </div>
+
+    <div class="border rounded p-4">
+      <h4 class="font-semibold mb-2">Medium (h-64 - default)</h4>
+      <PageLoader isLoading={true} />
+    </div>
+
+    <div class="border rounded p-4">
+      <h4 class="font-semibold mb-2">Large (h-96)</h4>
+      <PageLoader isLoading={true} minHeight="h-96" />
+    </div>
+  </div>
+</Story>

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

@@ -0,0 +1,53 @@
+export namespace meta {
+    export let title: string;
+    export { PageLoader as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace isLoading {
+            let control: string;
+        }
+        namespace error {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace loadingMessage {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace errorTitle {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        namespace showRetry {
+            let control_4: string;
+            export { control_4 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  PageLoaderProps */
+/** @typedef {typeof __propDef.events}  PageLoaderEvents */
+/** @typedef {typeof __propDef.slots}  PageLoaderSlots */
+export default class PageLoader extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PageLoaderProps = typeof __propDef.props;
+export type PageLoaderEvents = typeof __propDef.events;
+export type PageLoaderSlots = typeof __propDef.slots;
+import PageLoader from './PageLoader.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=PageLoader.stories.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageLoader.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/PageLoader.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgIA,yDAAyD;AACzD,2DAA2D;AAC3D,yDAAyD;AAEzD;;;;;CACC;8BALa,OAAO,SAAS,CAAC,KAAK;+BACtB,OAAO,SAAS,CAAC,MAAM;8BACvB,OAAO,SAAS,CAAC,KAAK;uBA/HX,qBAAqB;gCAHd,QAAQ;AA+HxC;;;;;;;;;;EAAgF"}

package/dist/components/PageLoader.svelte

@@ -0,0 +1,52 @@
+<script>
+  import Spinner from "./Spinner/Spinner.svelte";
+  import Alert from "./Alert/Alert.svelte";
+
+  /** Whether the page is loading */
+  export let isLoading = true;
+
+  /** Error message (if any) */
+  export let error = null;
+
+  /** Custom loading message */
+  export let loadingMessage = "";
+
+  /** Custom error title */
+  export let errorTitle = "Error";
+
+  /** Whether to show a retry button */
+  export let showRetry = false;
+
+  /** Callback for retry action */
+  export let onRetry = () => {};
+
+  /** Minimum height for the loading container */
+  export let minHeight = "h-64";
+</script>
+
+{#if isLoading}
+  <div class="flex items-center justify-center {minHeight}">
+    <div class="text-center">
+      <Spinner />
+      {#if loadingMessage}
+        <p class="mt-4 text-Text-Tartiary">{loadingMessage}</p>
+      {/if}
+    </div>
+  </div>
+{:else if error}
+  <div class="p-4">
+    <Alert type="danger" title={errorTitle} message={error} />
+    {#if showRetry}
+      <div class="mt-4 text-center">
+        <button
+          class="text-primary-600 hover:text-primary-700 font-medium"
+          on:click={onRetry}
+        >
+          Try again
+        </button>
+      </div>
+    {/if}
+  </div>
+{:else}
+  <slot />
+{/if}

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

@@ -0,0 +1,42 @@
+/** @typedef {typeof __propDef.props}  PageLoaderProps */
+/** @typedef {typeof __propDef.events}  PageLoaderEvents */
+/** @typedef {typeof __propDef.slots}  PageLoaderSlots */
+export default class PageLoader extends SvelteComponent<{
+    error?: null | undefined;
+    isLoading?: boolean | undefined;
+    loadingMessage?: string | undefined;
+    errorTitle?: string | undefined;
+    showRetry?: boolean | undefined;
+    onRetry?: (() => void) | undefined;
+    minHeight?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PageLoaderProps = typeof __propDef.props;
+export type PageLoaderEvents = typeof __propDef.events;
+export type PageLoaderSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        error?: null | undefined;
+        isLoading?: boolean | undefined;
+        loadingMessage?: string | undefined;
+        errorTitle?: string | undefined;
+        showRetry?: boolean | undefined;
+        onRetry?: (() => void) | undefined;
+        minHeight?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=PageLoader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/PageLoader.svelte.js"],"names":[],"mappings":"AAkEA,yDAAyD;AACzD,2DAA2D;AAC3D,yDAAyD;AAEzD;;;;;;;;;;;;;CACC;8BALa,OAAO,SAAS,CAAC,KAAK;+BACtB,OAAO,SAAS,CAAC,MAAM;8BACvB,OAAO,SAAS,CAAC,KAAK;gCApEJ,QAAQ;AAiExC;;;;;;;;;;;;;;;;;;EAAuK"}

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

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

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

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

package/dist/components/PasswordStrengthIndicator/PasswordStrengthIndicator.spec.js

@@ -0,0 +1,173 @@
+import { render, screen, waitFor } from "@testing-library/svelte";
+import { expect, describe, test, vi } from "vitest";
+import PasswordStrengthIndicator from "./PasswordStrengthIndicator.svelte";
+
+// Debounce delay + buffer
+const DEBOUNCE_WAIT = 500;
+
+function setupTest(args = {}) {
+  const { component, container } = render(PasswordStrengthIndicator, {
+    props: {
+      password: "",
+      ...args,
+    },
+  });
+  return { component, container };
+}
+
+describe("PasswordStrengthIndicator Component Tests", () => {
+  test("Does not render when password is empty", () => {
+    const { container } = setupTest({ password: "" });
+    const indicator = container.querySelector(".pt-2");
+    expect(indicator).not.toBeInTheDocument();
+  });
+
+  test("Renders after debounce when password has value", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const indicator = container.querySelector(".pt-2");
+        expect(indicator).toBeInTheDocument();
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Has three strength bars", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
+        expect(bars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Shows filled bars for weak password", async () => {
+    const { container } = setupTest({ password: "ab" });
+    await waitFor(
+      () => {
+        // At least one bar should be filled with a color
+        const coloredBars = container.querySelectorAll(
+          ".bg-accent-Danger, .bg-accent-success"
+        );
+        expect(coloredBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Shows filled bars for good password", async () => {
+    const { container } = setupTest({ password: "Abc12345" });
+    await waitFor(
+      () => {
+        // All 3 bars should be filled for a good password
+        const successBars = container.querySelectorAll(".bg-accent-success");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Exports score prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    // Score should be accessible
+    expect(component).toBeDefined();
+  });
+
+  test("Exports strengthText prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    expect(component).toBeDefined();
+  });
+
+  test("Exports textColor prop", () => {
+    const { component } = setupTest({ password: "test123" });
+    expect(component).toBeDefined();
+  });
+
+  test("Uses danger color for weak passwords", async () => {
+    const { container } = setupTest({ password: "weak" });
+    await waitFor(
+      () => {
+        const dangerBars = container.querySelectorAll(".bg-accent-Danger");
+        expect(dangerBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Uses success color for good/strong passwords", async () => {
+    const { container } = setupTest({ password: "StrongP@ss123" });
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-accent-success");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Has transition animation classes on bars", async () => {
+    const { container } = setupTest({ password: "test" });
+    await waitFor(
+      () => {
+        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
+        expect(bars.length).toBe(3);
+        bars.forEach((bar) => {
+          expect(bar).toHaveClass("transition-colors");
+          expect(bar).toHaveClass("duration-300");
+        });
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Very long password shows strong indicator", async () => {
+    const { container } = setupTest({ password: "1234567890123" }); // 13 chars
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-accent-success");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+});
+
+describe("Password Strength Scoring", () => {
+  test("Score 2+ (Good) shows 3 success bars - 8+ chars with 2 diversity", async () => {
+    const { container } = setupTest({ password: "Abcdefgh" }); // Upper + lower
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-accent-success");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Score 3 (Strong) - 10+ chars, multiple diversity", async () => {
+    const { container } = setupTest({ password: "Abcdefgh1!" }); // Upper, lower, number, symbol
+    await waitFor(
+      () => {
+        const successBars = container.querySelectorAll(".bg-accent-success");
+        expect(successBars.length).toBe(3);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+
+  test("Weak password shows danger color bars", async () => {
+    const { container } = setupTest({ password: "abcdef" });
+    await waitFor(
+      () => {
+        const coloredBars = container.querySelectorAll(
+          ".bg-accent-Danger, .bg-accent-success"
+        );
+        expect(coloredBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+});

package/dist/components/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte

@@ -0,0 +1,101 @@
+<script>
+    import { passwordStrength } from "check-password-strength";
+    import { onDestroy } from "svelte";
+    import { slide } from "svelte/transition";
+    import { cubicOut } from "svelte/easing";
+
+    export let password = "";
+    export let strengthText = "";
+    export let score = -1;
+    export let textColor = "";
+
+    let debouncedPassword = "";
+    let timer;
+
+    const customOptions = [
+        {
+            id: 0,
+            value: "Too weak",
+            minDiversity: 0,
+            minLength: 0,
+        },
+        {
+            id: 1,
+            value: "Weak",
+            minDiversity: 1,
+            minLength: 6,
+        },
+        {
+            id: 2,
+            value: "Good",
+            minDiversity: 2,
+            minLength: 8,
+        },
+        {
+            id: 3,
+            value: "Strong",
+            minDiversity: 3,
+            minLength: 10,
+        },
+    ];
+
+    // Debounce password updates
+    $: {
+        clearTimeout(timer);
+        if (password.length === 0) {
+            debouncedPassword = "";
+        } else {
+            timer = setTimeout(() => {
+                debouncedPassword = password;
+            }, 400); // 400ms delay as requested
+        }
+    }
+
+    onDestroy(() => {
+        clearTimeout(timer);
+    });
+
+    $: strength = debouncedPassword
+        ? passwordStrength(debouncedPassword, customOptions)
+        : null;
+    $: score = debouncedPassword.length > 12 ? 3 : (strength?.id ?? -1);
+
+    // Map score to display text and color
+    $: strengthText =
+        score === 0
+            ? "Too weak"
+            : score === 1
+              ? "Weak"
+              : score === 2
+                ? "Good"
+                : score === 3
+                  ? "Strong"
+                  : "";
+
+    $: strengthColor = score <= 1 ? "bg-accent-Danger" : "bg-accent-success";
+
+    $: textColor = score <= 1 ? "text-accent-Danger" : "text-accent-success";
+
+    // Calculate how many bars to fill (1-3)
+    $: filledBars = score === 0 ? 1 : score === 1 ? 2 : score >= 2 ? 3 : 0;
+</script>
+
+{#if debouncedPassword.length > 0}
+    <div
+        transition:slide={{ duration: 600, easing: cubicOut }}
+        class="pt-2 space-y-2"
+    >
+        <!-- 3 segment bars -->
+        <div class="flex gap-1.5">
+            {#each [0, 1, 2] as barIndex}
+                <div
+                    class="h-1 flex-1 rounded-full transition-colors duration-300 {barIndex <
+                    filledBars
+                        ? strengthColor
+                        : 'bg-stroke-primary'}"
+                />
+            {/each}
+        </div>
+        <slot />
+    </div>
+{/if}

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

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  PasswordStrengthIndicatorProps */
+/** @typedef {typeof __propDef.events}  PasswordStrengthIndicatorEvents */
+/** @typedef {typeof __propDef.slots}  PasswordStrengthIndicatorSlots */
+export default class PasswordStrengthIndicator extends SvelteComponent<{
+    password?: string | undefined;
+    strengthText?: string | undefined;
+    score?: number | undefined;
+    textColor?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PasswordStrengthIndicatorProps = typeof __propDef.props;
+export type PasswordStrengthIndicatorEvents = typeof __propDef.events;
+export type PasswordStrengthIndicatorSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        password?: string | undefined;
+        strengthText?: string | undefined;
+        score?: number | undefined;
+        textColor?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=PasswordStrengthIndicator.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordStrengthIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.js"],"names":[],"mappings":"AA4GA,wEAAwE;AACxE,0EAA0E;AAC1E,wEAAwE;AAExE;;;;;;;;;;CACC;6CALa,OAAO,SAAS,CAAC,KAAK;8CACtB,OAAO,SAAS,CAAC,MAAM;6CACvB,OAAO,SAAS,CAAC,KAAK;gCA9GJ,QAAQ;AA2GxC;;;;;;;;;;;;;;;EAAiI"}

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

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

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

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