@getmicdrop/svelte-components 1.0.2 → 1.0.3

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

@@ -0,0 +1,26 @@
+/** @typedef {typeof __propDef.props}  DarkModeToggleProps */
+/** @typedef {typeof __propDef.events}  DarkModeToggleEvents */
+/** @typedef {typeof __propDef.slots}  DarkModeToggleSlots */
+export default class DarkModeToggle extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DarkModeToggleProps = typeof __propDef.props;
+export type DarkModeToggleEvents = typeof __propDef.events;
+export type DarkModeToggleSlots = 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=DarkModeToggle.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DarkModeToggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DarkModeToggle.svelte.js"],"names":[],"mappings":"AAgIA,6DAA6D;AAC7D,+DAA+D;AAC/D,6DAA6D;AAE7D;;;;;CACC;kCALa,OAAO,SAAS,CAAC,KAAK;mCACtB,OAAO,SAAS,CAAC,MAAM;kCACvB,OAAO,SAAS,CAAC,KAAK;gCAlIJ,QAAQ;AA+HxC;;;;;;;;;;EAAgF"}

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

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

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

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

package/dist/components/ErrorDisplay.spec.js

@@ -0,0 +1,69 @@
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import ErrorDisplay from "./ErrorDisplay.svelte";
+
+describe("ErrorDisplay Component Tests", () => {
+  test("Shows error message when error and show are true", () => {
+    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
+    expect(screen.getByText("Invalid input")).toBeInTheDocument();
+  });
+
+  test("Does not show when error is empty", () => {
+    render(ErrorDisplay, { props: { error: "", show: true } });
+    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
+  });
+
+  test("Does not show when show is false", () => {
+    render(ErrorDisplay, { props: { error: "Error message", show: false } });
+    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
+  });
+
+  test("Has error text color", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("text-accent-Danger");
+  });
+
+  test("Has shake class when shake is true", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: true },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("error-shake");
+  });
+
+  test("Does not have shake class when shake is false", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: false },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).not.toHaveClass("error-shake");
+  });
+
+  test("Contains icon element", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Has flex layout", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("flex");
+    expect(wrapper).toHaveClass("items-center");
+  });
+
+  test("Applies custom className", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, className: "mt-2" },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("mt-2");
+  });
+});

package/dist/components/ErrorDisplay.stories.svelte

@@ -0,0 +1,115 @@
+<script context="module">
+  import ErrorDisplay from './ErrorDisplay.svelte';
+
+  export const meta = {
+    title: 'Components/ErrorDisplay',
+    component: ErrorDisplay,
+    tags: ['autodocs'],
+    argTypes: {
+      error: {
+        control: 'text',
+        description: 'Error message to display',
+      },
+      show: {
+        control: 'boolean',
+        description: 'Controls visibility',
+      },
+      shake: {
+        control: 'boolean',
+        description: 'Enable shake animation',
+      },
+      icon: {
+        control: 'text',
+        description: 'Icon name from Icon component',
+      },
+      iconSize: {
+        control: 'text',
+        description: 'Size of the icon',
+      },
+    },
+  };
+</script>
+
+<script>
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+
+  let showShakeDemo = false;
+  function triggerShake() {
+    showShakeDemo = false;
+    setTimeout(() => {
+      showShakeDemo = true;
+    }, 10);
+  }
+</script>
+
+<Template let:args>
+  <ErrorDisplay {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args={{
+    error: 'This is an error message',
+    show: true,
+    shake: false,
+  }}
+/>
+
+<Story
+  name="With Shake Animation"
+  args={{
+    error: 'Invalid input detected',
+    show: true,
+    shake: true,
+  }}
+/>
+
+<Story name="Interactive Shake">
+  <div class="space-y-4">
+    <button
+      class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      on:click={triggerShake}
+    >
+      Trigger Error Shake
+    </button>
+    <ErrorDisplay
+      error="Form validation failed"
+      show={showShakeDemo}
+      shake={showShakeDemo}
+    />
+  </div>
+</Story>
+
+<Story
+  name="Different Icons"
+>
+  <div class="space-y-4">
+    <ErrorDisplay error="Error with default icon" />
+    <ErrorDisplay error="Warning message" icon="Warning" />
+    <ErrorDisplay error="Info message" icon="Info" />
+  </div>
+</Story>
+
+<Story
+  name="In Form Context"
+>
+  <div class="max-w-md">
+    <label class="block text-sm font-medium mb-1">Email</label>
+    <input
+      type="email"
+      class="w-full px-3 py-2 border border-red-500 rounded"
+      value="invalid-email"
+    />
+    <div class="mt-1">
+      <ErrorDisplay error="Please enter a valid email address" shake={true} />
+    </div>
+  </div>
+</Story>
+
+<Story
+  name="Hidden State"
+  args={{
+    error: 'This error is hidden',
+    show: false,
+  }}
+/>

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

@@ -0,0 +1,62 @@
+export namespace meta {
+    export let title: string;
+    export { ErrorDisplay as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace error {
+            let control: string;
+            let description: string;
+        }
+        namespace show {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace shake {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace icon {
+            let control_3: string;
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace iconSize {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  ErrorDisplayProps */
+/** @typedef {typeof __propDef.events}  ErrorDisplayEvents */
+/** @typedef {typeof __propDef.slots}  ErrorDisplaySlots */
+export default class ErrorDisplay extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ErrorDisplayProps = typeof __propDef.props;
+export type ErrorDisplayEvents = typeof __propDef.events;
+export type ErrorDisplaySlots = typeof __propDef.slots;
+import ErrorDisplay from './ErrorDisplay.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ErrorDisplay.stories.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorDisplay.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ErrorDisplay.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqGA,2DAA2D;AAC3D,6DAA6D;AAC7D,2DAA2D;AAE3D;;;;;CACC;gCALa,OAAO,SAAS,CAAC,KAAK;iCACtB,OAAO,SAAS,CAAC,MAAM;gCACvB,OAAO,SAAS,CAAC,KAAK;yBApGT,uBAAuB;gCAHlB,QAAQ;AAoGxC;;;;;;;;;;EAAgF"}

package/dist/components/ErrorDisplay.svelte

@@ -0,0 +1,58 @@
+<script>
+  import Icon from "./Icons/Icon.svelte";
+
+  /** Error message to display */
+  export let error = "";
+
+  /** Whether to show the error */
+  export let show = true;
+
+  /** Whether to apply shake animation */
+  export let shake = false;
+
+  /** Icon to display (from Icon component) */
+  export let icon = "ErrorCircle";
+
+  /** Size of the icon */
+  export let iconSize = "16";
+
+  /** Additional class for the container */
+  export let className = "";
+</script>
+
+{#if error && show}
+  <div
+    class="flex items-center gap-1.5 text-accent-Danger {shake
+      ? 'error-shake'
+      : ''} {className}"
+  >
+    <Icon name={icon} size={iconSize} />
+    <p class="text-sm font-medium">{error}</p>
+  </div>
+{/if}
+
+<style>
+  @keyframes shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: translateX(-4px);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+      transform: translateX(4px);
+    }
+  }
+
+  .error-shake {
+    animation: shake 0.625s ease-in-out;
+  }
+</style>

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

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  ErrorDisplayProps */
+/** @typedef {typeof __propDef.events}  ErrorDisplayEvents */
+/** @typedef {typeof __propDef.slots}  ErrorDisplaySlots */
+export default class ErrorDisplay extends SvelteComponent<{
+    className?: string | undefined;
+    error?: string | undefined;
+    show?: boolean | undefined;
+    shake?: boolean | undefined;
+    icon?: string | undefined;
+    iconSize?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ErrorDisplayProps = typeof __propDef.props;
+export type ErrorDisplayEvents = typeof __propDef.events;
+export type ErrorDisplaySlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        className?: string | undefined;
+        error?: string | undefined;
+        show?: boolean | undefined;
+        shake?: boolean | undefined;
+        icon?: string | undefined;
+        iconSize?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ErrorDisplay.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorDisplay.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ErrorDisplay.svelte.js"],"names":[],"mappings":"AA+CA,2DAA2D;AAC3D,6DAA6D;AAC7D,2DAA2D;AAE3D;;;;;;;;;;CACC;gCALa,OAAO,SAAS,CAAC,KAAK;iCACtB,OAAO,SAAS,CAAC,MAAM;gCACvB,OAAO,SAAS,CAAC,KAAK;gCAjDJ,QAAQ;AA8CxC;;;;;;;;;;;;;;;EAAwI"}

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

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

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

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

package/dist/components/FormActions.spec.js

@@ -0,0 +1,88 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import FormActions from "./FormActions.svelte";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component, container } = render(FormActions, {
+    props: {
+      onCancel: vi.fn(),
+      onSubmit: vi.fn(),
+      ...args,
+    },
+  });
+  return { user, component, container };
+}
+
+describe("FormActions Component Tests", () => {
+  test("Renders submit and cancel buttons", () => {
+    setupTest();
+    expect(screen.getByText("Save")).toBeInTheDocument();
+    expect(screen.getByText("Cancel")).toBeInTheDocument();
+  });
+
+  test("Uses custom button labels", () => {
+    setupTest({ submitLabel: "Update", cancelLabel: "Discard" });
+    expect(screen.getByText("Update")).toBeInTheDocument();
+    expect(screen.getByText("Discard")).toBeInTheDocument();
+  });
+
+  test("Calls onSubmit when submit button clicked", async () => {
+    const onSubmit = vi.fn();
+    const { user } = setupTest({ onSubmit });
+
+    await user.click(screen.getByText("Save"));
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  test("Calls onCancel when cancel button clicked", async () => {
+    const onCancel = vi.fn();
+    const { user } = setupTest({ onCancel });
+
+    await user.click(screen.getByText("Cancel"));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  test("Submit button shows loading state", () => {
+    setupTest({ isSubmitting: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toBeDisabled();
+  });
+
+  test("Submit button shows success state", () => {
+    setupTest({ isSuccess: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toHaveClass("btn-success");
+  });
+
+  test("Submit button is disabled when disabled prop is true", () => {
+    setupTest({ disabled: true });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toBeDisabled();
+  });
+
+  test("Hides cancel button when showCancel is false", () => {
+    setupTest({ showCancel: false });
+    expect(screen.queryByText("Cancel")).not.toBeInTheDocument();
+  });
+
+  test("Uses custom submit variant", () => {
+    setupTest({ submitVariant: "red-solid" });
+    const submitBtn = screen.getByText("Save").closest("button, a");
+    expect(submitBtn).toHaveClass("btn-red-solid");
+  });
+
+  test("Uses custom cancel variant", () => {
+    setupTest({ cancelVariant: "blue-outline" });
+    const cancelBtn = screen.getByText("Cancel").closest("button, a");
+    expect(cancelBtn).toHaveClass("btn-blue-outline");
+  });
+
+  test("Has responsive layout classes", () => {
+    const { container } = setupTest();
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("w-full");
+    expect(wrapper).toHaveClass("flex");
+  });
+});

package/dist/components/FormActions.stories.svelte

@@ -0,0 +1,98 @@
+<script context="module">
+  export const meta = {
+    title: 'Components/FormActions',
+    component: FormActions,
+    tags: ['autodocs'],
+    argTypes: {
+      submitLabel: { control: 'text' },
+      cancelLabel: { control: 'text' },
+      isSubmitting: { control: 'boolean' },
+      isSuccess: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+      showCancel: { control: 'boolean' },
+    },
+  };
+</script>
+
+<script>
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+  import FormActions from './FormActions.svelte';
+
+  let submitting = false;
+  let success = false;
+
+  function handleSubmit() {
+    submitting = true;
+    setTimeout(() => {
+      submitting = false;
+      success = true;
+      setTimeout(() => success = false, 2000);
+    }, 2000);
+  }
+</script>
+
+<Template let:args>
+  <FormActions {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args={{
+    submitLabel: 'Save',
+    cancelLabel: 'Cancel',
+    onCancel: () => console.log('Cancel clicked'),
+    onSubmit: () => console.log('Submit clicked'),
+  }}
+/>
+
+<Story
+  name="Submitting State"
+  args={{
+    isSubmitting: true,
+    submitLabel: 'Save Changes',
+  }}
+/>
+
+<Story
+  name="Success State"
+  args={{
+    isSuccess: true,
+    submitLabel: 'Save Changes',
+  }}
+/>
+
+<Story name="Interactive Submit">
+  <div class="bg-gray-50 p-8 rounded-lg">
+    <FormActions
+      submitLabel="Save Changes"
+      isSubmitting={submitting}
+      isSuccess={success}
+      onSubmit={handleSubmit}
+      onCancel={() => console.log('Cancelled')}
+    />
+  </div>
+</Story>
+
+<Story
+  name="No Cancel Button"
+  args={{
+    showCancel: false,
+    submitLabel: 'Continue',
+  }}
+/>
+
+<Story
+  name="Disabled State"
+  args={{
+    disabled: true,
+    submitLabel: 'Submit',
+  }}
+/>
+
+<Story
+  name="Custom Labels"
+  args={{
+    submitLabel: 'Confirm Payment',
+    cancelLabel: 'Go Back',
+  }}
+/>

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

@@ -0,0 +1,57 @@
+export namespace meta {
+    export let title: string;
+    export { FormActions as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace submitLabel {
+            let control: string;
+        }
+        namespace cancelLabel {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace isSubmitting {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace isSuccess {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        namespace disabled {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        namespace showCancel {
+            let control_5: string;
+            export { control_5 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  FormActionsProps */
+/** @typedef {typeof __propDef.events}  FormActionsEvents */
+/** @typedef {typeof __propDef.slots}  FormActionsSlots */
+export default class FormActions extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FormActionsProps = typeof __propDef.props;
+export type FormActionsEvents = typeof __propDef.events;
+export type FormActionsSlots = typeof __propDef.slots;
+import FormActions from './FormActions.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=FormActions.stories.svelte.d.ts.map

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

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