edvoyui-component-library-test-flight 0.0.21 → 0.0.23

package/src/components/dropdown/EUIMultiDropdown.stories.ts

@@ -0,0 +1,187 @@
+import { defineComponent } from "vue";
+import { Meta, StoryFn } from "@storybook/vue3";
+import EUIMultiDropdown from "./EUIMultiDropdown.vue";
+import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
+
+export default {
+  title: "Components/MultiDropdown",
+  tags: ["autodocs"],
+  component: EUIMultiDropdown,
+  argTypes: {
+    title: {
+      description: "The title of the dropdown menu.",
+      control: { type: "text" },
+      defaultValue: "My Students",
+    },
+    className: {
+      description: "Additional classes to apply to the dropdown button.",
+      control: { type: "text" },
+    },
+    menuItems: {
+      description: "An array of menu items, with optional submenus.",
+      control: { type: "object" },
+      defaultValue: [
+        { text: "All Students" },
+        { text: "My Students" },
+        { text: "Genie Completed Students" },
+        {
+          text: "Standard Filter",
+          subMenu: [
+            { text: "UKI Fair" },
+            { text: "Germany Q4' 24" },
+            { text: "Edvoy Express" },
+            { text: "Q1 2025 Pipeline" },
+          ],
+        },
+        {
+          text: "Custom Filter",
+          subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
+        },
+      ],
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disables the Menu, making it uneditable and unclickable.",
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = (args) =>
+  defineComponent({
+    components: { EUIMultiDropdown, ChevronDownStroke },
+    setup() {
+      const handleMenuItem = (item: any) => {
+        console.log("Menu clicked:", item);
+      };
+
+      const handleSubMenuItem = (subItem: any) => {
+        console.log("Submenu item clicked:", subItem);
+      };
+
+      return { args, handleMenuItem, handleSubMenuItem };
+    },
+    template: `<div class="min-h-96">
+    <EUIMultiDropdown v-bind="args" v-bind="args" @menuItem="handleMenuItem" @subMenuItem="handleSubMenuItem" /></div>`,
+  });
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "My Students",
+  className: "",
+  menuItems: [
+    { text: "All Students" },
+    { text: "My Students" },
+    { text: "Genie Completed Students" },
+    {
+      text: "Standard Filter",
+      subMenu: [
+        { text: "UKI Fair" },
+        { text: "Germany Q4' 24" },
+        { text: "Edvoy Express" },
+        { text: "Q1 2025 Pipeline" },
+      ],
+    },
+    {
+      text: "Custom Filter",
+      subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
+    },
+  ],
+};
+
+export const UseTemplate = Template.bind({});
+(UseTemplate.args = {
+  title: "My Students",
+  className:
+    "px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200",
+  menuItems: [
+    { text: "All Students" },
+    { text: "My Students" },
+    { text: "Genie Completed Students" },
+    {
+      text: "Standard Filter",
+      subMenu: [
+        { text: "UKI Fair" },
+        { text: "Germany Q4' 24" },
+        { text: "Edvoy Express" },
+        { text: "Q1 2025 Pipeline" },
+      ],
+    },
+    {
+      text: "Custom Filter",
+      subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
+    },
+  ],
+}),
+  (UseTemplate.parameters = {
+    docs: {
+      source: {
+        code: `<script lang="ts" setup>
+        const menuItems = [
+  {
+    "text": "All Students"
+  },
+  {
+    "text": "My Students"
+  },
+  {
+    "text": "Genie Completed Students"
+  },
+  {
+    "text": "Standard Filter",
+    "subMenu": [
+      {
+        "text": "UKI Fair"
+      },
+      {
+        "text": "Germany Q4' 24"
+      },
+      {
+        "text": "Edvoy Express"
+      },
+      {
+        "text": "Q1 2025 Pipeline"
+      }
+    ]
+  },
+  {
+    "text": "Custom Filter",
+    "subMenu": [
+      {
+        "text": "Application Intakes"
+      },
+      {
+        "text": "New Students"
+      }
+    ]
+  }
+];
+
+const handleMenuItem = (item: any) => {
+  console.log("Menu clicked:", item);
+};
+
+const handleSubMenuItem = (subItem: any) => {
+  console.log("Submenu item clicked:", subItem);
+};
+</script>
+<template>
+  <EUIMultiDropdown :menu-items="menuItems" @menuItem="handleMenuItem" @subMenuItem="handleSubMenuItem">
+    <template #dropdownName="{ open }">
+      <span>{{ title }}</span>
+      <ChevronDownStroke
+        :class="open ? 'text-gray-900 rotate-180' : 'text-gray-500'"
+        class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
+        aria-hidden="true"
+      />
+    </template>
+    <template #menu="{menuitem}">
+      {{menuitem.text}}
+    </template>
+    <template #submenu="{subItem}">
+      {{subItem.text}}
+    </template>
+  </EUIMultiDropdown>
+</template>`,
+      },
+    },
+  });

package/src/components/dropdown/EUIMultiDropdown.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="relative">
+    <!-- Main Dropdown Button -->
+    <button
+      type="button"
+      ref="dropdownButton"
+      :class="['inline-flex items-center text-sm font-semibold gap-x-2 capitalize outline-none focus:outline-none', className]"
+      :disabled="disabled"
+      @click="toggleDropdown()"
+    >
+      <slot name="dropdownName" :open="isOpen">
+         {{ title }}
+         <ChevronDownStroke :class="isOpen ? 'text-gray-900 rotate-180' : 'text-gray-500'"
+            class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
+            aria-hidden="true"
+        />
+      </slot>
+    </button>
+    <!-- Menu lists -->
+    <div v-if="isOpen && menuItems.length" class="absolute left-0 z-0 p-2 mt-1 transition-all duration-300 ease-in-out bg-white border border-gray-200 border-solid rounded-lg shadow-2xl top-full shadow-gray-300 min-w-36 max-w-64 w-max" @click.stop>
+      <div
+        v-for="item in menuItems"
+        :key="item.text"
+        class="relative flex items-center px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100"
+        @mouseenter="setActiveMenuItem(item.text)"
+        @mouseleave="clearActiveMenuItem"
+        @click.stop="$emit('menuItem', item)"
+      >
+        <div class="flex items-center justify-between w-full gap-2 text-sm font-medium text-gray-800 break-words hover:text-gray-900">
+          <slot name="menu" :menuitem="item">
+               {{ item.text }}
+               <ChevronDownStroke v-if="item.subMenu" :class="activeMenuItem === item.text ? 'text-gray-900 -rotate-90' : 'text-gray-500 rotate-0'"
+               class="ml-auto transition duration-300 ease-in-out transform size-6 group-hover:text-opacity-80"
+               aria-hidden="true" />
+          </slot>
+        </div>
+
+        <!-- Sub-menu lists-->
+        <div v-if="item.subMenu && activeMenuItem === item.text" class="absolute top-0 z-10 transition-all duration-300 ease-in-out left-full min-w-36 max-w-64 w-max">
+          <div class="p-2 bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300">
+              <div
+                v-for="subItem in item.subMenu"
+                :key="subItem.text"
+                class="flex items-center justify-between gap-2 px-3 py-2 text-sm font-medium text-gray-700 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-gray-900"
+                @click.stop="$emit('subMenuItem', subItem)"
+              >
+              <slot name="submenu" :subItem="subItem">
+                {{ subItem.text }}
+              </slot>
+              </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, PropType } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
+
+interface MenuItem {
+  text: string;
+  subMenu?: MenuItem[];
+}
+
+defineProps({
+  title: {
+    type: String,
+    default: "My Students",
+  },
+  className: {
+    type: String,
+    required: false,
+  },
+  menuItems: {
+    type: Array as PropType<MenuItem[]>,
+    default: () => [
+      { text: "All Students" },
+      { text: "My Students" },
+      { text: "Genie Completed Students" },
+      {
+        text: "Standard Filter",
+        subMenu: [
+          { text: "UKI Fair" },
+          { text: "Germany Q4' 24" },
+          { text: "Edvoy Express" },
+          { text: "Q1 2025 Pipeline" }
+        ]
+      },
+      {
+        text: "Custom Filter",
+        subMenu: [
+          { text: "Application Intakes" },
+          { text: "New Students" }
+        ]
+      }
+    ]
+  },
+  disabled: Boolean,
+});
+
+const isOpen = ref(false);
+const activeMenuItem = ref<string | null>(null);
+const dropdownButton = ref<HTMLElement | null>(null);
+
+defineEmits(['subMenuItem', 'menuItem'])
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+}
+
+const setActiveMenuItem = (text:string) => {
+  activeMenuItem.value = text;
+}
+
+const clearActiveMenuItem = () => {
+  activeMenuItem.value = null;
+}
+
+onClickOutside(dropdownButton, () => {
+  isOpen.value = false;
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/errorMessage/EUIErrorMessage.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIErrorMessage from "./EUIErrorMessage.vue"; // Adjust the path if necessary
+
+const meta = {
+  title: "Example/ErrorMessage",
+  component: EUIErrorMessage,
+  tags: ["autodocs"],
+  argTypes: {
+    name: {
+      control: "text", // Allows setting the field name
+      description: "The name of the input field, used as a key to display the error message",
+    },
+    errors: {
+      control: "object", // Allows setting errors as an object
+      description: "Object containing validation errors where keys are field names and values are the error messages",
+    },
+  },
+} satisfies Meta<typeof EUIErrorMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story to demonstrate error display
+export const Default: Story = {
+  args: {
+    name: "username",
+    errors: {
+      username: "This field is required.",
+    },
+  },
+};
+
+// Story for showing custom error message
+export const CustomError: Story = {
+  args: {
+    name: "email",
+    errors: {
+      email: "Please provide a valid email address.",
+    },
+  },
+};

package/src/components/errorMessage/EUIErrorMessage.vue

@@ -0,0 +1,25 @@
+<template>
+  <template v-if="Array.isArray(errors)">
+    <div class="text-red-500 text-xs font-medium first-letter:uppercase">
+      {{ errors?.at(0)?.$message ? errors?.at(0)?.$message : errors.at(0) }}
+    </div>
+  </template>
+  <template v-else>
+    <div class="text-red-500 text-xs font-medium first-letter:uppercase">
+      {{ name ? errors?.[name] : errors }}
+    </div>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from "vue";
+import { ValidationErrors, ErrorObject } from "../../utils/types";
+const props = defineProps({
+  name: { type: String, required: true },
+  errors: {
+    type: Object as PropType<ValidationErrors | ErrorObject[]>,
+    required: true,
+  }
+});
+const { errors, name } = toRefs(props);
+</script>

package/src/components/index.ts

@@ -0,0 +1,46 @@
+import "../style.scss";
+export { default as EUIButton } from "./button/EUIButton.vue";
+export { default as EUIInput } from "./input/EUIInput.vue";
+export { default as EUIInputNormal } from "./inputNormal/EUIInputNormal.vue";
+export { default as EUITelephone } from "./telephone/EUITelephone.vue";
+export { default as EUITextArea } from "./textArea/EUITextArea.vue";
+
+export { default as EUISelect } from "./select/EUISelect.vue";
+export { default as EUISelectSearch } from "./selectSearch/EUISelectSearch.vue";
+export { default as EUICheckbox } from "./checkbox/EUICheckbox.vue";
+export { default as EUIRadio } from "./radio/EUIRadio.vue";
+export { default as EUIToggle } from "./toggle/EUIToggle.vue";
+
+export { default as EUIAvatar } from "./avatar/EUIAvatar.vue";
+export { default as EUIStepperTimeline } from "./stepperTimeline/EUIStepperTimeline.vue";
+export { default as EUIStepperVertical } from "./stepperTimeline/EUIStepperVertical.vue";
+export { default as EUIStepperHorizontal } from "./stepperTimeline/EUIStepperHorizontal.vue";
+
+export { default as EUIAccordion } from "./accordion/EUIAccordion.vue";
+export { default as EUIPopover } from "./popover/EUIPopover.vue";
+export { default as EUIModal } from "./modal/EUIModal.vue";
+export { default as EUISlideover } from "./slideover/EUISlideover.vue";
+export { default as EUIDatepicker } from "./datepicker/EUIDatepicker.vue";
+
+export { default as EUITabs } from "./tabs/EUITabs.vue";
+export { default as EUIPillSelect } from "./pillSelect/EUIPillSelect.vue";
+export { default as EUITimeLine } from "./timeLine/EUITimeLine.vue";
+export { default as EUITag } from "./tag/EUITag.vue";
+
+export { default as EUIDashboardTable } from "./table/EUIDashboardTable.vue";
+export { default as EUIPagination } from "./table/EUIPagination.vue";
+export { default as EUIPageLimit } from "./table/EUIPageLimit.vue";
+export { default as EUITableCheckbox } from "./table/EUITableCheckbox.vue";
+
+export { default as EUITable } from "./table/EUITable.vue";
+export { default as EUIStudentPagination } from "./table/EUIStudentPagination.vue";
+export { default as EUIMultiDropdown } from "./dropdown/EUIMultiDropdown.vue";
+
+export { default as EUILoader } from "./loader/EUILoader.vue";
+export { default as EUICircleLoader } from "./loader/EUICircleLoader.vue";
+export { default as EUICubeLoader } from "./loader/EUICubeLoader.vue";
+export { default as EUISquareLoader } from "./loader/EUISquareLoader.vue";
+export { default as EUIErrorMessage } from "./errorMessage/EUIErrorMessage.vue";
+
+export { default as EUITooltip } from "./tooltip/EUITooltip.vue";
+export { default as EUISearch } from "./searchInput/EUISearch.vue";

package/src/components/input/EUIInput.stories.ts

@@ -0,0 +1,174 @@
+import { expect, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIInput from "./EUIInput.vue";
+import { UserCircleIcon } from "@heroicons/vue/24/outline";
+
+// Meta configuration for the component's stories
+const meta = {
+  title: "Forms/Input",
+  component: EUIInput,
+  tags: ["autodocs"],
+  argTypes: {
+    modelValue: {
+      control: "text",
+      description:
+        "The value of the input. This is a two-way binding property, used to reflect the current value of the input field.",
+    },
+    name: {
+      control: "text",
+      description:
+        "The `name` attribute of the input, typically used for form identification and validation.",
+    },
+    label: {
+      control: "text",
+      description:
+        "The label for the input field, usually displayed above or inside the input.",
+    },
+    type: {
+      control: {
+        type: "select",
+        options: [
+          "text",
+          "number",
+          "email",
+          "password",
+          "search",
+          "date",
+          "url",
+        ],
+      },
+      description:
+        "Specifies the type of input, such as `text`, `number`, `email`, etc.",
+    },
+    placeholder: {
+      control: "text",
+      description:
+        "A short hint that describes the expected value when the input is empty.",
+    },
+    autoFocus: {
+      control: "boolean",
+      description:
+        "Automatically focuses the input field when the page loads or the component mounts.",
+    },
+    required: {
+      control: "boolean",
+      description:
+        "Marks the field as required, showing validation for non-empty input.",
+    },
+    readonly: {
+      control: "boolean",
+      description:
+        "Makes the input field read-only, which means users can see the value but cannot edit it.",
+    },
+    disabled: {
+      control: "boolean",
+      description:
+        "Disables the input field, making it uneditable and unclickable.",
+    },
+    iconType: {
+      control: "select",
+      options: ["", "startIcon", "endIcon"],
+      description:
+        "Defines the position of the icon. It can be placed at the `start` or `end` of the input field.",
+    },
+    icon: {
+      control: { type: "text" },
+      description:
+        "Specifies an SVG icon or icon component to be displayed inside the input field.",
+    },
+    errors: {
+      control: "object",
+      description:
+        "An object containing error messages or validation information, typically used for form validation.",
+    },
+  },
+} satisfies Meta<typeof EUIInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    modelValue: "",
+    label: "User Name",
+    type: "text",
+    placeholder: "Enter fullname here..",
+    name: "userName",
+    required: false,
+    readonly: false,
+    disabled: false,
+    autoFocus: false,
+  },
+};
+
+export const TypeOfInput: Story = {
+  args: {
+    modelValue: "",
+    name: "inputName",
+    label: "Email Address",
+    type: "email",
+    placeholder: "Enter your email here...",
+    disabled: false,
+    errors: {
+      message: "Enter valid mobile number",
+    },
+  },
+  render: (args) => ({
+    components: { EUIInput },
+    setup() {
+      return { args };
+    },
+    template: '<div class="max-w-xl"><EUIInput v-bind="args" /></div>',
+  }),
+};
+
+// Add Storybook interaction test
+export const InputValue: Story = {
+  args: {
+    modelValue: "John Cena",
+    label: "User Name",
+    placeholder: "Enter fullname here..",
+    name: "inputName",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const inputElement = canvas.getByPlaceholderText("Enter fullname here..");
+    await userEvent.type(inputElement, "Storybook Test");
+    await expect(inputElement).toBe("Storybook Test");
+  },
+};
+
+export const IconUsingStart: Story = {
+  args: {
+    iconType: "startIcon",
+    icon: UserCircleIcon,
+    label: "User Name",
+    placeholder: "Enter fullname here..",
+    name: "inputStarIcon",
+    modelValue: "",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const inputElement = canvas.getByPlaceholderText("Enter fullname here..");
+    await userEvent.type(inputElement, "Jane Doe");
+    expect(inputElement).toBe("Jane Doe");
+  },
+};
+
+export const IconUsingEnd: Story = {
+  args: {
+    modelValue: "",
+    iconType: "endIcon",
+    icon: UserCircleIcon,
+    label: "User Name",
+    placeholder: "Enter fullname here..",
+    name: "inputEndIcon",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const inputElement = canvas.getByPlaceholderText("Enter fullname here..");
+    await userEvent.type(inputElement, "Jane Doe");
+    expect(inputElement).toBe("Jane Doe");
+  },
+};