edvoyui-component-library-test-flight 0.0.22 → 0.0.24

package/src/components/button/EUIButton.stories.ts

@@ -0,0 +1,252 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUIButton from "./EUIButton.vue"; // Adjust the path if necessary
+import { HomeIcon } from "@heroicons/vue/24/outline";
+
+const meta = {
+  title: "Example/Button",
+  component: EUIButton,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "select", options: ["button", "submit", "reset"] },
+      description: "The type of button.",
+    },
+    size: {
+      control: { type: "select", options: ["xs", "sm", "md", "lg"] },
+      description: "Size of the button.",
+    },
+    color: {
+      control: {
+        type: "select",
+        options: ["black", "white", "danger", "success", "purple", "primary"],
+      },
+      description: "The color theme of the button.",
+    },
+    iconType: {
+      control: {
+        type: "select",
+        options: ["", "startIcon", "endIcon", "icon"],
+      },
+      description:
+        "Defines the position of the icon. It can be placed at the `start` or `end` and `icon` of the button.",
+    },
+    icon: {
+      control: { type: "text" },
+      description:
+        "Specifies an SVG icon or icon component to be displayed inside the input field.",
+    },
+    loading: {
+      control: "boolean",
+      description: "Shows a loading spinner if true.",
+    },
+    rounded: {
+      control: "boolean",
+      description: "button rounded if true.",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disables the button if true.",
+    },
+    onClick: { action: "clicked" },
+  },
+} satisfies Meta<typeof EUIButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default button story with default slot content
+export const Default: Story = {
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["button", "submit", "reset"],
+    },
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg"],
+    },
+    color: {
+      control: "select",
+      options: ["black", "white", "danger", "success", "purple", "primary"],
+    },
+    iconType: {
+      control: "select",
+      options: ["", "startIcon", "endIcon", "icon"],
+    },
+  },
+  args: {
+    type: "button",
+    size: "md",
+    color: "purple",
+  },
+  render: (args) => ({
+    components: { EUIButton },
+    setup() {
+      return { args };
+    },
+    template: `<EUIButton v-bind="args">Button</EUIButton>`,
+  }),
+};
+
+export const Size: Story = {
+  args: {
+    color: "purple",
+    size: "md",
+  },
+  render: (args) => ({
+    components: { EUIButton },
+    setup() {
+      return { args };
+    },
+    template: `<div class="space-x-4 inline-flex items-end">
+    <EUIButton v-bind="args" size="xs">Button</EUIButton>
+    <EUIButton v-bind="args" size="sm">Button</EUIButton>
+    <EUIButton v-bind="args" size="md">Button</EUIButton>
+    <EUIButton v-bind="args" size="lg">Button</EUIButton>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+<EUIButton type="button" size="xs" color="black">Button</EUIButton>
+<EUIButton type="button" size="sm" color="white">Button</EUIButton>
+<EUIButton type="button" size="md" color="success">Button</EUIButton>
+<EUIButton type="button" size="lg" color="danger">Button</EUIButton>
+</template>`,
+      },
+    },
+  },
+};
+
+export const Colors: Story = {
+  args: {
+    size: "md",
+    color: "purple",
+  },
+  render: (args) => ({
+    components: { EUIButton },
+    setup() {
+      return { args };
+    },
+    template: `<div class="space-x-4 inline-flex items-end">
+    <EUIButton v-bind="args" color="black">Button</EUIButton>
+    <EUIButton v-bind="args" color="white">Button</EUIButton>
+    <EUIButton v-bind="args" color="success">Button</EUIButton>
+    <EUIButton v-bind="args" color="danger">Button</EUIButton>
+    <EUIButton v-bind="args" color="purple">Button</EUIButton>
+    <EUIButton v-bind="args" color="primary">Button</EUIButton>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+<EUIButton type="button" size="md" color="black">Button</EUIButton>
+<EUIButton type="button" size="md" color="white">Button</EUIButton>
+<EUIButton type="button" size="md" color="success">Button</EUIButton>
+<EUIButton type="button" size="md" color="danger">Button</EUIButton>
+<EUIButton type="button" size="md" color="purple">Button</EUIButton>
+<EUIButton type="button" size="md" color="primary">Button</EUIButton>
+</template>`,
+      },
+    },
+  },
+};
+
+export const Icons: Story = {
+  args: {
+    type: "button",
+    size: "md",
+    color: "primary",
+    iconType: "startIcon",
+    icon: HomeIcon,
+  },
+  render: (args) => ({
+    components: { EUIButton },
+    setup() {
+      return { args };
+    },
+    template: `<div class="space-x-4 inline-flex items-end">
+      <EUIButton v-bind="args" iconType="startIcon">Home</EUIButton>
+      <EUIButton v-bind="args" iconType="endIcon">Home</EUIButton>
+      <EUIButton v-bind="args" iconType="icon"></EUIButton>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+<EUIButton color="primary" size="md" iconType="startIcon" :icon="HomeIcon">Home</EUIButton>
+<EUIButton color="primary" size="md" iconType="endIcon" :icon="HomeIcon">Home</EUIButton>
+<EUIButton color="primary" size="md" iconType="icon" :icon="HomeIcon"></EUIButton>
+</template>`,
+      },
+    },
+  },
+};
+
+export const RoundedButton: Story = {
+  args: {
+    type: "button",
+    size: "md",
+    color: "primary",
+    rounded: true,
+    iconType: "startIcon",
+    icon: HomeIcon,
+  },
+  render: (args) => ({
+    components: { EUIButton },
+    setup() {
+      return { args };
+    },
+    template: `<div class="space-x-4 inline-flex items-end">
+      <EUIButton v-bind="args" iconType="startIcon">Home</EUIButton>
+      <EUIButton v-bind="args" iconType="endIcon">Home</EUIButton>
+      <EUIButton v-bind="args" iconType="icon"></EUIButton>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+<EUIButton color="primary" rounded size="md" iconType="startIcon" :icon="HomeIcon">Home</EUIButton>
+<EUIButton color="primary" rounded size="md" iconType="endIcon" :icon="HomeIcon">Home</EUIButton>
+<EUIButton color="primary" rounded size="md" iconType="icon" :icon="HomeIcon"></EUIButton>
+</template>`,
+      },
+    },
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    type: "button",
+    size: "md",
+    color: "primary",
+    loading: true,
+  },
+  render: (args) => ({
+    components: { EUIButton },
+    setup() {
+      return { args };
+    },
+    template: `<EUIButton v-bind="args">Loading...</EUIButton>`,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    type: "button",
+    size: "md",
+    color: "purple",
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { EUIButton },
+    setup() {
+      return { args };
+    },
+    template: `<EUIButton v-bind="args">Disabled</EUIButton>`,
+  }),
+};

package/src/components/button/EUIButton.vue

@@ -0,0 +1,151 @@
+<template>
+  <button
+    :type="type"
+    :size="size"
+    :color="color"
+    :iconType="iconType"
+    v-bind="$attrs"
+    :class="['capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5', rounded ?'rounded-full':'rounded-md', btnClass]"
+    :disabled="disabled"
+    :loading="loading"
+    :icon="icon"
+    @click="handleClick()"
+  >
+    <component
+      :is="icon"
+      v-if="iconType === 'icon' || iconType === 'startIcon'"
+      :class="[iconWidth]"
+    />
+    <slot />
+    <component :is="icon" v-if="iconType === 'endIcon'" :class="[iconWidth]" />
+
+    <svg
+      v-if="loading"
+      class="animate-spin"
+      :class="[iconWidth]"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed, PropType } from "vue";
+
+const emit = defineEmits(["click"]);
+const handleClick = () => [emit("click")];
+
+const props = defineProps({
+  type: {
+    type: String as PropType<"button" | "submit" | "reset">,
+    default: "button",
+  },
+  size: {
+    type: String as PropType<"xs" | "sm" | "md" | "lg">,
+    default: "md",
+  },
+  color: {
+    type: String as PropType<
+      "danger" | "success" | "black" | "white" | "purple" | 'primary'>,
+    default: "purple",
+  },
+  iconType: {
+    type: String as PropType<"startIcon" | "endIcon" | "icon">,
+    default: "",
+  },
+  icon: {
+    type: [String, Object, Function],
+    default: "",
+  },
+  rounded:Boolean,
+  loading: Boolean,
+  disabled: Boolean,
+});
+
+const sizeClasses = reactive({
+  xs: "text-sm font-medium leading-[normal]", // 24
+  sm: "text-sm font-medium", // 32
+  md: "text-base font-semibold", // 40
+  lg: "text-base font-semibold", // 52
+});
+
+const btnClass = computed(() => {
+  const btnDisabled = props.disabled;
+  const btnColor = {
+    black: btnDisabled
+      ? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-gray-800"
+      : "text-white bg-gray-900 hover:bg-gray-800 active:bg-black cursor-pointer active:shadow-black/50",
+    white: btnDisabled
+      ? "bg-opacity-80 cursor-not-allowed text-gray-400 bg-gray-200"
+      : "bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent",
+    danger: btnDisabled
+      ? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-red-500"
+      : "bg-red-500 hover:bg-red-600 active:bg-red-500 text-white cursor-pointer active:shadow-red-500/50",
+    success: btnDisabled
+      ? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-green-600"
+      : "bg-green-600 hover:bg-green-700 active:bg-green-600 text-white cursor-pointer active:shadow-green-500/50",
+    purple: btnDisabled
+      ? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-purple-500"
+      : "bg-purple-700 hover:bg-purple-800 active:bg-purple-700 text-white cursor-pointer active:shadow-purple-500/50",
+    primary: btnDisabled
+      ? "bg-opacity-60 cursor-not-allowed text-gray-200 bg-purple-500"
+      : "primary-btn text-white cursor-pointer active:shadow-purple-500/50",
+  };
+
+  // background: linear-gradient(107.63deg, #321386 0%, #9C20D7 100%, #9C20D7 100%);
+
+
+  const iconClasses = {
+    lg: props.iconType === "icon" ? "p-3.5" : "px-6 py-3.5",
+    md: props.iconType === "icon" ? "p-2" : "px-4 py-2",
+    sm: props.iconType === "icon" ? "p-1.5" : "px-4 py-1.5",
+    xs: props.iconType === "icon" ? "p-1" : "px-3 py-1",
+  };
+
+  const colorClass = btnColor[props.color] || "";
+  const sizeClass = sizeClasses[props.size] || "";
+  const typeClass = iconClasses[props.size] || "";
+  const disabledClass =
+    props.disabled === true
+      ? "active:!translate-y-0 active:!scale-100 active:!shadow-none"
+      : "";
+  return `${colorClass} ${sizeClass} ${typeClass} ${disabledClass}`;
+});
+
+const iconWidthClasses = reactive({
+  xs: "w-4 h-4 text-current",
+  sm: "w-5 h-5 text-current",
+  md: "w-6 h-6 text-current",
+  lg: "w-6 h-6 text-current",
+});
+
+const iconWidth = computed(() => {
+  const iconClass = iconWidthClasses[props.size] || "";
+  return iconClass;
+});
+</script>
+
+<style lang="scss">
+.primary-btn {
+    background: linear-gradient(107.63deg, #321386 0%, #9C20D7 100%, #9C20D7 100%);
+    @apply bg-[#321386] hover:opacity-90;
+    &:active {
+      background: linear-gradient(-135deg,#321386 0%, #9c20d7 100%, #9c20d7 100%);
+    }
+  }
+</style>

package/src/components/checkbox/EUICheckbox.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUICheckbox from "./EUICheckbox.vue";
+
+// Meta configuration for the component's stories
+const meta = {
+  title: "Forms/Checkbox",
+  component: EUICheckbox,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      description: "The label displayed next to the checkbox",
+      control: "text",
+    },
+    disabled: {
+      description: "Disables the checkbox when set to true",
+      control: "boolean",
+    },
+    modelValue: {
+      description: "Controls the checked state of the checkbox",
+      control: "boolean",
+    },
+    errors: {
+      description:
+        "An object that contains error messages or validation information",
+      control: "object",
+    },
+    name: {
+      description:
+        "The name attribute for the checkbox input, useful for forms",
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof EUICheckbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with minimum props
+export const Default: Story = {
+  args: {
+    label: "Accept Terms & Conditions",
+    modelValue: false,
+    disabled: false,
+    name: "checkbox",
+    errors: {
+      message: "Checkbok not checked",
+    },
+  },
+};
+
+// Disabled state story
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Checkbox",
+    modelValue: false,
+    disabled: true,
+  },
+};

package/src/components/checkbox/EUICheckbox.vue

@@ -0,0 +1,103 @@
+<template>
+ <label class="flex flex-wrap items-center scale-100 translate-x-0 translate-y-0 eui-checkbox">
+    <input v-model="isChecked" type="checkbox" id="checkbox" class="appearance-none sr-only input-checkbox" :disabled="disabled"
+      @change="toggle($event)" />
+      <div class="cbx-icon" for="checkbox">
+        <span>
+            <svg width="14px" height="14px">
+                <use xlink:href="#check-box"></use>
+            </svg>
+        </span>
+        <svg class="absolute pointer-events-none select-none inline-svg size-0">
+          <symbol id="check-box" viewbox="0 0 14 14">
+            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
+          </symbol>
+        </svg>
+      </div>
+    <span v-if="label" class="text-sm font-medium tracking-wide text-gray-700 ms-2 first-letter:capitalize">{{ label }}</span>
+  </label>
+  <EUIErrorMessage :errors="errors" :name="name" />
+</template>
+
+<script setup lang="ts">
+import { PropType, watch,ref } from "vue";
+import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
+
+const props = defineProps({
+  errors: { type: Object, required: false, default: () => {} },
+  name: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  modelValue: {
+    type: Boolean as PropType<boolean>,
+    required: true,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  label: { type: String as PropType<string>, required: true, default: "" },
+});
+
+const emit = defineEmits(["update:modelValue", "toggle"]);
+const isChecked = ref<boolean>(props.modelValue);
+
+watch(isChecked, (newValue) => {
+  emit("update:modelValue", newValue);
+});
+
+const toggle = ($event: Event) => {
+  if($event) {
+    emit("toggle", isChecked.value);
+  }
+};
+
+watch(props, (newValue) => {
+  isChecked.value = newValue.modelValue;
+});
+</script>
+
+<style lang="scss">
+.eui-checkbox .cbx-icon {
+  transition: all 0.2s ease;
+  @apply select-none cursor-pointer p-0.5 rounded-md overflow-hidden inline-block scale-110;
+}
+
+.eui-checkbox .cbx-icon span {
+  transform: translate3d(0, 0, 0);
+  transition: all 0.2s ease;
+  @apply float-left align-middle relative size-5 border-[1.5px] border-gray-400 rounded scale-100;
+}
+
+.eui-checkbox .cbx-icon span > svg {
+  top: 3.5px;
+  left: 2.5px;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 18px;
+  stroke-dashoffset: 18px;
+  transition: all 0.3s ease;
+  transition-delay: 0.1s;
+  transform: translate3d(0, 0, 0);
+  @apply absolute fill-none stroke-white
+}
+
+.eui-checkbox .input-checkbox:checked + .cbx-icon > span {
+  animation: anim 0.4s ease;
+  @apply bg-purple-700 border-purple-700;
+}
+
+.eui-checkbox .input-checkbox:checked + .cbx-icon span > svg {
+  stroke-dashoffset: 0;
+}
+
+@keyframes anim {
+  50% {
+    transform: scale(0.85);
+  }
+}
+</style>