@getmicdrop/svelte-components 5.10.3 → 5.12.0

package/dist/recipes/modals/InputModal.svelte

@@ -1,182 +1,182 @@
-<script>
-  import { ExclamationTriangleOutline } from "../../primitives/Icons";
-  import Button from "../../primitives/Button/Button.svelte";
-  import Cancel from "../../assets/svg/cancel.svg";
-  import Modal from "../../primitives/Modal/Modal.svelte";
-  import { typography } from '../../tokens/typography';
-
-  let {
-    show = $bindable(false),
-    size = "default", // "small" | "default" | "large"
-    title = "",
-    description = "",
-    closeBtn = false, // To show close button
-    persistent = false, // When true, prevents closing by clicking backdrop or pressing Escape
-
-    // Input configuration
-    inputLabel = "",
-    inputPlaceholder = "",
-    inputType = "text", // text | email | password | textarea
-    inputValue = $bindable(""),
-    inputRequired = false,
-    inputRows = 4, // For textarea
-    inputIcon = null, // SVG component for input prefix icon
-    helpText = "", // Helper text below input
-
-    // Validation
-    errorMessage = "",
-    showError = false,
-    validateEmail = false, // Auto-validate email format
-
-    // Buttons
-    primaryButtonText = "Confirm",
-    secondaryButtonText = "Cancel",
-    primaryButtonVariant = "blue-solid", // blue-solid | red-solid
-
-    // State
-    disabled = false,
-    loading = false,
-
-    // Callbacks
-    onconfirm,
-    oncancel,
-    onclose,
-  } = $props();
-
-  // Email validation
-  const isValidEmail = (email) => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-  };
-
-  let emailError = $derived(validateEmail && inputValue && !isValidEmail(inputValue));
-  let isEmpty = $derived(inputRequired && (!inputValue || inputValue.trim() === ""));
-  let hasError = $derived(showError || emailError);
-  let isDisabled = $derived(disabled || loading || isEmpty || emailError);
-
-  const handlePrimaryAction = () => {
-    if (!isDisabled) {
-      onconfirm?.({ value: inputValue });
-    }
-  };
-
-  const handleSecondaryAction = () => {
-    if (!disabled && !loading) {
-      oncancel?.();
-      closeModal();
-    }
-  };
-
-  const closeModal = () => {
-    show = false;
-    onclose?.();
-  };
-
-  const handleClose = () => {
-    if (disabled || loading) return;
-    closeModal();
-  };
-</script>
-
-<Modal bind:show {size} {persistent}>
-  {#snippet header()}
-    <div class="text-left">
-      {#if closeBtn}
-        <div class="flex justify-end -mt-2 -mr-2 mb-2">
-          <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
-            <img src={Cancel} alt="Close" class="w-5 h-5" />
-          </Button>
-        </div>
-      {/if}
-      {#if title}
-        <h3 class={typography.h2}>{title}</h3>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet body()}
-    <div class="text-left mt-4">
-      {#if description}
-        <p class={`${typography.smMuted} leading-relaxed mb-4`}>
-          {description}
-        </p>
-      {/if}
-
-      <div>
-        {#if inputLabel}
-          <label
-            for="modal-input"
-            class={`${typography.label} block mb-2`}
-          >
-            {inputLabel}
-          </label>
-        {/if}
-
-        {#if inputType === "textarea"}
-          <textarea
-            id="modal-input"
-            bind:value={inputValue}
-            placeholder={inputPlaceholder}
-            rows={inputRows}
-            class="w-full px-3 py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 {typography.body} rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
-            disabled={disabled || loading}
-          ></textarea>
-        {:else}
-          <div class="relative">
-            {#if inputIcon}
-              {@const InputIconComponent = inputIcon}
-              <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                <InputIconComponent class={`w-5 h-5 ${typography.iconMuted}`} />
-              </div>
-            {/if}
-            <input
-              id="modal-input"
-              type={inputType}
-              bind:value={inputValue}
-              placeholder={inputPlaceholder}
-              required={inputRequired}
-              disabled={disabled || loading}
-              class="w-full {inputIcon ? 'pl-10' : 'px-3'} py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-lg {typography.body} bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
-            />
-          </div>
-        {/if}
-
-        {#if hasError && (errorMessage || emailError)}
-          <p class={`${typography.label} text-red-600 dark:text-red-400 mt-2 flex items-center gap-1`}>
-            <ExclamationTriangleOutline class="w-4 h-4" />
-            {emailError ? "Please enter a valid email address" : errorMessage}
-          </p>
-        {:else if helpText && !hasError}
-          <p class={`${typography.xsMuted} pt-2`}>
-            {helpText}
-          </p>
-        {/if}
-      </div>
-    </div>
-  {/snippet}
-
-  {#snippet footer()}
-    <div class="flex gap-3">
-      {#if secondaryButtonText}
-        <Button
-          size="full"
-          variant="alternative"
-          onclick={handleSecondaryAction}
-          disabled={disabled || loading}
-        >
-          {secondaryButtonText}
-        </Button>
-      {/if}
-
-      <Button
-        size="full"
-        variant={primaryButtonVariant}
-        onclick={handlePrimaryAction}
-        disabled={isDisabled}
-        {loading}
-      >
-        {primaryButtonText}
-      </Button>
-    </div>
-  {/snippet}
-</Modal>
+<script>
+  import { ExclamationTriangleOutline } from "../../primitives/Icons";
+  import Button from "../../primitives/Button/Button.svelte";
+  import Cancel from "../../assets/svg/cancel.svg";
+  import Modal from "../../primitives/Modal/Modal.svelte";
+  import { typography } from '../../tokens/typography';
+
+  let {
+    show = $bindable(false),
+    size = "default", // "small" | "default" | "large"
+    title = "",
+    description = "",
+    closeBtn = false, // To show close button
+    persistent = false, // When true, prevents closing by clicking backdrop or pressing Escape
+
+    // Input configuration
+    inputLabel = "",
+    inputPlaceholder = "",
+    inputType = "text", // text | email | password | textarea
+    inputValue = $bindable(""),
+    inputRequired = false,
+    inputRows = 4, // For textarea
+    inputIcon = null, // SVG component for input prefix icon
+    helpText = "", // Helper text below input
+
+    // Validation
+    errorMessage = "",
+    showError = false,
+    validateEmail = false, // Auto-validate email format
+
+    // Buttons
+    primaryButtonText = "Confirm",
+    secondaryButtonText = "Cancel",
+    primaryButtonVariant = "blue-solid", // blue-solid | red-solid
+
+    // State
+    disabled = false,
+    loading = false,
+
+    // Callbacks
+    onconfirm,
+    oncancel,
+    onclose,
+  } = $props();
+
+  // Email validation
+  const isValidEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  let emailError = $derived(validateEmail && inputValue && !isValidEmail(inputValue));
+  let isEmpty = $derived(inputRequired && (!inputValue || inputValue.trim() === ""));
+  let hasError = $derived(showError || emailError);
+  let isDisabled = $derived(disabled || loading || isEmpty || emailError);
+
+  const handlePrimaryAction = () => {
+    if (!isDisabled) {
+      onconfirm?.({ value: inputValue });
+    }
+  };
+
+  const handleSecondaryAction = () => {
+    if (!disabled && !loading) {
+      oncancel?.();
+      closeModal();
+    }
+  };
+
+  const closeModal = () => {
+    show = false;
+    onclose?.();
+  };
+
+  const handleClose = () => {
+    if (disabled || loading) return;
+    closeModal();
+  };
+</script>
+
+<Modal bind:show {size} {persistent}>
+  {#snippet header()}
+    <div class="text-left">
+      {#if closeBtn}
+        <div class="flex justify-end -mt-2 -mr-2 mb-2">
+          <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
+            <img src={Cancel} alt="Close" class="w-5 h-5" />
+          </Button>
+        </div>
+      {/if}
+      {#if title}
+        <h3 class={typography.h2}>{title}</h3>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    <div class="text-left mt-4">
+      {#if description}
+        <p class={`${typography.smMuted} leading-relaxed mb-4`}>
+          {description}
+        </p>
+      {/if}
+
+      <div>
+        {#if inputLabel}
+          <label
+            for="modal-input"
+            class={`${typography.label} block mb-2`}
+          >
+            {inputLabel}
+          </label>
+        {/if}
+
+        {#if inputType === "textarea"}
+          <textarea
+            id="modal-input"
+            bind:value={inputValue}
+            placeholder={inputPlaceholder}
+            rows={inputRows}
+            class="w-full px-3 py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 {typography.body} rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+            disabled={disabled || loading}
+          ></textarea>
+        {:else}
+          <div class="relative">
+            {#if inputIcon}
+              {@const InputIconComponent = inputIcon}
+              <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                <InputIconComponent class={`w-5 h-5 ${typography.iconMuted}`} />
+              </div>
+            {/if}
+            <input
+              id="modal-input"
+              type={inputType}
+              bind:value={inputValue}
+              placeholder={inputPlaceholder}
+              required={inputRequired}
+              disabled={disabled || loading}
+              class="w-full {inputIcon ? 'pl-10' : 'px-3'} py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-lg {typography.body} bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+            />
+          </div>
+        {/if}
+
+        {#if hasError && (errorMessage || emailError)}
+          <p class={`${typography.label} text-red-600 dark:text-red-400 mt-2 flex items-center gap-1`}>
+            <ExclamationTriangleOutline class="w-4 h-4" />
+            {emailError ? "Please enter a valid email address" : errorMessage}
+          </p>
+        {:else if helpText && !hasError}
+          <p class={`${typography.xsMuted} pt-2`}>
+            {helpText}
+          </p>
+        {/if}
+      </div>
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="flex gap-3">
+      {#if secondaryButtonText}
+        <Button
+          size="full"
+          variant="alternative"
+          onclick={handleSecondaryAction}
+          disabled={disabled || loading}
+        >
+          {secondaryButtonText}
+        </Button>
+      {/if}
+
+      <Button
+        size="full"
+        variant={primaryButtonVariant}
+        onclick={handlePrimaryAction}
+        disabled={isDisabled}
+        {loading}
+      >
+        {primaryButtonText}
+      </Button>
+    </div>
+  {/snippet}
+</Modal>

package/dist/recipes/modals/ModalStateManager.spec.js

@@ -1,100 +1,100 @@
-import { render, screen } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import ModalStateManager from "./ModalStateManager.svelte";
-
-describe("ModalStateManager Component Tests", () => {
-  test("Shows processing state when isProcessing is true", () => {
-    render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: false },
-    });
-    expect(screen.getByText("Processing your request")).toBeInTheDocument();
-  });
-
-  test("Shows custom processing message", () => {
-    render(ModalStateManager, {
-      props: {
-        isProcessing: true,
-        isSuccess: false,
-        processingMessage: "Please wait...",
-      },
-    });
-    expect(screen.getByText("Please wait...")).toBeInTheDocument();
-  });
-
-  test("Shows success state when isSuccess is true", () => {
-    render(ModalStateManager, {
-      props: { isProcessing: false, isSuccess: true, successTitle: "Done!" },
-    });
-    expect(screen.getByText("Done!")).toBeInTheDocument();
-  });
-
-  test("Shows success message when provided", () => {
-    render(ModalStateManager, {
-      props: {
-        isProcessing: false,
-        isSuccess: true,
-        successTitle: "Success",
-        successMessage: "Your action was completed.",
-      },
-    });
-    expect(screen.getByText("Your action was completed.")).toBeInTheDocument();
-  });
-
-  test("Shows continue button in success state", () => {
-    render(ModalStateManager, {
-      props: { isProcessing: false, isSuccess: true },
-    });
-    expect(screen.getByText("Continue")).toBeInTheDocument();
-  });
-
-  test("Uses custom success button text", () => {
-    render(ModalStateManager, {
-      props: {
-        isProcessing: false,
-        isSuccess: true,
-        successButtonText: "Close",
-      },
-    });
-    expect(screen.getByText("Close")).toBeInTheDocument();
-  });
-
-  test("Calls onSuccessClose when success button clicked", async () => {
-    const user = userEvent.setup();
-    const onSuccessClose = vi.fn();
-
-    render(ModalStateManager, {
-      props: { isProcessing: false, isSuccess: true, onSuccessClose },
-    });
-
-    await user.click(screen.getByText("Continue"));
-    expect(onSuccessClose).toHaveBeenCalledTimes(1);
-  });
-
-  test("Processing state shows spinner animation", () => {
-    const { container } = render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: false },
-    });
-    const spinner = container.querySelector(".animate-spin");
-    expect(spinner).toBeInTheDocument();
-  });
-
-  test("Processing state has orange background", () => {
-    const { container } = render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: false },
-    });
-    const spinnerBg = container.querySelector(".bg-orange-300");
-    expect(spinnerBg).toBeInTheDocument();
-  });
-
-  test("Success state priority over processing", () => {
-    // When both are true, success should show
-    render(ModalStateManager, {
-      props: { isProcessing: true, isSuccess: true, successTitle: "Complete" },
-    });
-    expect(screen.getByText("Complete")).toBeInTheDocument();
-    expect(
-      screen.queryByText("Processing your request")
-    ).not.toBeInTheDocument();
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import ModalStateManager from "./ModalStateManager.svelte";
+
+describe("ModalStateManager Component Tests", () => {
+  test("Shows processing state when isProcessing is true", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    expect(screen.getByText("Processing your request")).toBeInTheDocument();
+  });
+
+  test("Shows custom processing message", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: true,
+        isSuccess: false,
+        processingMessage: "Please wait...",
+      },
+    });
+    expect(screen.getByText("Please wait...")).toBeInTheDocument();
+  });
+
+  test("Shows success state when isSuccess is true", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true, successTitle: "Done!" },
+    });
+    expect(screen.getByText("Done!")).toBeInTheDocument();
+  });
+
+  test("Shows success message when provided", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: false,
+        isSuccess: true,
+        successTitle: "Success",
+        successMessage: "Your action was completed.",
+      },
+    });
+    expect(screen.getByText("Your action was completed.")).toBeInTheDocument();
+  });
+
+  test("Shows continue button in success state", () => {
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true },
+    });
+    expect(screen.getByText("Continue")).toBeInTheDocument();
+  });
+
+  test("Uses custom success button text", () => {
+    render(ModalStateManager, {
+      props: {
+        isProcessing: false,
+        isSuccess: true,
+        successButtonText: "Close",
+      },
+    });
+    expect(screen.getByText("Close")).toBeInTheDocument();
+  });
+
+  test("Calls onSuccessClose when success button clicked", async () => {
+    const user = userEvent.setup();
+    const onSuccessClose = vi.fn();
+
+    render(ModalStateManager, {
+      props: { isProcessing: false, isSuccess: true, onSuccessClose },
+    });
+
+    await user.click(screen.getByText("Continue"));
+    expect(onSuccessClose).toHaveBeenCalledTimes(1);
+  });
+
+  test("Processing state shows spinner animation", () => {
+    const { container } = render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    const spinner = container.querySelector(".animate-spin");
+    expect(spinner).toBeInTheDocument();
+  });
+
+  test("Processing state has orange background", () => {
+    const { container } = render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: false },
+    });
+    const spinnerBg = container.querySelector(".bg-orange-300");
+    expect(spinnerBg).toBeInTheDocument();
+  });
+
+  test("Success state priority over processing", () => {
+    // When both are true, success should show
+    render(ModalStateManager, {
+      props: { isProcessing: true, isSuccess: true, successTitle: "Complete" },
+    });
+    expect(screen.getByText("Complete")).toBeInTheDocument();
+    expect(
+      screen.queryByText("Processing your request")
+    ).not.toBeInTheDocument();
+  });
+});