@meistrari/tela-build 1.0.0

package/components/tela/status/status.stories.ts

@@ -0,0 +1,160 @@
+import { ref, computed } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Status from './status.vue'
+import TelaButton from '../button/button.vue'
+
+const allVariants = [
+    'pending-run',
+    'preparing-run',
+    'waiting',
+    'on-hold',
+    'queued',
+    'validation-error',
+    'running',
+    'executing',
+    'processing',
+    'verifying',
+    'initializing',
+    'waiting-user',
+    'awaiting-approval',
+    'paused',
+    'stopped',
+    'suspended',
+    'running-issues',
+    'warning',
+    'low-coverage',
+    'medium-coverage',
+    'completed',
+    'success',
+    'error',
+    'failed',
+    'cancelled',
+    'archived',
+    'reported',
+    'expired',
+    'pending-review',
+    'reviewing',
+    'reviewed',
+    'approved',
+    'approved-changes',
+    'reproved',
+    'partially-completed',
+] as const
+
+const meta: Meta<typeof Status> = {
+    title: 'Core/Status',
+    component: Status,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: 'A status component that displays different workflow and task statuses with appropriate icons, colors, and labels. Supports multiple status types including pending, running, completed, error, and review states.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            description: 'Visual style variant of the status. Each variant has a predefined color scheme, icon, and label that represents a specific workflow or task state.',
+        },
+        label: {
+            control: 'text',
+            description: 'Custom label text to override the default label for the selected variant. If not provided, the default label associated with the variant will be used.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Status>
+
+export const Default: Story = {
+    render: () => ({
+        components: { Status },
+        template: '<Status />',
+    }),
+    args: {
+        variant: 'running',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+}
+
+export const AllVariants: Story = {
+    render: () => {
+        return {
+            components: { Status },
+            setup() {
+                return { allVariants }
+            },
+            template: `
+                <div style="display: flex; flex-wrap: wrap; gap: 16px; padding: 24px;">
+                    <Status v-for="variant in allVariants" :key="variant" :variant="variant" />
+                </div>
+            `,
+        }
+    },
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                story: 'Displays all available status variants in a grid layout. Each variant has a unique combination of icon, color scheme, and default label representing different workflow states.',
+            },
+        },
+    },
+}
+
+export const AnimatedTransitions: Story = {
+    render: () => {
+        return {
+            components: { Status, TelaButton },
+            setup() {
+                const submitting = ref(false)
+                const submitted = ref(false)
+
+                const currentVariant = computed(() => {
+                    if (submitted.value)
+                        return 'completed'
+
+                    if (submitting.value)
+                        return 'running'
+
+                    return 'pending-run'
+                })
+
+                function handleSubmit() {
+                    submitting.value = true
+
+                    setTimeout(() => {
+                        submitting.value = false
+                        submitted.value = true
+
+                        setTimeout(() => {
+                            submitted.value = false
+                        }, 2000)
+                    }, 2500)
+                }
+
+                return { currentVariant, handleSubmit }
+            },
+            template: `
+                <div style="padding: 24px;">
+                    <div style="display: flex; flex-direction: column; gap: 16px; align-items: center;">
+                        <Status :variant="currentVariant" />
+                        <TelaButton
+                            size="sm"
+                            @click="handleSubmit"
+                        >
+                            Submit
+                        </TelaButton>
+                    </div>
+                </div>
+            `,
+        }
+    },
+    parameters: {
+        layout: 'centered',
+    },
+}

package/components/tela/status/status.vue

@@ -0,0 +1,420 @@
+<script setup lang="ts">
+import type { TelaCustomIconName, TelaStatusVariant } from '~/types'
+
+import TelaIconCustom from '../icon/custom.vue'
+
+type StatusConfig = {
+    label: string
+    backgroundColor: string
+    textColor: string
+    iconName: TelaCustomIconName
+    iconColor: string
+}
+
+const props = withDefaults(defineProps<{
+    variant?: TelaStatusVariant
+    label?: string
+}>(), {
+    variant: 'running',
+})
+
+const variantConfig: Record<TelaStatusVariant, StatusConfig> = {
+    'pending-run': {
+        label: 'Pending Run',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-primary',
+        iconName: 'circle',
+        iconColor: 'neutral-400',
+    },
+    'preparing-run': {
+        label: 'Preparing to Run',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-neutral-700',
+        iconName: 'circle',
+        iconColor: 'neutral-500',
+    },
+    'waiting': {
+        label: 'Waiting',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-neutral-700',
+        iconName: 'pause',
+        iconColor: 'neutral-500',
+    },
+    'on-hold': {
+        label: 'On Hold',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-neutral-700',
+        iconName: 'pause',
+        iconColor: 'neutral-500',
+    },
+    'queued': {
+        label: 'Queued',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-neutral-700',
+        iconName: 'queued',
+        iconColor: 'neutral-500',
+    },
+    'validation-error': {
+        label: 'Validation Error',
+        backgroundColor: 'bg-red-50',
+        textColor: 'text-red-700',
+        iconName: 'close',
+        iconColor: 'red-500',
+    },
+    'running': {
+        label: 'Running',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-primary',
+        iconName: 'circle-notch',
+        iconColor: 'neutral-400',
+    },
+    'executing': {
+        label: 'Executing',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-primary',
+        iconName: 'circle-notch',
+        iconColor: 'neutral-400',
+    },
+    'processing': {
+        label: 'Processing',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-primary',
+        iconName: 'circle-notch',
+        iconColor: 'neutral-400',
+    },
+    'verifying': {
+        label: 'Verifying',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-primary',
+        iconName: 'circle-notch',
+        iconColor: 'neutral-400',
+    },
+    'initializing': {
+        label: 'Initializing',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-primary',
+        iconName: 'circle-notch',
+        iconColor: 'neutral-400',
+    },
+    'waiting-user': {
+        label: 'Waiting for User',
+        backgroundColor: 'bg-sky-100',
+        textColor: 'text-sky-700',
+        iconName: 'circle-minus',
+        iconColor: 'sky-500',
+    },
+    'awaiting-approval': {
+        label: 'Awaiting Approval',
+        backgroundColor: 'bg-sky-100',
+        textColor: 'text-sky-700',
+        iconName: 'circle-minus',
+        iconColor: 'sky-500',
+    },
+    'paused': {
+        label: 'Paused',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-neutral-700',
+        iconName: 'pause',
+        iconColor: 'neutral-500',
+    },
+    'stopped': {
+        label: 'Stopped',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-primary',
+        iconName: 'stop',
+        iconColor: 'neutral-700',
+    },
+    'suspended': {
+        label: 'Suspended',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-secondary',
+        iconName: 'circle-dashed',
+        iconColor: 'neutral-100',
+    },
+    'running-issues': {
+        label: 'Running with Issues',
+        backgroundColor: 'bg-amber-100',
+        textColor: 'text-amber-700',
+        iconName: 'warning',
+        iconColor: 'amber-700',
+    },
+    'warning': {
+        label: 'Warning',
+        backgroundColor: 'bg-amber-100',
+        textColor: 'text-amber-700',
+        iconName: 'circle-warning',
+        iconColor: 'amber-500',
+    },
+    'low-coverage': {
+        label: 'Low coverage',
+        backgroundColor: 'bg-amber-100',
+        textColor: 'text-amber-700',
+        iconName: 'half-slice',
+        iconColor: 'amber-500',
+    },
+    'medium-coverage': {
+        label: 'Medium coverage',
+        backgroundColor: 'bg-amber-100',
+        textColor: 'text-amber-700',
+        iconName: 'slice',
+        iconColor: 'amber-500',
+    },
+    'completed': {
+        label: 'Completed',
+        backgroundColor: 'bg-green-100',
+        textColor: 'text-green-700',
+        iconName: 'check',
+        iconColor: 'green-600',
+    },
+    'success': {
+        label: 'Success',
+        backgroundColor: 'bg-green-100',
+        textColor: 'text-green-700',
+        iconName: 'check',
+        iconColor: 'green-600',
+    },
+    'pending-review': {
+        label: 'Pending Review',
+        backgroundColor: 'bg-sky-100',
+        textColor: 'text-sky-700',
+        iconName: 'circle',
+        iconColor: 'sky-500',
+    },
+    'approved': {
+        label: 'Approved',
+        backgroundColor: 'bg-green-100',
+        textColor: 'text-green-700',
+        iconName: 'check',
+        iconColor: 'green-600',
+    },
+    'approved-changes': {
+        label: 'Approved with Changes',
+        backgroundColor: 'bg-emerald-50',
+        textColor: 'text-emerald-700',
+        iconName: 'check-dashed',
+        iconColor: 'emerald-600',
+    },
+    'reproved': {
+        label: 'Reproved',
+        backgroundColor: 'bg-red-50',
+        textColor: 'text-red-700',
+        iconName: 'close',
+        iconColor: 'red-500',
+    },
+    'reviewing': {
+        label: 'Reviewing',
+        backgroundColor: 'bg-sky-100',
+        textColor: 'text-sky-700',
+        iconName: 'circle-notch',
+        iconColor: 'sky-500',
+    },
+    'reviewed': {
+        label: 'Reviewed',
+        backgroundColor: 'bg-sky-100',
+        textColor: 'text-sky-700',
+        iconName: 'check',
+        iconColor: 'sky-500',
+    },
+    'error': {
+        label: 'Error',
+        backgroundColor: 'bg-red-50',
+        textColor: 'text-red-700',
+        iconName: 'close',
+        iconColor: 'red-500',
+    },
+    'failed': {
+        label: 'Failed',
+        backgroundColor: 'bg-red-50',
+        textColor: 'text-red-700',
+        iconName: 'close',
+        iconColor: 'red-500',
+    },
+    'cancelled': {
+        label: 'Cancelled',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-secondary',
+        iconName: 'close',
+        iconColor: 'neutral-400',
+    },
+    'archived': {
+        label: 'Archived',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-secondary',
+        iconName: 'arrow-down',
+        iconColor: 'neutral-400',
+    },
+    'reported': {
+        label: 'Reported',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-secondary',
+        iconName: 'reported',
+        iconColor: 'neutral-400',
+    },
+    'expired': {
+        label: 'Expired',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-secondary',
+        iconName: 'circle-warning',
+        iconColor: 'neutral-400',
+    },
+    'partially-completed': {
+        label: 'Partially Completed',
+        backgroundColor: 'bg-neutral-100',
+        textColor: 'text-primary',
+        iconName: 'semi-circle',
+        iconColor: 'neutral-400',
+    },
+}
+
+const currentStatus = computed<StatusConfig>(() => {
+    const variant = props.variant ?? 'running'
+
+    return variantConfig[variant] ?? variantConfig.running
+})
+
+const backgroundColor = computed(() => currentStatus.value.backgroundColor)
+const textColor = computed(() => currentStatus.value.textColor)
+const iconName = computed(() => currentStatus.value.iconName)
+const iconColor = computed(() => currentStatus.value.iconColor)
+const statusLabel = computed(() => props.label || currentStatus.value.label)
+
+const contentMeasure = useTemplateRef<HTMLElement>('contentMeasure')
+const widthContent = ref(0)
+
+const computedWidthContent = computed(() => {
+    if (widthContent.value > 0) {
+        return `${widthContent.value}px`
+    }
+
+    return undefined
+})
+
+watch(
+    () => [props.variant, statusLabel.value],
+    () => {
+        nextTick(() => {
+            if (contentMeasure.value) {
+                const clone = contentMeasure.value.cloneNode(true) as HTMLElement
+
+                clone.style.position = 'absolute'
+                clone.style.visibility = 'hidden'
+                clone.style.width = 'auto'
+
+                document.body.appendChild(clone)
+
+                widthContent.value = clone.offsetWidth
+
+                document.body.removeChild(clone)
+            }
+        })
+    },
+    { immediate: true },
+)
+
+const shineClass = computed(() => {
+    const baseColor = currentStatus.value.textColor.replace('text-', '')
+
+    const gradientMap: Record<string, string> = {
+        'primary': 'bg-[linear-gradient(110deg,#1F2937_35%,#9CA3AF_50%,#1F2937_75%)]',
+        'sky-700': 'bg-[linear-gradient(110deg,#0369a1_35%,#93D2F8_50%,#0369a1_75%)]',
+        'amber-700': 'bg-[linear-gradient(110deg,#b45309_35%,#fcd34d_50%,#b45309_75%)]',
+    }
+
+    return [
+        gradientMap[baseColor] || gradientMap.primary,
+        'bg-[length:350%_100%] bg-clip-text text-transparent animate-shine',
+    ]
+})
+
+const isShineVisible = computed(() => ['running', 'executing', 'processing', 'verifying', 'initializing', 'reviewing'].includes(props.variant))
+
+function iconVariants() {
+    return {
+        initial: {
+            opacity: 0,
+            scale: 0.6,
+        },
+        animate: {
+            opacity: 1,
+            scale: 1,
+        },
+        exit: {
+            opacity: 0,
+            scale: 0.56,
+        },
+    }
+}
+
+function textVariants() {
+    return {
+        initial: {
+            opacity: 0,
+            x: -15,
+        },
+        animate: {
+            opacity: 1,
+            x: 0,
+        },
+        exit: {
+            opacity: 0,
+            x: -15,
+        },
+    }
+}
+
+const SPRING_CONFIG = {
+    type: 'spring',
+    duration: 0.4,
+    bounce: 0,
+} as const
+</script>
+
+<template>
+    <MotionConfig :transition="SPRING_CONFIG">
+        <div :class="cn('relative w-fit px-[6px] py-[3px] rounded-[8px] select-none overflow-hidden', backgroundColor)">
+            <div
+                class="[transition:width_0.16s_ease-out]"
+                :style="computedWidthContent ? { width: computedWidthContent } : {}"
+            >
+                <div ref="contentMeasure">
+                    <AnimatePresence mode="popLayout" :initial="false">
+                        <Motion
+                            :key="`${props.variant}-${statusLabel}`"
+                            flex items-center gap-4px
+                            v-bind="{ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }"
+                        >
+                            <div :class="cn('relative z-1 p-[2px]', backgroundColor)">
+                                <Motion :key="`icon-${iconName}`" v-bind="iconVariants()">
+                                    <TelaIconCustom :name="iconName" :color="iconColor" />
+                                </Motion>
+                            </div>
+                            <Motion
+                                :key="`text-${statusLabel}`"
+                                as="span"
+                                v-bind="textVariants()"
+                                :class="cn('body-14-medium whitespace-nowrap', isShineVisible ? shineClass : textColor)"
+                            >
+                                {{ statusLabel }}
+                            </Motion>
+                        </Motion>
+                    </AnimatePresence>
+                </div>
+            </div>
+        </div>
+    </MotionConfig>
+</template>
+
+<style scoped>
+.animate-shine {
+    animation: shine 6s 0.05s linear infinite;
+}
+
+@keyframes shine {
+    0% {
+        background-position: 350% 0;
+    }
+    100% {
+        background-position: -350% 0;
+    }
+}
+</style>