@getmicdrop/svelte-components 1.0.1 → 1.0.3

package/dist/components/FormActions.svelte

@@ -0,0 +1,67 @@
+<script>
+  import Button from "./Button/Button.svelte";
+
+  /** Handler for cancel action */
+  export let onCancel = () => {};
+
+  /** Handler for submit action */
+  export let onSubmit = () => {};
+
+  /** Label for the submit button */
+  export let submitLabel = "Save";
+
+  /** Label for the cancel button */
+  export let cancelLabel = "Cancel";
+
+  /** Whether the form is currently submitting */
+  export let isSubmitting = false;
+
+  /** Whether the submit was successful (shows checkmark) */
+  export let isSuccess = false;
+
+  /** Whether the submit button should be disabled */
+  export let disabled = false;
+
+  /** Whether to show the cancel button */
+  export let showCancel = true;
+
+  /** Variant for the submit button */
+  export let submitVariant = "blue-solid";
+
+  /** Variant for the cancel button */
+  export let cancelVariant = "gray-outline";
+
+  /** Button type for submit */
+  export let submitType = "submit";
+
+  /** Additional class for the container */
+  export let className = "";
+</script>
+
+<div
+  class="w-full md:static flex bg-bg-primary md:bg-transparent md:rounded-b-lg items-center justify-center md:justify-end gap-4 py-5 px-4 {className}"
+>
+  {#if showCancel}
+    <Button
+      variant={cancelVariant}
+      type="button"
+      size="full-md-auto"
+      minWidth="action"
+      on:click={onCancel}
+    >
+      {cancelLabel}
+    </Button>
+  {/if}
+  <Button
+    variant={submitVariant}
+    type={submitType}
+    size="full-md-auto"
+    minWidth="action"
+    loading={isSubmitting}
+    success={isSuccess}
+    disabled={disabled || isSubmitting}
+    on:click={onSubmit}
+  >
+    {submitLabel}
+  </Button>
+</div>

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

@@ -0,0 +1,48 @@
+/** @typedef {typeof __propDef.props}  FormActionsProps */
+/** @typedef {typeof __propDef.events}  FormActionsEvents */
+/** @typedef {typeof __propDef.slots}  FormActionsSlots */
+export default class FormActions extends SvelteComponent<{
+    className?: string | undefined;
+    disabled?: boolean | undefined;
+    onCancel?: (() => void) | undefined;
+    onSubmit?: (() => void) | undefined;
+    submitLabel?: string | undefined;
+    cancelLabel?: string | undefined;
+    isSubmitting?: boolean | undefined;
+    isSuccess?: boolean | undefined;
+    showCancel?: boolean | undefined;
+    submitVariant?: string | undefined;
+    cancelVariant?: string | undefined;
+    submitType?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FormActionsProps = typeof __propDef.props;
+export type FormActionsEvents = typeof __propDef.events;
+export type FormActionsSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        className?: string | undefined;
+        disabled?: boolean | undefined;
+        onCancel?: (() => void) | undefined;
+        onSubmit?: (() => void) | undefined;
+        submitLabel?: string | undefined;
+        cancelLabel?: string | undefined;
+        isSubmitting?: boolean | undefined;
+        isSuccess?: boolean | undefined;
+        showCancel?: boolean | undefined;
+        submitVariant?: string | undefined;
+        cancelVariant?: string | undefined;
+        submitType?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=FormActions.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormActions.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FormActions.svelte.js"],"names":[],"mappings":"AAuEA,0DAA0D;AAC1D,4DAA4D;AAC5D,0DAA0D;AAE1D;;;;;;;;;;;;;;;;CACC;+BALa,OAAO,SAAS,CAAC,KAAK;gCACtB,OAAO,SAAS,CAAC,MAAM;+BACvB,OAAO,SAAS,CAAC,KAAK;gCAzEJ,QAAQ;AAsExC;;;;;;;;;;;;;;;;;;;;;EAAiP"}

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

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

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

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

package/dist/components/FormValidationSummary.spec.js

@@ -0,0 +1,203 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import FormValidationSummary from './FormValidationSummary.svelte';
+
+describe('FormValidationSummary Component', () => {
+  it('does not render when show is false', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: false,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('does not render when there are no errors', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: {},
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('does not render when errors have empty messages', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: '', lastName: '   ' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('renders when show is true and has errors', () => {
+    const { container, getByText } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'First name is required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+    expect(getByText('Please fix the following:')).toBeTruthy();
+  });
+
+  it('displays error field labels', () => {
+    const { getByText } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required', email: 'Invalid' },
+        fieldLabels: { firstName: 'First Name', email: 'Email Address' },
+      },
+    });
+    expect(getByText('First Name')).toBeTruthy();
+    expect(getByText('Email Address')).toBeTruthy();
+  });
+
+  it('uses field key as label when no label provided', () => {
+    const { getByText } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+        fieldLabels: {},
+      },
+    });
+    expect(getByText('firstName')).toBeTruthy();
+  });
+
+  it('renders multiple error fields', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: {
+          firstName: 'Required',
+          lastName: 'Required',
+          email: 'Invalid format',
+        },
+        fieldLabels: {
+          firstName: 'First Name',
+          lastName: 'Last Name',
+          email: 'Email',
+        },
+      },
+    });
+    const listItems = container.querySelectorAll('li');
+    expect(listItems.length).toBe(3);
+  });
+
+  it('has role="alert" and aria-live="polite"', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('aria-live')).toBe('polite');
+  });
+
+  it('renders clickable buttons for each error', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required', email: 'Invalid' },
+        fieldLabels: { firstName: 'First Name', email: 'Email' },
+      },
+    });
+    const buttons = container.querySelectorAll('button[type="button"]');
+    expect(buttons.length).toBe(2);
+  });
+
+  it('calls scrollIntoView on button click', async () => {
+    // Create a mock element
+    const mockElement = document.createElement('input');
+    mockElement.id = 'firstName';
+    mockElement.scrollIntoView = vi.fn();
+    mockElement.focus = vi.fn();
+    document.body.appendChild(mockElement);
+
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+        fieldLabels: { firstName: 'First Name' },
+      },
+    });
+
+    const button = container.querySelector('button[type="button"]');
+    await fireEvent.click(button);
+
+    expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      block: 'center',
+    });
+
+    // Clean up
+    document.body.removeChild(mockElement);
+  });
+
+  it('uses custom fieldIds for scrolling', async () => {
+    const mockElement = document.createElement('input');
+    mockElement.id = 'custom-first-name-input';
+    mockElement.scrollIntoView = vi.fn();
+    mockElement.focus = vi.fn();
+    document.body.appendChild(mockElement);
+
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+        fieldLabels: { firstName: 'First Name' },
+        fieldIds: { firstName: 'custom-first-name-input' },
+      },
+    });
+
+    const button = container.querySelector('button[type="button"]');
+    await fireEvent.click(button);
+
+    expect(mockElement.scrollIntoView).toHaveBeenCalled();
+
+    document.body.removeChild(mockElement);
+  });
+
+  it('has red background styling', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.classList.contains('bg-red-50')).toBe(true);
+    expect(alert.classList.contains('border-red-200')).toBe(true);
+  });
+
+  it('renders warning icon', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('filters out null and undefined error values', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required', lastName: null, email: undefined },
+        fieldLabels: { firstName: 'First Name', lastName: 'Last Name', email: 'Email' },
+      },
+    });
+    const listItems = container.querySelectorAll('li');
+    expect(listItems.length).toBe(1);
+  });
+});

package/dist/components/FormValidationSummary.stories.svelte

@@ -0,0 +1,95 @@
+<script context="module">
+  import FormValidationSummary from './FormValidationSummary.svelte';
+
+  export const meta = {
+    title: 'Components/FormValidationSummary',
+    component: FormValidationSummary,
+    tags: ['autodocs'],
+  };
+</script>
+
+<script>
+  import { Story } from '@storybook/addon-svelte-csf';
+
+  const sampleErrors = {
+    firstName: 'First name is required',
+    email: 'Please enter a valid email address',
+    phone: 'Phone number must be 10 digits',
+  };
+
+  const fieldLabels = {
+    firstName: 'First Name',
+    email: 'Email Address',
+    phone: 'Phone Number',
+  };
+</script>
+
+<Story name="Default">
+  <FormValidationSummary
+    errors={sampleErrors}
+    {fieldLabels}
+    show={true}
+  />
+</Story>
+
+<Story name="Single Error">
+  <FormValidationSummary
+    errors={{ email: 'Email is required' }}
+    fieldLabels={{ email: 'Email Address' }}
+    show={true}
+  />
+</Story>
+
+<Story name="Multiple Errors">
+  <FormValidationSummary
+    errors={{
+      firstName: 'First name is required',
+      lastName: 'Last name is required',
+      email: 'Invalid email format',
+      password: 'Password must be at least 8 characters',
+      confirmPassword: 'Passwords do not match',
+    }}
+    fieldLabels={{
+      firstName: 'First Name',
+      lastName: 'Last Name',
+      email: 'Email',
+      password: 'Password',
+      confirmPassword: 'Confirm Password',
+    }}
+    show={true}
+  />
+</Story>
+
+<Story name="With Form">
+  <div class="max-w-md">
+    <FormValidationSummary
+      errors={sampleErrors}
+      {fieldLabels}
+      show={true}
+    />
+
+    <div class="space-y-4 mt-4">
+      <div>
+        <label id="firstName" class="block text-sm font-medium mb-1">First Name</label>
+        <input type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
+      </div>
+      <div>
+        <label id="email" class="block text-sm font-medium mb-1">Email</label>
+        <input type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
+      </div>
+      <div>
+        <label id="phone" class="block text-sm font-medium mb-1">Phone</label>
+        <input type="tel" class="w-full px-3 py-2 border border-red-300 rounded" />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Hidden State">
+  <FormValidationSummary
+    errors={sampleErrors}
+    {fieldLabels}
+    show={false}
+  />
+  <p class="text-sm text-gray-500 mt-2">The validation summary is hidden</p>
+</Story>

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

@@ -0,0 +1,32 @@
+export namespace meta {
+    export let title: string;
+    export { FormValidationSummary as component };
+    export let tags: string[];
+}
+/** @typedef {typeof __propDef.props}  FormValidationSummaryProps */
+/** @typedef {typeof __propDef.events}  FormValidationSummaryEvents */
+/** @typedef {typeof __propDef.slots}  FormValidationSummarySlots */
+export default class FormValidationSummary extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FormValidationSummaryProps = typeof __propDef.props;
+export type FormValidationSummaryEvents = typeof __propDef.events;
+export type FormValidationSummarySlots = typeof __propDef.slots;
+import FormValidationSummary from './FormValidationSummary.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=FormValidationSummary.stories.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormValidationSummary.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FormValidationSummary.stories.svelte.js"],"names":[],"mappings":";;;;;AAqFA,oEAAoE;AACpE,sEAAsE;AACtE,oEAAoE;AAEpE;;;;;CACC;yCALa,OAAO,SAAS,CAAC,KAAK;0CACtB,OAAO,SAAS,CAAC,MAAM;yCACvB,OAAO,SAAS,CAAC,KAAK;kCApFA,gCAAgC;gCAHpC,QAAQ;AAoFxC;;;;;;;;;;EAAgF"}

package/dist/components/FormValidationSummary.svelte

@@ -0,0 +1,83 @@
+<script>
+  import { slide } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "./Icons/WarningIcon.svelte";
+
+  /**
+   * Object mapping field keys to error messages
+   * e.g., { firstName: "First name is required", email: "Email is required" }
+   */
+  export let errors = {};
+
+  /**
+   * Whether to show the summary (typically tied to form submission attempt)
+   */
+  export let show = false;
+
+  /**
+   * Object mapping field keys to human-readable labels
+   * e.g., { firstName: "First name", email: "Email address" }
+   */
+  export let fieldLabels = {};
+
+  /**
+   * Optional: Object mapping field keys to element IDs for scrolling
+   * e.g., { firstName: "firstName-input", email: "email-input" }
+   * If not provided, will try to scroll to element with id matching the field key
+   */
+  export let fieldIds = {};
+
+  // Get list of fields with errors
+  $: errorFields = Object.entries(errors)
+    .filter(([_, message]) => message && message.trim() !== "")
+    .map(([key, message]) => ({
+      key,
+      label: fieldLabels[key] || key,
+      message,
+      elementId: fieldIds[key] || key
+    }));
+
+  $: hasErrors = errorFields.length > 0;
+
+  function scrollToField(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "center" });
+      // Try to focus the element if it's focusable
+      if (element.focus) {
+        setTimeout(() => element.focus(), 300);
+      }
+    }
+  }
+</script>
+
+{#if show && hasErrors}
+  <div
+    transition:slide={{ duration: 300, easing: cubicOut }}
+    class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4"
+    role="alert"
+    aria-live="polite"
+  >
+    <div class="flex items-start gap-2">
+      <WarningIcon className="shrink-0 text-red-500 mt-0.5" />
+      <div class="flex-1">
+        <p class="text-sm font-medium text-red-800">
+          Please fix the following:
+        </p>
+        <ul class="mt-2 space-y-1">
+          {#each errorFields as field}
+            <li>
+              <button
+                type="button"
+                class="text-sm text-red-700 hover:text-red-900 hover:underline cursor-pointer focus:outline-none focus:underline"
+                on:click={() => scrollToField(field.elementId)}
+              >
+                {field.label}
+              </button>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,32 @@
+/** @typedef {typeof __propDef.props}  FormValidationSummaryProps */
+/** @typedef {typeof __propDef.events}  FormValidationSummaryEvents */
+/** @typedef {typeof __propDef.slots}  FormValidationSummarySlots */
+export default class FormValidationSummary extends SvelteComponent<{
+    show?: boolean | undefined;
+    errors?: {} | undefined;
+    fieldLabels?: {} | undefined;
+    fieldIds?: {} | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FormValidationSummaryProps = typeof __propDef.props;
+export type FormValidationSummaryEvents = typeof __propDef.events;
+export type FormValidationSummarySlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        show?: boolean | undefined;
+        errors?: {} | undefined;
+        fieldLabels?: {} | undefined;
+        fieldIds?: {} | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=FormValidationSummary.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormValidationSummary.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/FormValidationSummary.svelte.js"],"names":[],"mappings":"AAqGA,oEAAoE;AACpE,sEAAsE;AACtE,oEAAoE;AAEpE;;;;;;;;CACC;yCALa,OAAO,SAAS,CAAC,KAAK;0CACtB,OAAO,SAAS,CAAC,MAAM;yCACvB,OAAO,SAAS,CAAC,KAAK;gCAvGJ,QAAQ;AAoGxC;;;;;;;;;;;;;EAA4H"}

package/dist/components/Icons/ArrowLeft.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let size = "20";
+  export let color = "currentColor";
+</script>
+
+<svg
+  {size}
+  width={size}
+  height={size}
+  viewBox="0 0 17 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M10.5 12C10.5 12 6.50001 9.05407 6.5 8C6.49999 6.94587 10.5 4 10.5 4"
+    stroke={color}
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/components/Icons/ArrowLeft.svelte.d.ts

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

package/dist/components/Icons/ArrowLeft.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowLeft.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/ArrowLeft.svelte.js"],"names":[],"mappings":"AAeA,wDAAwD;AACxD,0DAA0D;AAC1D,wDAAwD;AAExD;;;;;;CACC;6BALa,OAAO,SAAS,CAAC,KAAK;8BACtB,OAAO,SAAS,CAAC,MAAM;6BACvB,OAAO,SAAS,CAAC,KAAK;gCAjBJ,QAAQ;AAcxC;;;;;;;;;;;EAAkG"}

package/dist/components/Icons/ArrowRight.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let size = "20";
+  export let color = "currentColor";
+</script>
+
+<svg
+  {size}
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M9 18L15 12L9 6"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/components/Icons/ArrowRight.svelte.d.ts

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