@caipira/tamandua 0.0.1

package/components/Avatar/Avatar.vue

@@ -0,0 +1,82 @@
+<template>
+    <div
+        :role="shadowRole"
+        :class="{
+            'h-5 w-5':
+                !props.disableStyle && props.size === ElementSize.EXTRA_SMALL,
+            'h-7 w-7': !props.disableStyle && props.size === ElementSize.SMALL,
+            'h-10 w-10':
+                !props.disableStyle && props.size === ElementSize.DEFAULT,
+            'h-20 w-20':
+                !props.disableStyle && props.size === ElementSize.LARGE,
+            'h-40 w-40':
+                !props.disableStyle && props.size === ElementSize.EXTRA_LARGE,
+            'rounded-full': props.shape === ElementShape.CIRCLE,
+            rounded: props.shape === ElementShape.SQUARE,
+        }"
+        class="overflow-hidden inline-flex items-center justify-center bg-caipira-primary-inverted"
+        @click="onClick"
+    >
+        <img
+            class="w-full h-full object-cover"
+            v-if="props.image"
+            :src="props.image"
+        />
+        <t-icon
+            v-else-if="props.icon"
+            class="color-caipira-primary"
+            :icon="props.icon"
+            :size="props.size"
+        />
+        <span v-else-if="props.text">{{ props.text }}</span>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ElementSize, ElementShape, Icon } from "@/enums/ui";
+
+import uiService from "@/services/ui";
+import { computed, getCurrentInstance } from "vue";
+
+defineOptions({ name: "TAvatar" });
+
+const props = withDefaults(
+    defineProps<{
+        icon?: `${Icon}`;
+        text?: string;
+        role?: string;
+        size?: `${ElementSize}`;
+        image?: string;
+        shape?: `${ElementShape}`;
+        disableStyle?: boolean;
+    }>(),
+    {
+        text: "",
+        role: "",
+        size: ElementSize.DEFAULT,
+        image: "",
+        shape: ElementShape.CIRCLE,
+        disableStyle: false,
+    },
+);
+
+const instance = getCurrentInstance();
+
+const shadowRole = computed<string>(() => {
+    if (props.role !== "") {
+        return props.role;
+    }
+
+    if (instance && uiService.isPopoverActivator(instance)) {
+        return "button";
+    }
+
+    return "";
+});
+
+const onClick = (e: MouseEvent) => {
+    if (instance && uiService.isPopoverActivator(instance)) {
+        uiService.onPopoverActivatorClick(e, instance);
+    }
+};
+</script>

package/components/Avatar/index.ts

@@ -0,0 +1,12 @@
+import type { App, Plugin } from "vue";
+import registerComponent from "@/plugins/register-component";
+
+import Avatar from "./Avatar.vue";
+
+export default {
+    install(app: App) {
+        registerComponent(app, Avatar);
+    },
+} as Plugin;
+
+export { Avatar };

package/components/Backdrop/Backdrop.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+defineOptions({ name: "TBackdrop" });
+
+const props = withDefaults(
+    defineProps<{
+        isTransparent?: boolean;
+    }>(),
+    {
+        isTransparent: false,
+    },
+);
+
+const emit = defineEmits<{
+    (e: "click", val: MouseEvent): void;
+}>();
+</script>
+
+<template>
+    <div
+        class="fixed inset-0"
+        :class="{
+            'bg-caipira-tertiary opacity-80': !props.isTransparent,
+        }"
+        role="button"
+        @click="(e) => emit('click', e)"
+    />
+</template>

package/components/Backdrop/index.ts

@@ -0,0 +1,12 @@
+import type { App, Plugin } from "vue";
+import registerComponent from "@/plugins/register-component";
+
+import Backdrop from "./Backdrop.vue";
+
+export default {
+    install(app: App) {
+        registerComponent(app, Backdrop);
+    },
+} as Plugin;
+
+export { Backdrop };

package/components/Button/Button.story.ts

@@ -0,0 +1,74 @@
+import { ElementShape, ElementVariant, Icon } from "@/enums/ui";
+
+export default {
+    title: "Button",
+    args: {
+        variant: ElementVariant.PRIMARY,
+        isOutline: false,
+        shape: ElementShape.ROUNDED,
+    },
+    argTypes: {
+        variant: {
+            options: [
+                ElementVariant.DEFAULT,
+                ElementVariant.PRIMARY,
+                ElementVariant.SUCCESS,
+                ElementVariant.WARNING,
+                ElementVariant.DANGER,
+                ElementVariant.TRANSPARENT,
+            ],
+            control: "radio",
+            description: "Set button variant",
+            table: {
+                type: { summary: "enum" },
+                defaultValue: { summary: ElementVariant.PRIMARY },
+            },
+        },
+        shape: {
+            options: [
+                ElementShape.ROUNDED,
+                ElementShape.CIRCLE,
+                ElementShape.SQUARE,
+            ],
+            control: "radio",
+            table: {
+                type: { summary: "enum" },
+                defaultValue: { summary: ElementShape.ROUNDED },
+            },
+        },
+        isOutline: {
+            options: [true, false],
+            control: "boolean",
+            description: "Invert colors on hover",
+            table: {
+                type: { summary: "bool" },
+                defaultValue: { summary: false },
+            },
+        },
+        label: {
+            table: { type: { summary: "string" } },
+        },
+        icon: {
+            options: Object.values(Icon),
+            control: "select",
+            description: "Optional icon",
+            table: { type: { summary: "enum" } },
+        },
+    },
+};
+
+const defaultArgs = {
+    label: "Click me",
+};
+
+const Template = (args: typeof defaultArgs) => ({
+    setup() {
+        return { args };
+    },
+    template: `<t-button v-bind="args" />`,
+});
+
+const Button: any = Template.bind({});
+Button.args = defaultArgs;
+
+export { Button };

package/components/Button/Button.vue

@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+import {
+    ButtonType,
+    ElementSize,
+    ElementShape,
+    Icon as EIcon,
+    ElementVariant,
+} from "@/enums/ui";
+
+import uiService from "@/services/ui";
+import { computed, ref, getCurrentInstance } from "vue";
+
+import Icon from "@/components/Icon/Icon.vue";
+
+defineOptions({ name: "TButton" });
+
+export type ButtonProps = {
+    to?: any;
+    icon?: `${EIcon}`;
+    href?: string;
+    type?: `${ButtonType}`;
+    size?: `${ElementSize}`;
+    label?: string;
+    shape?: `${ElementShape}`;
+    target?: string;
+    variant?: `${ElementVariant}`;
+    multiple?: boolean;
+    isOutline?: boolean;
+    isDisabled?: boolean;
+    injectStyle?: { icon: string };
+    disableStyle?: boolean;
+};
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+    href: "",
+    type: ButtonType.BUTTON,
+    size: ElementSize.DEFAULT,
+    label: "",
+    shape: ElementShape.ROUNDED,
+    target: undefined,
+    variant: ElementVariant.DEFAULT,
+    multiple: false,
+    isOutline: false,
+    isDisabled: false,
+    injectStyle: () => ({ icon: "" }),
+    disableStyle: false,
+});
+
+const emit = defineEmits<{
+    (e: "upload", val: FileList): void;
+}>();
+
+const instance = getCurrentInstance();
+const fileInput = ref<HTMLInputElement>();
+const iconReference = ref<InstanceType<typeof Icon> | null>(null);
+
+const link = computed<string | undefined>(() => {
+    return props.href ? props.href : undefined;
+});
+
+const shadowType = computed<string | undefined>(() => {
+    switch (props.type) {
+        case ButtonType.LINK:
+            return undefined;
+        case ButtonType.FILE:
+            return "button";
+        default:
+            return props.type;
+    }
+});
+
+const value = computed<string | undefined>(() => {
+    return props.type === ButtonType.SUBMIT ? props.label : undefined;
+});
+
+const element = computed<string>(() => {
+    switch (props.type) {
+        case ButtonType.SUBMIT:
+            return "input";
+        case ButtonType.LINK:
+            return "a";
+        case ButtonType.ROUTER_LINK:
+            return "router-link";
+        default:
+            return "button";
+    }
+});
+
+const onClick = (e: MouseEvent): void => {
+    if (instance && uiService.isPopoverActivator(instance)) {
+        uiService.onPopoverActivatorClick(e, instance);
+    }
+
+    if (props.type === ButtonType.SUBMIT) {
+        e.preventDefault();
+    }
+
+    if (props.type === ButtonType.FILE) {
+        fileInput.value?.click();
+    }
+};
+
+const onFileChange = (e: Event) => {
+    e.stopPropagation();
+
+    const element: HTMLInputElement = e.target as HTMLInputElement;
+    const files: FileList | null = element.files;
+
+    if (!files || !files.length) {
+        return;
+    }
+
+    emit("upload", files);
+};
+
+defineExpose({ iconReference });
+</script>
+
+<template>
+    <component
+        :is="element"
+        :type="shadowType"
+        :href="link"
+        :value="value"
+        :to="props.to"
+        :disabled="props.isDisabled"
+        :target="props.target"
+        :class="{
+            'font-bold': !props.disableStyle,
+            'opacity-50': props.isDisabled,
+
+            // Padding
+            'px-1 py-0':
+                !props.disableStyle && props.size === ElementSize.EXTRA_SMALL,
+            'px-4 h-9': !props.disableStyle && props.size === ElementSize.SMALL,
+            'px-4 py-2 h-10':
+                !props.disableStyle && props.size === ElementSize.DEFAULT,
+
+            // Border
+            border: props.isOutline,
+
+            // Shape
+            'rounded-full': props.shape === ElementShape.CIRCLE,
+            'input-roundness': props.shape === ElementShape.ROUNDED,
+
+            // Cursor
+            'cursor-pointer': !props.isDisabled,
+            'cursor-not-allowed': props.isDisabled,
+
+            // Default color
+            'border-caipira-primary-inverted fill-caipira-primary-inverted':
+                props.variant === ElementVariant.DEFAULT,
+            'bg-transparent color-caipira-primary-inverted hover:bg-caipira-primary-inverted hover:color-caipira-primary hover:fill-white':
+                props.variant === ElementVariant.DEFAULT && props.isOutline,
+            'bg-caipira-primary-inverted color-caipira-primary':
+                props.variant === ElementVariant.DEFAULT && !props.isOutline,
+
+            // Primary color
+            'fill-caipira-primary': props.variant === ElementVariant.PRIMARY,
+            'bg-transparent border-caipira-blue color-caipira-blue hover:bg-caipira-blue hover:color-caipira-primary hover:fill-white':
+                props.variant === ElementVariant.PRIMARY && props.isOutline,
+            'bg-caipira-blue color-caipira-primary':
+                props.variant === ElementVariant.PRIMARY && !props.isOutline,
+
+            // Success color
+            'fill-caipira-green': props.variant === ElementVariant.SUCCESS,
+            'bg-transparent border-caipira-green color-caipira-green hover:bg-caipira-green hover:color-caipira-primary hover:fill-white':
+                props.variant === ElementVariant.SUCCESS && props.isOutline,
+            'bg-caipira-green color-caipira-primary':
+                props.variant === ElementVariant.SUCCESS && !props.isOutline,
+
+            // Warning color
+            'fill-caipira-yellow': props.variant === ElementVariant.WARNING,
+            'bg-transparent border-caipira-yellow color-caipira-yellow hover:bg-caipira-yellow hover:color-caipira-primary hover:fill-white':
+                props.variant === ElementVariant.WARNING && props.isOutline,
+            'bg-caipira-yellow color-caipira-primary':
+                props.variant === ElementVariant.WARNING && !props.isOutline,
+
+            // Danger color
+            'fill-caipira-red': props.variant === ElementVariant.DANGER,
+            'bg-transparent border-caipira-red color-caipira-red hover:bg-caipira-red hover:color-caipira-primary hover:fill-white':
+                props.variant === ElementVariant.DANGER && props.isOutline,
+            'bg-caipira-red color-caipira-primary':
+                props.variant === ElementVariant.DANGER && !props.isOutline,
+
+            // Transparent color
+            'transparent-button': props.variant === ElementVariant.TRANSPARENT,
+        }"
+        class="input-outline inline-flex items-center"
+        role="button"
+        @click="onClick"
+    >
+        <slot />
+        <t-icon
+            v-if="props.icon"
+            ref="iconReference"
+            :size="props.size"
+            :icon="props.icon"
+            :is-outline="props.isOutline"
+            :class="{
+                [props.injectStyle.icon]: true,
+            }"
+        />
+        <span
+            v-if="props.label && props.type !== ButtonType.SUBMIT"
+            :class="{
+                'ml-2': !!props.icon,
+                'text-lg': props.size === ElementSize.LARGE,
+                'text-sm': props.size === ElementSize.SMALL,
+                'text-xs': props.size === ElementSize.EXTRA_SMALL,
+            }"
+            class="whitespace-nowrap"
+            >{{ props.label }}</span
+        >
+        <input
+            v-if="props.type === 'file'"
+            :multiple="props.multiple"
+            @change="onFileChange"
+            type="file"
+            ref="fileInput"
+            class="hidden"
+        />
+    </component>
+</template>
+
+<style scoped>
+.transparent-button:hover {
+    background-color: rgb(from var(--caipira-primary) r g b / 45%);
+}
+</style>

package/components/Button/index.ts

@@ -0,0 +1,12 @@
+import type { App, Plugin } from "vue";
+import registerComponent from "@/plugins/register-component";
+
+import Button from "./Button.vue";
+
+export default {
+    install(app: App) {
+        registerComponent(app, Button);
+    },
+} as Plugin;
+
+export { Button };

package/components/ButtonCopy/ButtonCopy.vue

@@ -0,0 +1,61 @@
+<template>
+    <t-icon-button
+        :is-disabled="isLoading || props.isDisabled"
+        icon="copy"
+        size="xs"
+        ref="buttonRef"
+        @click="onCopy"
+    />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { gsap } from "gsap";
+import copyToClipboard from "@/services/clipboard";
+
+import UiButton from "@/components/Button/Button.vue";
+
+defineOptions({ name: "TButtonCopy" });
+
+const buttonRef = ref<InstanceType<typeof UiButton> | null>(null);
+const isLoading = ref<boolean>(false);
+
+type Text = (() => Promise<string>) | string;
+
+const props = withDefaults(
+    defineProps<{
+        text: Text;
+        isDisabled?: boolean;
+    }>(),
+    {
+        isDisabled: false,
+    },
+);
+
+const onCopy = async (e: MouseEvent) => {
+    isLoading.value = true;
+
+    e.stopPropagation();
+
+    const text =
+        typeof props.text === "function" ? await props.text() : props.text;
+    const copyElement = buttonRef.value?.iconReference?.reference;
+
+    await copyToClipboard(text);
+
+    if (copyElement) {
+        gsap.to(copyElement, {
+            scale: 4,
+            yoyo: true,
+            opacity: 0,
+            duration: 0.2,
+            ease: "power3.easeInOut",
+            onComplete: () => {
+                gsap.set(copyElement, { opacity: 1, scale: 1 });
+            },
+        });
+    }
+
+    isLoading.value = false;
+};
+</script>

package/components/ButtonCopy/index.ts

@@ -0,0 +1,12 @@
+import type { App, Plugin } from "vue";
+import registerComponent from "@/plugins/register-component";
+
+import ButtonCopy from "./ButtonCopy.vue";
+
+export default {
+    install(app: App) {
+        registerComponent(app, ButtonCopy);
+    },
+} as Plugin;
+
+export { ButtonCopy };

package/components/Drawer/Drawer.vue

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+
+import Backdrop from "@/components/Backdrop/Backdrop.vue";
+
+defineOptions({ name: "TDrawer" });
+
+const props = withDefaults(
+    defineProps<{
+        title?: string;
+        style?: { footer: string };
+        direction?: "rtl" | "ltr";
+        showHeader?: boolean;
+    }>(),
+    {
+        title: "",
+        style: () => ({
+            footer: "",
+        }),
+        direction: "rtl",
+        showHeader: true,
+    },
+);
+
+const emit = defineEmits<{
+    (e: "closed"): void;
+}>();
+
+const modal = ref<InstanceType<typeof HTMLElement> | null>(null);
+
+const onClose = (e: MouseEvent | KeyboardEvent) => {
+    e.stopPropagation();
+
+    emit("closed");
+};
+
+onMounted(() => {
+    modal.value?.focus();
+});
+</script>
+
+<template>
+    <div
+        class="fixed inset-0 flex items-center z-10"
+        tabindex="0"
+        ref="modal"
+        @keyup.esc="onClose"
+    >
+        <Backdrop @click="onClose" />
+        <div
+            class="w-[38rem] absolute inset-y-0 z-20 flex flex-col bg-caipira-primary drawer"
+            :class="{
+                'right-0 drop-shadow-lg': props.direction === 'ltr',
+                'left-0': props.direction === 'rtl',
+            }"
+        >
+            <div
+                v-if="props.showHeader"
+                class="flex justify-between items-center p-4 border-b border-color"
+            >
+                <div v-if="$slots.header">
+                    <slot name="header" />
+                </div>
+                <span
+                    v-else
+                    class="inline-block text-base"
+                >
+                    {{ props.title }}
+                </span>
+                <t-icon
+                    icon="close"
+                    role="button"
+                    @click="onClose"
+                    size="sm"
+                />
+            </div>
+            <div
+                class="flex flex-col flex-1 relative overflow-y-auto scrollbar"
+            >
+                <slot />
+            </div>
+            <div
+                v-if="$slots.footer"
+                class="p-4 border-t border-color"
+                :class="{
+                    [style.footer]: true,
+                }"
+            >
+                <slot name="footer" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.drawer {
+    box-shadow:
+        rgba(0, 0, 0, 0.2) 0px 8px 10px -5px,
+        rgba(0, 0, 0, 0.14) 0px 16px 24px 2px,
+        rgba(0, 0, 0, 0.12) 0px 6px 30px 5px;
+}
+</style>

package/components/Drawer/index.ts

@@ -0,0 +1,12 @@
+import type { App, Plugin } from "vue";
+import registerComponent from "@/plugins/register-component";
+
+import Drawer from "./Drawer.vue";
+
+export default {
+    install(app: App) {
+        registerComponent(app, Drawer);
+    },
+} as Plugin;
+
+export { Drawer };