@getmicdrop/svelte-components 1.0.2 → 1.0.4

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

@@ -0,0 +1,28 @@
+/** @typedef {typeof __propDef.props}  HomeProps */
+/** @typedef {typeof __propDef.events}  HomeEvents */
+/** @typedef {typeof __propDef.slots}  HomeSlots */
+export default class Home extends SvelteComponent<{
+    color?: string | undefined;
+    size?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HomeProps = typeof __propDef.props;
+export type HomeEvents = typeof __propDef.events;
+export type HomeSlots = 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=Home.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Home.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/Home.svelte.js"],"names":[],"mappings":"AAgBA,mDAAmD;AACnD,qDAAqD;AACrD,mDAAmD;AAEnD;;;;;;CACC;wBALa,OAAO,SAAS,CAAC,KAAK;yBACtB,OAAO,SAAS,CAAC,MAAM;wBACvB,OAAO,SAAS,CAAC,KAAK;gCAlBJ,QAAQ;AAexC;;;;;;;;;;;EAAkG"}

package/dist/components/Icons/Icon.spec.d.ts

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

package/dist/components/Icons/Icon.spec.d.ts.map

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

package/dist/components/Icons/Icon.spec.js

@@ -0,0 +1,175 @@
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import Icon from "./Icon.svelte";
+
+describe("Icon Component Tests", () => {
+  test("Renders Home icon", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Shows icon", () => {
+    const { container } = render(Icon, { props: { name: "Shows" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Availability icon", () => {
+    const { container } = render(Icon, { props: { name: "Availability" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Profile icon", () => {
+    const { container } = render(Icon, { props: { name: "Profile" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Payment icon", () => {
+    const { container } = render(Icon, { props: { name: "Payment" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Notification icon", () => {
+    const { container } = render(Icon, { props: { name: "Notification" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Signout icon", () => {
+    const { container } = render(Icon, { props: { name: "Signout" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ErrorCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "ErrorCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Back icon", () => {
+    const { container } = render(Icon, { props: { name: "Back" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Shows error message for unknown icon", () => {
+    render(Icon, { props: { name: "UnknownIcon" } });
+    expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
+  });
+
+  test("Default size is 20", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    // Check width or height attribute
+    expect(svg).toHaveAttribute("width", "20");
+  });
+
+  test("Accepts custom size prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", size: "32" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("width", "32");
+  });
+
+  test("Default color is currentColor", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    // Color is typically applied to stroke or fill
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Accepts custom color prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", color: "red" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders More icon", () => {
+    const { container } = render(Icon, { props: { name: "More" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Info icon", () => {
+    const { container } = render(Icon, { props: { name: "Info" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Message icon", () => {
+    const { container } = render(Icon, { props: { name: "Message" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Reload icon", () => {
+    const { container } = render(Icon, { props: { name: "Reload" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Copy icon", () => {
+    const { container } = render(Icon, { props: { name: "Copy" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Cross icon", () => {
+    const { container } = render(Icon, { props: { name: "Cross" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders DownArrow icon", () => {
+    const { container } = render(Icon, { props: { name: "DownArrow" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders MoreHori icon", () => {
+    const { container } = render(Icon, { props: { name: "MoreHori" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircleOutline icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircleOutline" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+});

package/dist/components/Icons/Icon.stories.svelte

@@ -0,0 +1,101 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import Icon from "./Icon.svelte";
+
+  export const meta = {
+    title: "Components/Icons",
+    component: Icon,
+    argTypes: {
+      name: { control: "text" },
+      size: { control: "text" },
+      color: { control: "color" },
+    },
+  };
+
+  const iconNames = [
+    "Home",
+    "Shows",
+    "Availability",
+    "Profile",
+    "Payment",
+    "Notification",
+    "Signout",
+    "More",
+    "MoreHori",
+    "Info",
+    "ChevronLeft",
+    "ChevronRight",
+    "CheckCircle",
+    "CheckCircleOutline",
+    "ErrorCircle",
+    "ArrowLeft",
+    "ArrowRight",
+    "Back",
+    "DownArrow",
+    "Message",
+    "Reload",
+    "Copy",
+    "Cross",
+  ];
+</script>
+
+<Template let:args>
+  <Icon {...args} />
+</Template>
+
+<Story name="All Icons">
+  <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6 p-4">
+    {#each iconNames as iconName}
+      <div class="flex flex-col items-center gap-2 p-3 border rounded-lg hover:bg-gray-50">
+        <Icon name={iconName} size="24" />
+        <span class="text-xs text-gray-600 text-center">{iconName}</span>
+      </div>
+    {/each}
+  </div>
+</Story>
+
+<Story name="Icon Sizes">
+  <div class="flex items-end gap-6 p-4">
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="16" />
+      <span class="text-xs text-gray-600">16px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="20" />
+      <span class="text-xs text-gray-600">20px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="24" />
+      <span class="text-xs text-gray-600">24px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="32" />
+      <span class="text-xs text-gray-600">32px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="48" />
+      <span class="text-xs text-gray-600">48px</span>
+    </div>
+  </div>
+</Story>
+
+<Story name="Icon Colors">
+  <div class="flex items-center gap-6 p-4">
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="CheckCircle" size="32" color="#22c55e" />
+      <span class="text-xs text-gray-600">Success</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="ErrorCircle" size="32" color="#ef4444" />
+      <span class="text-xs text-gray-600">Error</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Info" size="32" color="#3b82f6" />
+      <span class="text-xs text-gray-600">Info</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Notification" size="32" color="#f59e0b" />
+      <span class="text-xs text-gray-600">Warning</span>
+    </div>
+  </div>
+</Story>

package/dist/components/Icons/Icon.stories.svelte.d.ts

@@ -0,0 +1,44 @@
+export namespace meta {
+    export let title: string;
+    export { Icon as component };
+    export namespace argTypes {
+        namespace name {
+            let control: string;
+        }
+        namespace size {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace color {
+            let control_2: string;
+            export { control_2 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  IconProps */
+/** @typedef {typeof __propDef.events}  IconEvents */
+/** @typedef {typeof __propDef.slots}  IconSlots */
+export default class Icon extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+import Icon from "./Icon.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Icon.stories.svelte.d.ts.map

package/dist/components/Icons/Icon.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/Icon.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA2GA,mDAAmD;AACnD,qDAAqD;AACrD,mDAAmD;AAEnD;;;;;CACC;wBALa,OAAO,SAAS,CAAC,KAAK;yBACtB,OAAO,SAAS,CAAC,MAAM;wBACvB,OAAO,SAAS,CAAC,KAAK;iBAzGjB,eAAe;gCAJF,QAAQ;AA0GxC;;;;;;;;;;EAAgF"}

package/dist/components/Icons/Icon.svelte

@@ -0,0 +1,66 @@
+<script>
+  import Home from "./Home.svelte";
+  import Shows from "./Shows.svelte";
+  import Availability from "./Availability.svelte";
+  import Profile from "./Profile.svelte";
+  import Payment from "./Payment.svelte";
+  import Notification from "./Notification.svelte";
+  import Signout from "./Signout.svelte";
+  import More from "./More.svelte";
+  import Info from "./Info.svelte";
+
+  import ChevronLeft from "./ChevronLeft.svelte";
+  import ChevronRight from "./ChevronRight.svelte";
+  import CheckCircle from "./CheckCircle.svelte";
+  import ErrorCircle from "./ErrorCircle.svelte";
+  import ArrowLeft from "./ArrowLeft.svelte";
+  import Back from "./Back.svelte";
+  import DownArrow from "./DownArrow.svelte";
+  import Message from "./Message.svelte";
+  import ArrowRight from "./ArrowRight.svelte";
+  import Reload from "./Reload.svelte";
+  import CheckCircleOutline from "./CheckCircleOutline.svelte";
+  import Copy from "./Copy.svelte";
+  import Cross from "./Cross.svelte";
+  import MoreHori from "./MoreHori.svelte";
+
+  const iconMap = {
+    Home,
+    Shows,
+    Availability,
+    Profile,
+    Payment,
+    Notification,
+    More,
+    MoreHori,
+    Info,
+    ChevronLeft,
+    ChevronRight,
+    Signout,
+    CheckCircle,
+    CheckCircleOutline,
+    ErrorCircle,
+    ArrowLeft,
+    ArrowRight,
+    Back,
+    DownArrow,
+    Message,
+    Reload,
+    Copy,
+    Cross,
+  };
+
+  export let name;
+  export let size = "20";
+  export let color = "currentColor";
+
+  let Component;
+
+  $: Component = iconMap[name] || null;
+</script>
+
+{#if Component}
+  <svelte:component this={Component} {size} {color} />
+{:else}
+  <span>Icon "{name}" not found.</span>
+{/if}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/Icon.svelte.js"],"names":[],"mappings":"AAkGA,mDAAmD;AACnD,qDAAqD;AACrD,mDAAmD;AAEnD;;;;;;;CACC;wBALa,OAAO,SAAS,CAAC,KAAK;yBACtB,OAAO,SAAS,CAAC,MAAM;wBACvB,OAAO,SAAS,CAAC,KAAK;gCApGJ,QAAQ;AAiGxC;;;;;;;;;;;;EAAkG"}