@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/components/Input/Input.stories.svelte

@@ -0,0 +1,140 @@
+<script context="module">
+  import Input from "./Input.svelte";
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+
+  import ShareIcon from "../../assets/svg/share-08.svg";
+  import Pin from "./../../assets/icons/tick-01.png";
+
+  export const meta = {
+    title: "Components/Input",
+    component: Input,
+    argTypes: {
+      type: { control: "text" },
+      label: { control: "text" },
+      placeholder: { control: "text" },
+      className: { control: "text" },
+      id: { control: "text" },
+      name: { control: "text" },
+      maxlength: { control: "number" },
+      minlength: { control: "number" },
+      required: { control: "boolean" },
+      disabled: { control: "boolean" },
+      optional: { control: "boolean" },
+      errorText: { control: "text" },
+    },
+  };
+
+  const handleInput = (event) => {
+    const value = event.target.value;
+    console.log(value);
+  };
+</script>
+
+<Template let:args>
+  <Input on:change={handleInput} {...args} />
+</Template>
+
+<Story
+  name="Email Input"
+  args={{
+    type: "email",
+    label: "Email",
+    placeholder: "Enter your email",
+    errorText: "Please enter a valid email",
+    size: "full",
+  }}
+/>
+
+<Story
+  name="Text Input"
+  args={{
+    type: "text",
+    label: "Full Name",
+    placeholder: "Enter your full name",
+    size: "full",
+  }}
+/>
+
+<Story name="Text Area">
+  <Input
+    type="textarea"
+    id="texarea"
+    name="textarea"
+    label="Text Area"
+    placeholder="Write a text here"
+  />
+</Story>
+
+<Story
+  name="Password"
+  args={{
+    type: "password",
+    label: "Password",
+    placeholder: "Enter password",
+    size: "full",
+    required: true,
+    helperText: "Password must be at least 8 characters",
+  }}
+/>
+
+<Story
+  name="Input with Helper Text"
+  args={{
+    type: "text",
+    label: "Address",
+    placeholder: "Enter address",
+    size: "full",
+    helperText: "Include street, city, and zip code.",
+  }}
+/>
+
+<Story
+  name="Input with Icon"
+  args={{
+    type: "text",
+    label: "Input with Icon",
+    placeholder: "Input with Icon",
+    size: "full",
+    icon: Pin,
+  }}
+/>
+
+<Story
+  name="Credit Card"
+  args={{
+    type: "creditCardNumber",
+    label: "Card Number",
+    placeholder: "1234 5678 9012 3456",
+    size: "full",
+    required: true,
+    maxlength: 19,
+    minlength: 19,
+    errorText: "Please enter a valid card number",
+  }}
+/>
+
+<Story
+  name="Phone Number"
+  args={{
+    type: "phoneNumber",
+    label: "Phone Number",
+    placeholder: "xxx-xxx-xxxx",
+    size: "full",
+    required: true,
+    maxlength: 12,
+    minlength: 10,
+    errorText: "Please enter a valid phone number",
+  }}
+/>
+
+<Story
+  name="Input with Error State"
+  args={{
+    type: "text",
+    label: "Required Field",
+    placeholder: "This field is required",
+    size: "full",
+    required: true,
+    errorText: "This field is required",
+  }}
+/>

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

@@ -0,0 +1,80 @@
+export namespace meta {
+    export let title: string;
+    export { Input as component };
+    export namespace argTypes {
+        namespace type {
+            let control: string;
+        }
+        namespace label {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace placeholder {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace className {
+            let control_3: string;
+            export { control_3 as control };
+        }
+        namespace id {
+            let control_4: string;
+            export { control_4 as control };
+        }
+        namespace name {
+            let control_5: string;
+            export { control_5 as control };
+        }
+        namespace maxlength {
+            let control_6: string;
+            export { control_6 as control };
+        }
+        namespace minlength {
+            let control_7: string;
+            export { control_7 as control };
+        }
+        namespace required {
+            let control_8: string;
+            export { control_8 as control };
+        }
+        namespace disabled {
+            let control_9: string;
+            export { control_9 as control };
+        }
+        namespace optional {
+            let control_10: string;
+            export { control_10 as control };
+        }
+        namespace errorText {
+            let control_11: string;
+            export { control_11 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  InputProps */
+/** @typedef {typeof __propDef.events}  InputEvents */
+/** @typedef {typeof __propDef.slots}  InputSlots */
+export default class Input extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+import Input from "./Input.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Input.stories.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Input.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoHA,oDAAoD;AACpD,sDAAsD;AACtD,oDAAoD;AAEpD;;;;;CACC;yBALa,OAAO,SAAS,CAAC,KAAK;0BACtB,OAAO,SAAS,CAAC,MAAM;yBACvB,OAAO,SAAS,CAAC,KAAK;kBAnHhB,gBAAgB;gCAHJ,QAAQ;AAmHxC;;;;;;;;;;EAAgF"}