@meistrari/tela-build 1.0.0

package/components/tela/chat/text-message/chat-text-message.stories.ts

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ChatMessage from './index.vue'
+
+const meta = {
+    title: 'Components/Chat/Message',
+    component: ChatMessage,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A chat message component that displays individual messages in a chat interface. Supports avatars, timestamps, replies, loading states, delete actions, and message threading. Used within the Chat component to render message content.',
+            },
+        },
+    },
+    argTypes: {
+        id: {
+            control: 'text',
+            description: 'Unique identifier for the message.',
+        },
+        content: {
+            control: 'text',
+            description: 'The message text content.',
+        },
+        timestamp: {
+            control: 'object',
+            description: 'Date object representing when the message was sent.',
+        },
+        author: {
+            control: 'text',
+            description: 'Name of the message author.',
+        },
+        authorEmail: {
+            control: 'text',
+            description: 'Email address of the message author.',
+        },
+        avatarUrl: {
+            control: 'text',
+            description: 'URL of the author\'s avatar image.',
+        },
+        version: {
+            control: 'text',
+            description: 'Version identifier for the message.',
+        },
+        isReply: {
+            control: 'boolean',
+            description: 'Whether this message is displayed as a reply to another message.',
+        },
+        replies: {
+            control: 'object',
+            description: 'Array of reply message objects nested under this message.',
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Show loading state for the message (e.g., while sending).',
+        },
+    },
+} satisfies Meta<typeof ChatMessage>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        id: '1',
+        content: 'This is a sample message content',
+        timestamp: new Date('2024-09-18'),
+        author: 'John Doe',
+        authorEmail: 'john@doe.com',
+        version: 'VER-1',
+    },
+}
+
+export const Loading: Story = {
+    args: {
+        ...Default.args,
+        loading: true,
+    },
+}
+
+export const WithAvatar: Story = {
+    args: {
+        ...Default.args,
+        avatarUrl: 'https://github.com/shadcn.png',
+    },
+}
+
+export const WithReplyButton: Story = {
+    args: {
+        ...Default.args,
+    },
+}
+
+export const WithReplies: Story = {
+    args: {
+        ...Default.args,
+        replies: [
+            {
+                id: '1',
+                content: 'This is a reply',
+                author: 'Jane Doe',
+                authorEmail: 'jane@doe.com',
+            },
+        ],
+    },
+}
+
+export const AsReply: Story = {
+    args: {
+        ...Default.args,
+        isReply: true,
+    },
+}
+
+export const WithDeleteAction: Story = {
+    args: {
+        ...Default.args,
+    },
+}
+
+export const CompleteExample: Story = {
+    args: {
+        id: '1',
+        content: 'Yep, this is still happening. @thierry can we review the parser?',
+        timestamp: new Date('2024-09-18'),
+        author: 'Guilherme Oliveira',
+        avatarUrl: 'https://github.com/shadcn.png',
+        authorEmail: 'guilherme@tela.com',
+        replies: [
+            {
+                id: '1',
+                content: 'This is a reply',
+                authorEmail: 'jane@doe.com',
+                author: 'Jane Doe',
+            },
+        ],
+    },
+}

package/components/tela/chat/text-message/index.vue

@@ -0,0 +1,355 @@
+<script setup lang="ts">
+import { TreeItem } from 'radix-vue'
+import { isToday } from 'date-fns'
+import { computed } from 'vue'
+import type { User } from '../types'
+
+interface ChatMessageProps {
+    id: string
+    content: string
+    timestamp?: Date | string
+    author: string
+    authorEmail: string
+    version?: string
+    avatarUrl?: string
+    isReply?: boolean
+    loading?: boolean
+    depth?: number
+    replies?: ChatMessageProps[]
+    allowReply?: boolean
+    parentElement?: HTMLElement
+    isChat?: boolean
+    currentUser?: User
+    otherUsers?: User[]
+    isExpanded?: boolean
+}
+
+const props = defineProps<ChatMessageProps>()
+const emit = defineEmits<{
+    reply: []
+    delete: [id: string]
+    toggleExpand: []
+}>()
+
+const treeItemRef = ref<HTMLElement>()
+const heightValue = ref(0)
+const isExpandedManually = ref(props.isExpanded ?? false)
+const isMounted = ref(false)
+const isUnmounting = ref(false)
+
+// Wrap TreeItem content in a component
+const MessageContent = defineComponent({
+    inheritAttrs: false,
+    props: {
+        isExpanded: Boolean,
+        handleToggle: Function,
+    },
+    setup(props, { slots }) {
+        return () => slots.default?.({
+            isExpanded: props.isExpanded,
+            handleToggle: () => props.handleToggle?.(),
+        })
+    },
+})
+
+onMounted(() => {
+    isMounted.value = true
+})
+
+onBeforeUnmount(() => {
+    isUnmounting.value = true
+})
+
+async function calculateTotalHeight(message: ChatMessageProps): Promise<number> {
+    try {
+        await nextTick()
+
+        // Guard against unmounting during the async operation
+        if (isUnmounting.value) {
+            return 0
+        }
+
+        const contentElement = document.getElementById(`message-content-${message.id}`)
+        const baseHeight = contentElement?.clientHeight ?? 1
+
+        if (message.replies?.length) {
+            const repliesHeight = await Promise.all(
+                message.replies.map(reply => calculateTotalHeight(reply)),
+            ).then(heights =>
+                heights.reduce((acc, height) => acc + height, 0),
+            )
+            return baseHeight + repliesHeight
+        }
+
+        return baseHeight
+    }
+    catch (error) {
+        console.error('Error calculating total height', error)
+        return 0
+    }
+}
+
+const hasReplies = computed(() => props.replies && props.replies.length > 0)
+const { t, locale } = useI18n()
+
+const timestampString = computed(() => {
+    if (!props.timestamp)
+        return ''
+
+    const date = new Date(props.timestamp)
+    if (isToday(date))
+        return t('chat.todayAt', { time: date.toLocaleTimeString(locale.value ?? 'en-US', { hour: '2-digit', minute: '2-digit', hour12: false }) })
+
+    return t('chat.onDate', { date: date.toLocaleDateString(locale.value ?? 'en-US', { day: '2-digit', month: 'short', year: 'numeric' }) })
+})
+
+const beforeWidth = computed(() => {
+    if (props.parentElement) {
+        if (hasReplies.value) {
+            return `${(props.depth ?? 1) * 24}px`
+        }
+        if (props.depth && props.depth <= 2) {
+            return `80px`
+        }
+    }
+    return '0px'
+})
+
+const resolvedContent = computed(() => {
+    if (props.currentUser && props.otherUsers) {
+        return props.content.replace(/@([\w.-]+@[\w.-]+\.\w+)/g, (match, email) => {
+            const user = props.otherUsers?.find(user => user.email === email)
+            return user ? `<span class="mention" data-type="mention" data-label="${user.name}">@${user.name}</span>` : match
+        })
+    }
+    return props.content
+})
+
+const totalHeight = computed(() => heightValue.value ? `${heightValue.value}px` : '0px')
+
+watch([() => props.replies, isMounted], async () => {
+    if (!isMounted.value || isUnmounting.value)
+        return
+
+    const height = await calculateTotalHeight(props)
+    if (!isUnmounting.value) {
+        heightValue.value = height + 10
+    }
+}, { immediate: true })
+
+watch(isExpandedManually, async () => {
+    const height = await calculateTotalHeight(props)
+    heightValue.value = height
+}, { immediate: true })
+</script>
+
+<template>
+    <component
+        :is="isChat ? TreeItem : MessageContent" ref="treeItemRef"
+        :key="props.id"
+        v-slot="slotProps"
+        :level="props.depth ?? 1"
+        v-bind="{ value: { id: props.id, children: props.replies } }"
+        class="mb-16px"
+        :cursor="hasReplies ? 'pointer' : 'default'"
+        @click.stop="(e: Event) => {
+            isExpandedManually = !isExpandedManually
+        }"
+    >
+        <div
+            class="message-container"
+            :class="[
+                hasReplies ? `
+                    after:absolute
+                    after:left-6
+                    after:top-8
+                    after:bottom-0
+                    after:w-[1px]
+                    after:bg-gray-300
+                    after:z-1
+                    after:h-${totalHeight}`
+                : '',
+                isReply ? `
+                    before:absolute
+                    before:left-[-40px]
+                    before:top-3.5
+                    before:h-[12px]
+                    before:w-[20px]
+                    before:border-l
+                    before:border-b
+                    before:border-gray-300
+                    before:rounded-bl-[12px]
+                    before:z-1
+                    ml-10
+                    mt-2
+                ` : '',
+                { 'before:w-[80px]': props.isReply },
+            ]"
+            :style="{
+                '--before-width': beforeWidth,
+                '--after-height': totalHeight,
+            }"
+        >
+            <div :id="`message-content-${props.id}`" class="flex-1 p-8px">
+                <div class="flex items-start gap-3">
+                    <TelaTooltip v-if="!props.loading" :content="author">
+                        <TelaAvatar
+                            :image="avatarUrl"
+                            :alt="author"
+                            size="sm"
+                            rounded="full"
+                            class="h-8 w-8 shrink-0 relative z-10 bg-white"
+                        />
+                    </TelaTooltip>
+                    <div v-else>
+                        <TelaSkeleton class="w-40px h-40px rounded-full" />
+                    </div>
+
+                    <div class="flex-1">
+                        <div class="flex items-center gap-2">
+                            <div class="flex flex-col mb-2">
+                                <span v-if="!props.loading" class="body-14-semibold text-gray-800">{{ author }}</span>
+                                <TelaSkeleton v-else class="w-100px h-14px mb-2" />
+                                <div v-if="!props.loading" flex="~ gap-1 items-center">
+                                    <span class="body-12-regular text-gray-600">{{ timestampString }}</span>
+                                    <TelaIcon v-if="version" name="i-ph-dot" color="gray-300" />
+                                    <div v-if="version" py-2px px-4px rounded-5px bg-gray-200 h-16px>
+                                        <p body-caption-9-bold text-gray-600>
+                                            {{ version }}
+                                        </p>
+                                    </div>
+                                </div>
+                                <TelaSkeleton v-else class="w-80px h-8px" />
+                            </div>
+                            <div flex-auto />
+                            <TelaDropdownMenu
+                                v-if="!props.loading"
+                                :disabled="props.id === 'new'"
+                                :items="[
+                                    {
+                                        label: 'Delete',
+                                        color: 'negative',
+                                        disabled: !props.authorEmail
+                                            || !props.currentUser?.email
+                                            || props.authorEmail !== props.currentUser?.email,
+                                        icon: 'i-ph-trash-simple-bold',
+                                        click: () => emit('delete', props.id),
+                                    },
+                                ]"
+                            >
+                                <TelaIconButton
+                                    size="3xs"
+                                    color="secondary"
+                                    icon="i-ph-dots-three-vertical-bold"
+                                />
+                            </TelaDropdownMenu>
+                        </div>
+
+                        <div v-if="!props.loading" class="mt-1 body-16-regular text-gray-800">
+                            <span v-html="resolvedContent" />
+                        </div>
+                        <div v-else flex="~ col gap-8px">
+                            <TelaSkeleton
+                                v-for="width in [50, 30]"
+                                :key="width"
+                                :style="{ width: `${width}%` }"
+                                h-12px
+                            />
+                        </div>
+
+                        <div v-if="!props.loading" class="flex items-start gap-2 mt-8px">
+                            <TelaButton
+                                v-if="allowReply"
+                                variant="ghost"
+                                size="sm"
+                                b="0.5px solid gray-300"
+                                bg-white
+                                :disabled="props.id === 'new'"
+                                class="text-gray-900 body-12-semibold"
+                                @click.stop="emit('reply')"
+                            >
+                                <TelaIcon name="i-ph-arrow-bend-down-right" size="sm" />
+                                Reply
+                            </TelaButton>
+                        </div>
+                    </div>
+                </div>
+                <TelaIconButton
+                    v-if="hasReplies"
+                    z-50
+                    size="2xs"
+                    color="secondary"
+                    icon="i-ph-caret-down"
+                    b="0.5px solid gray-300"
+                    h-24px
+                    w-24px
+                    :class="{ 'rotate-0': slotProps.isExpanded, '-rotate-90': !slotProps.isExpanded }"
+                    class="absolute top-70px left-12px z-10 bg-white"
+                    @click.stop="(e: Event) => {
+                        slotProps.handleToggle(e)
+                        isExpandedManually = !isExpandedManually
+                    }"
+                />
+            </div>
+        </div>
+
+        <!-- Recursively render replies as nested TreeItems -->
+        <template v-if="hasReplies && slotProps.isExpanded">
+            <component
+                :is="isChat ? TreeItem : 'div'"
+                v-for="reply in replies"
+                :key="reply.id"
+                :value="{ id: reply.id }"
+                :level="(props.depth ?? 1) + 1"
+                class="mt-10px ml-24px"
+                :style="{
+                    width: `calc(100% - 62px)`,
+                }"
+            >
+                <TelaChatTextMessage
+                    :id="reply.id"
+                    :content="reply.content"
+                    :timestamp="reply.timestamp"
+                    :author="reply.author"
+                    :author-email="reply.authorEmail"
+                    :avatar-url="reply.avatarUrl"
+                    :is-reply="true"
+                    :depth="(props.depth ?? 1) + 1"
+                    :replies="reply.replies"
+                    :parent-element="treeItemRef ?? undefined"
+                    :allow-reply="false"
+                    :current-user="props.currentUser"
+                    :other-users="props.otherUsers"
+                    :is-expanded="isExpandedManually"
+                    @delete="() => emit('delete', reply.id)"
+                />
+            </component>
+        </template>
+    </component>
+</template>
+
+<style scoped>
+.message-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: 3px;
+    position: relative;
+}
+
+.message-container::before {
+    width: var(--before-width);
+}
+
+.message-container::after {
+    height: var(--after-height);
+}
+
+.rotate-0 {
+    transform: rotate(0deg);
+}
+
+.-rotate-90 {
+    transform: rotate(-90deg);
+}
+</style>

package/components/tela/chat/types.ts

@@ -0,0 +1,19 @@
+export interface Message {
+    id: string
+    content: string
+    timestamp?: Date
+    author: string
+    authorEmail: string
+    avatarUrl?: string
+    version?: string
+    isReply?: boolean
+    replies?: Message[]
+    parentId?: string
+}
+
+export type User = {
+    id: string
+    name: string
+    email: string
+    avatarUrl: string
+}

package/components/tela/checkbox/checkbox-card.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { Label, useForwardPropsEmits } from 'reka-ui'
+import type { CheckboxRootProps, CheckboxRootEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<CheckboxRootProps & { label: string, description: string, class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <Label
+        :class="cn(
+            'w-[380px] p-[12px] flex items-center gap-[12px] rounded-[8px] bg-white-1000 cursor-pointer border-[0.5px] border-gray-200 transition-colors disabled:cursor-not-allowed disabled:bg-gray-100 disabled:border-gray-200',
+            'has-[[aria-checked=false]]:hover:bg-gray-50 has-[[aria-checked=false]]:hover:border-gray-300 has-[[aria-checked=true]]:bg-blue-100/60 has-[[aria-checked=true]]:border-blue-700',
+            props.class,
+        )"
+    >
+        <TelaCheckbox v-bind="forwarded" />
+        <div>
+            <h4 class="body-12-medium text-gray-900">
+                {{ label }}
+            </h4>
+            <p class="body-12-regular text-gray-500">
+                {{ description }}
+            </p>
+        </div>
+    </Label>
+</template>

package/components/tela/checkbox/checkbox.mdx

@@ -0,0 +1,164 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as CheckboxStories from './checkbox.stories.ts';
+
+<Meta of={CheckboxStories} />
+
+# TelaCheckbox
+
+A checkbox component built on reka-ui. Supports v-model binding, disabled states, and integrates with forms. Features smooth check animations and includes a checkbox card variant for more complex use cases with labels and descriptions.
+
+## Examples
+
+### With Label
+
+<Canvas of={CheckboxStories.WithLabel} />
+
+### Disabled
+
+<Canvas of={CheckboxStories.Disabled} />
+
+### With Model Value
+
+<Canvas of={CheckboxStories.WithModelValue} />
+
+### Checkbox Card
+
+<Canvas of={CheckboxStories.Card} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const checked = ref(false)
+</script>
+
+<template>
+  <TelaCheckbox v-model="checked" />
+</template>
+```
+
+### With Label Code
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const accepted = ref(false)
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <TelaCheckbox id="terms" v-model="accepted" />
+    <label for="terms" class="cursor-pointer">
+      I accept the terms and conditions
+    </label>
+  </div>
+</template>
+```
+
+### Disabled State
+
+```vue
+<TelaCheckbox disabled :model-value="true" />
+<TelaCheckbox disabled :model-value="false" />
+```
+
+### In Forms
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const preferences = ref([])
+</script>
+
+<template>
+  <form>
+    <div class="flex items-center gap-2">
+      <TelaCheckbox
+        id="notifications"
+        v-model="preferences"
+        value="notifications"
+        name="preferences"
+      />
+      <label for="notifications">Enable notifications</label>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <TelaCheckbox
+        id="newsletter"
+        v-model="preferences"
+        value="newsletter"
+        name="preferences"
+      />
+      <label for="newsletter">Subscribe to newsletter</label>
+    </div>
+  </form>
+</template>
+```
+
+### Checkbox Card Code
+
+```vue
+<TelaCheckboxCard
+  label="Make available to all workspaces"
+  description="All workspaces will have access to this template."
+/>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type CheckboxProps = {
+  modelValue?: boolean
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  value?: string
+  class?: string
+}
+```
+
+## Features
+
+- **Two-way Binding**: Full v-model support for reactive state
+- **Smooth Animation**: Check mark animates in with path drawing effect
+- **Disabled State**: Proper disabled styling with grayed out appearance
+- **Form Integration**: Works with native form submission
+- **Hover States**: Interactive hover feedback
+- **Focus Ring**: Keyboard navigation with visible focus indicator
+- **Accessible**: Built on reka-ui with proper ARIA attributes
+- **Card Variant**: TelaCheckboxCard for enhanced layouts with labels and descriptions
+
+## Components
+
+- `TelaCheckbox` - Standard checkbox component
+- `TelaCheckboxCard` - Enhanced checkbox with label and description layout
+
+## States
+
+- **Unchecked**: White background with gray border
+- **Checked**: Dark background with white checkmark
+- **Hover Unchecked**: Light gray background
+- **Hover Checked**: Slightly lighter dark background
+- **Disabled**: Reduced opacity, cursor not-allowed
+
+## Animation
+
+The checkbox uses Motion components for smooth check mark animation:
+- Scale animation from 0.85 to 1
+- Path length animation from 0 to 1 (drawing effect)
+- 200ms duration with custom easing
+
+## Accessibility
+
+- Built on reka-ui's CheckboxRoot and CheckboxIndicator
+- Proper ARIA attributes for screen readers
+- Keyboard support (Space to toggle)
+- Focus visible ring for keyboard navigation
+- Works with form labels using `id` and `for` attributes
+- Disabled state properly conveyed