@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/recipes/inputs/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-red-600, .bg-green-600"
+        );
+        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-green-600");
+        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-red-600");
+        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-green-600");
+        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-green-600");
+        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-green-600");
+        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-green-600");
+        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-red-600, .bg-green-600"
+        );
+        expect(coloredBars.length).toBeGreaterThan(0);
+      },
+      { timeout: DEBOUNCE_WAIT }
+    );
+  });
+});

package/dist/recipes/inputs/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-red-600" : "bg-green-600";
+
+    $: textColor = score <= 1 ? "text-red-600" : "text-green-600";
+
+    // 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-gray-200 dark:bg-gray-700'}"
+                />
+            {/each}
+        </div>
+        <slot />
+    </div>
+{/if}

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordStrengthIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyHA;;;;;;;;;;;eAA4L;sCATtJ,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.spec.d.ts.map

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

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.stories.svelte

@@ -0,0 +1,165 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import PlaceAutocomplete from "./PlaceAutocomplete.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/PlaceAutocomplete",
+    component: PlaceAutocomplete,
+    argTypes: {
+      placeholder: { control: "text" },
+      initialValue: { control: "text" },
+      mode: { control: "select", options: ["full", "cityState"] },
+      language: { control: "text" },
+      region: { control: "text" },
+      onResponse: { action: "response" },
+      onError: { action: "error" },
+    },
+  });
+
+  function handleResponse(data) {
+    console.log("Place selected:", data);
+    alert(`Selected: ${JSON.stringify(data, null, 2)}`);
+  }
+
+  function handleError(error) {
+    console.error("Error:", error);
+    alert(`Error: ${error}`);
+  }
+
+</script>
+
+
+<Story
+  name="Default Full Address"
+  args={{
+    placeholder: "Search for location...",
+    mode: "full",
+    onResponse: handleResponse,
+    onError: handleError
+  }}
+/>
+
+<Story name="City State Only">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="Search for city, state..."
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="With Initial Value">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="Search for location..."
+      initialValue="New York, NY"
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="Custom Placeholder">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="Where is your venue located?"
+      mode="full"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="In Form Context">
+  <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
+    <h2 class="text-2xl font-bold mb-6">Event Location</h2>
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+          Venue Name
+        </label>
+        <input
+          type="text"
+          placeholder="Enter venue name"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+          Venue Location
+        </label>
+        <PlaceAutocomplete
+          placeholder="Search for venue location..."
+          mode="full"
+          onResponse={handleResponse}
+          onError={handleError}
+        />
+      </div>
+      <button class="px-4 py-2 bg-primary text-white rounded-lg">
+        Save Location
+      </button>
+    </div>
+  </div>
+</Story>
+
+<Story name="Performer Location">
+  <div style="max-width: 500px; margin: 0 auto;">
+    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+      Your Home Base
+    </label>
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">
+      Let venues know where you're based
+    </p>
+    <PlaceAutocomplete
+      placeholder="Enter your city and state..."
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>
+
+<Story name="Multiple Locations">
+  <div style="max-width: 700px; margin: 0 auto; padding: 20px;">
+    <h2 class="text-xl font-bold mb-6">Tour Locations</h2>
+    <div class="space-y-6">
+      <div>
+        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+          Starting City
+        </label>
+        <PlaceAutocomplete
+          placeholder="Where will you start?"
+          mode="cityState"
+          onResponse={handleResponse}
+          onError={handleError}
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+          Destination City
+        </label>
+        <PlaceAutocomplete
+          placeholder="Where will you end?"
+          mode="cityState"
+          onResponse={handleResponse}
+          onError={handleError}
+        />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Compact Layout">
+  <div style="max-width: 350px; margin: 0 auto;">
+    <PlaceAutocomplete
+      placeholder="City..."
+      mode="cityState"
+      onResponse={handleResponse}
+      onError={handleError}
+    />
+  </div>
+</Story>

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default PlaceAutocomplete;
+type PlaceAutocomplete = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const PlaceAutocomplete: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import PlaceAutocomplete from "./PlaceAutocomplete.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=PlaceAutocomplete.stories.svelte.d.ts.map

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaceAutocomplete.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAmIA;;;;mBAA6H;8BA9H3F,4BAA4B;6CAqHjB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}