@getmicdrop/svelte-components 1.0.1 → 1.0.3

package/dist/components/pages/profile/profile-form.stories.svelte

@@ -0,0 +1,279 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import ProfileForm from "./profile-form.svelte";
+
+  export const meta = {
+    title: "Pages/Profile/ProfileForm",
+    component: ProfileForm,
+    argTypes: {
+      formData: { control: "object" },
+      formErrors: { control: "object" },
+      fields: { control: "object" },
+      isPhoneVerified: { control: "boolean" },
+    },
+  };
+
+  const defaultFields = {
+    basicInfo: [
+      { name: "firstName", label: "First Name", placeholder: "John", required: true },
+      { name: "lastName", label: "Last Name", placeholder: "Doe", required: true },
+      { name: "email", label: "Email address", placeholder: "name@example.com", required: true, type: "email" },
+      { name: "phone", label: "Phone", placeholder: "Enter 10 digit phone number", required: true, type: "tel" },
+    ],
+    extraDetails: [
+      { name: "ethnicity", label: "Ethnicity", placeholder: "Select ethnicity", type: "multiselect" },
+      { name: "gender", label: "Gender", placeholder: "Select gender", required: true, type: "customDropdown" },
+      { name: "location", label: "Location", placeholder: "City, State", required: true, type: "placesAutocomplete" },
+      { name: "bio", label: "Bio", placeholder: "Tell us about yourself", type: "textarea", maxLength: 500 },
+      { name: "introCredits", label: "Intro Credits", placeholder: "Your stage introduction", type: "textarea", maxLength: 200 },
+    ],
+    socialMedia: [
+      { name: "instagram", label: "Instagram", placeholder: "username" },
+      { name: "facebook", label: "Facebook", placeholder: "username" },
+      { name: "twitter", label: "Twitter", placeholder: "username" },
+      { name: "tiktok", label: "TikTok", placeholder: "username" },
+    ],
+  };
+</script>
+
+<Template let:args>
+  <div class="max-w-4xl mx-auto p-6 bg-gray-50">
+    <ProfileForm {...args} />
+  </div>
+</Template>
+
+<Story
+  name="Empty Profile Form"
+  args={{
+    formData: {
+      basicInfo: {
+        firstName: "",
+        lastName: "",
+        email: "",
+        phone: "",
+        stageName: "",
+        useStageName: false,
+      },
+      extraDetails: {
+        ethnicity: [],
+        gender: "",
+        location: "",
+        googleLocationId: "",
+        googleLocationNameCache: "",
+        bio: "",
+        introCredits: "",
+      },
+      socialMedia: {
+        instagram: "",
+        facebook: "",
+        twitter: "",
+        tiktok: "",
+      },
+    },
+    formErrors: {
+      basicInfo: {},
+      extraDetails: {},
+      socialMedia: {},
+    },
+    fields: defaultFields,
+    isPhoneVerified: false,
+  }}
+/>
+
+<Story
+  name="Partially Filled Profile"
+  args={{
+    formData: {
+      basicInfo: {
+        firstName: "John",
+        lastName: "Smith",
+        email: "john.smith@example.com",
+        phone: "5551234567",
+        stageName: "",
+        useStageName: false,
+      },
+      extraDetails: {
+        ethnicity: [],
+        gender: "",
+        location: "",
+        googleLocationId: "",
+        googleLocationNameCache: "",
+        bio: "",
+        introCredits: "",
+      },
+      socialMedia: {
+        instagram: "",
+        facebook: "",
+        twitter: "",
+        tiktok: "",
+      },
+    },
+    formErrors: {
+      basicInfo: {},
+      extraDetails: {},
+      socialMedia: {},
+    },
+    fields: defaultFields,
+    isPhoneVerified: false,
+  }}
+/>
+
+<Story
+  name="Complete Profile"
+  args={{
+    formData: {
+      basicInfo: {
+        firstName: "Sarah",
+        lastName: "Johnson",
+        email: "sarah.johnson@comedy.com",
+        phone: "5559876543",
+        stageName: "SJ the Comedian",
+        useStageName: true,
+      },
+      extraDetails: {
+        ethnicity: [2, 3],
+        gender: "female",
+        location: "New York, NY",
+        googleLocationId: "ChIJOwg_06VPwokRYv534QaPC8g",
+        googleLocationNameCache: "New York, NY, USA",
+        bio: "Professional comedian with 10 years of experience. Specializing in observational humor and storytelling.",
+        introCredits: "Please welcome to the stage, the hilarious Sarah Johnson!",
+      },
+      socialMedia: {
+        instagram: "sarahjcomedy",
+        facebook: "sarahjohnsoncomedy",
+        twitter: "sjcomedy",
+        tiktok: "sarahjcomedy",
+      },
+    },
+    formErrors: {
+      basicInfo: {},
+      extraDetails: {},
+      socialMedia: {},
+    },
+    fields: defaultFields,
+    isPhoneVerified: true,
+  }}
+/>
+
+<Story
+  name="With Validation Errors"
+  args={{
+    formData: {
+      basicInfo: {
+        firstName: "",
+        lastName: "",
+        email: "invalid-email",
+        phone: "123",
+        stageName: "",
+        useStageName: false,
+      },
+      extraDetails: {
+        ethnicity: [],
+        gender: "",
+        location: "",
+        googleLocationId: "",
+        googleLocationNameCache: "",
+        bio: "",
+        introCredits: "",
+      },
+      socialMedia: {
+        instagram: "",
+        facebook: "",
+        twitter: "",
+        tiktok: "",
+      },
+    },
+    formErrors: {
+      basicInfo: {
+        firstName: "First name is required",
+        lastName: "Last name is required",
+        email: "Please enter a valid email address",
+        phone: "Phone number must be 10 digits",
+      },
+      extraDetails: {
+        gender: "Please select a gender",
+        location: "Location is required",
+      },
+      socialMedia: {},
+    },
+    fields: defaultFields,
+    isPhoneVerified: false,
+  }}
+/>
+
+<Story
+  name="Phone Verified Profile"
+  args={{
+    formData: {
+      basicInfo: {
+        firstName: "Mike",
+        lastName: "Davis",
+        email: "mike.davis@example.com",
+        phone: "5552468135",
+        stageName: "Mikey D",
+        useStageName: true,
+      },
+      extraDetails: {
+        ethnicity: [6],
+        gender: "male",
+        location: "Los Angeles, CA",
+        googleLocationId: "ChIJE9on3F3HwoAR9AhGJW_fL-I",
+        googleLocationNameCache: "Los Angeles, CA, USA",
+        bio: "Stand-up comedian and improv artist based in LA. Love making people laugh!",
+        introCredits: "Give it up for the one and only Mikey D!",
+      },
+      socialMedia: {
+        instagram: "mikeydcomedy",
+        facebook: "mikedaviscomedy",
+        twitter: "mikeyd",
+        tiktok: "mikeydcomedy",
+      },
+    },
+    formErrors: {
+      basicInfo: {},
+      extraDetails: {},
+      socialMedia: {},
+    },
+    fields: defaultFields,
+    isPhoneVerified: true,
+  }}
+/>
+
+<Story
+  name="With Stage Name"
+  args={{
+    formData: {
+      basicInfo: {
+        firstName: "Jennifer",
+        lastName: "Lee",
+        email: "jennifer@example.com",
+        phone: "5551357924",
+        stageName: "Jenny Laughs",
+        useStageName: true,
+      },
+      extraDetails: {
+        ethnicity: [1],
+        gender: "female",
+        location: "Seattle, WA",
+        googleLocationId: "ChIJVTPokywQkFQRmtVEaUZlJRA",
+        googleLocationNameCache: "Seattle, WA, USA",
+        bio: "Comedy is my passion! Performing since 2015.",
+        introCredits: "Putting the funny in Seattle, it's Jenny Laughs!",
+      },
+      socialMedia: {
+        instagram: "jennylaughs",
+        facebook: "",
+        twitter: "jennylaughs",
+        tiktok: "jennylaughs",
+      },
+    },
+    formErrors: {
+      basicInfo: {},
+      extraDetails: {},
+      socialMedia: {},
+    },
+    fields: defaultFields,
+    isPhoneVerified: true,
+  }}
+/>

package/dist/components/pages/profile/profile-form.stories.svelte.d.ts

@@ -0,0 +1,48 @@
+export namespace meta {
+    export let title: string;
+    export { ProfileForm as component };
+    export namespace argTypes {
+        namespace formData {
+            let control: string;
+        }
+        namespace formErrors {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace fields {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace isPhoneVerified {
+            let control_3: string;
+            export { control_3 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  ProfileFormProps */
+/** @typedef {typeof __propDef.events}  ProfileFormEvents */
+/** @typedef {typeof __propDef.slots}  ProfileFormSlots */
+export default class ProfileForm extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ProfileFormProps = typeof __propDef.props;
+export type ProfileFormEvents = typeof __propDef.events;
+export type ProfileFormSlots = typeof __propDef.slots;
+import ProfileForm from "./profile-form.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=profile-form.stories.svelte.d.ts.map

package/dist/components/pages/profile/profile-form.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-form.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/profile/profile-form.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2QA,0DAA0D;AAC1D,4DAA4D;AAC5D,0DAA0D;AAE1D;;;;;CACC;+BALa,OAAO,SAAS,CAAC,KAAK;gCACtB,OAAO,SAAS,CAAC,MAAM;+BACvB,OAAO,SAAS,CAAC,KAAK;wBAzQV,uBAAuB;gCAJjB,QAAQ;AA0QxC;;;;;;;;;;EAAgF"}