@meistrari/tela-build 1.0.0

package/components/tela/file-upload/file-upload.mdx

@@ -0,0 +1,189 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as FileUploadStories from './file-upload.stories.ts';
+
+<Meta of={FileUploadStories} />
+
+# TelaFileUpload
+
+A file upload component that provides drag-and-drop functionality and traditional file selection. Supports multiple file selection, file type restrictions, and custom styling. Emits events for file selection and validation.
+
+## Examples
+
+### Basic Usage
+
+```vue
+<script setup>
+const handleFiles = (files) => {
+  console.log('Selected files:', files)
+}
+</script>
+
+<template>
+  <TelaFileUpload @change="handleFiles" />
+</template>
+```
+
+### Accept Specific File Types
+
+```vue
+<!-- Images only -->
+<TelaFileUpload accept="image/*" />
+
+<!-- PDFs only -->
+<TelaFileUpload accept=".pdf" />
+
+<!-- Images and PDFs -->
+<TelaFileUpload accept="image/*,.pdf" />
+
+<!-- Multiple types -->
+<TelaFileUpload accept=".jpg,.jpeg,.png,.pdf,.doc,.docx" />
+```
+
+### Multiple Files
+
+```vue
+<TelaFileUpload multiple @change="handleFiles" />
+```
+
+### With Max Size
+
+```vue
+<TelaFileUpload
+  :max-size="5242880"
+  @change="handleFiles"
+  @error="handleError"
+/>
+<!-- 5MB = 5 * 1024 * 1024 bytes -->
+```
+
+### Disabled State
+
+```vue
+<TelaFileUpload disabled />
+```
+
+### Complete Example
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const files = ref([])
+const error = ref(null)
+
+const handleChange = (selectedFiles) => {
+  files.value = Array.from(selectedFiles)
+  error.value = null
+}
+
+const handleError = (errorMessage) => {
+  error.value = errorMessage
+}
+
+const removeFile = (index) => {
+  files.value.splice(index, 1)
+}
+</script>
+
+<template>
+  <div>
+    <TelaFileUpload
+      accept="image/*,.pdf"
+      multiple
+      :max-size="10485760"
+      @change="handleChange"
+      @error="handleError"
+    />
+
+    <div v-if="error" class="text-red-500 mt-2">
+      {{ error }}
+    </div>
+
+    <div v-if="files.length > 0" class="mt-4">
+      <h4 class="font-semibold mb-2">Selected Files:</h4>
+      <ul class="space-y-2">
+        <li
+          v-for="(file, index) in files"
+          :key="index"
+          class="flex items-center justify-between p-2 bg-gray-100 rounded"
+        >
+          <span>{{ file.name }} ({{ formatFileSize(file.size) }})</span>
+          <TelaButton
+            size="sm"
+            variant="ghost"
+            @click="removeFile(index)"
+          >
+            Remove
+          </TelaButton>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type FileUploadProps = {
+  accept?: string
+  multiple?: boolean
+  disabled?: boolean
+  maxSize?: number
+}
+```
+
+## Events
+
+- `change` - Emitted when files are selected with FileList
+- `error` - Emitted when validation fails (e.g., file too large)
+
+## Features
+
+- **Drag and Drop**: Drag files onto the component
+- **Click to Browse**: Traditional file picker
+- **File Type Filtering**: Accept specific file types
+- **Multiple Files**: Select multiple files at once
+- **Size Validation**: Enforce maximum file size
+- **Disabled State**: Prevent file selection
+- **Visual Feedback**: Hover and drag states
+- **Accessible**: Keyboard navigation support
+
+## File Size Limits
+
+Common file size limits:
+- 1MB = 1048576 bytes
+- 5MB = 5242880 bytes
+- 10MB = 10485760 bytes
+- 50MB = 52428800 bytes
+- 100MB = 104857600 bytes
+
+## Accepted File Types
+
+Common accept patterns:
+- Images: `image/*`
+- PDFs: `.pdf` or `application/pdf`
+- Documents: `.doc,.docx,.txt`
+- Spreadsheets: `.xls,.xlsx,.csv`
+- Audio: `audio/*`
+- Video: `video/*`
+- Any: `*/*` (not recommended)
+
+## Best Practices
+
+1. **Set Accept Types**: Always specify accepted file types
+2. **Validate Size**: Set reasonable max size limits
+3. **Provide Feedback**: Show selected files and errors
+4. **Handle Errors**: Gracefully handle validation failures
+5. **Show Progress**: Display upload progress for large files
+6. **Clear Instructions**: Tell users what files are accepted
+
+## Accessibility
+
+- Keyboard accessible file input
+- Proper ARIA labels
+- Focus states
+- Disabled state properly conveyed
+- Screen reader friendly

package/components/tela/file-upload/file-upload.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook-vue/vue3'
+
+import FileUpload from './file-upload.vue'
+
+const meta: Meta<typeof FileUpload> = {
+    title: 'Core/FileUpload',
+    component: FileUpload,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A file upload component that provides drag-and-drop functionality and traditional file selection. Supports multiple file selection, file type restrictions, and custom styling. Emits events for file selection and validation.',
+            },
+        },
+    },
+    argTypes: {
+        accept: {
+            control: 'text',
+            description: 'Comma-separated list of accepted file types (e.g., "image/*,.pdf").',
+        },
+        multiple: {
+            control: 'boolean',
+            description: 'Allow selection of multiple files.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the file upload component.',
+        },
+        maxSize: {
+            control: 'number',
+            description: 'Maximum file size in bytes allowed for upload.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: () => ({
+        components: { FileUpload },
+        template: `
+            <div style="width: 100%; height: 300px; display: flex; align-items: center; justify-content: center;">
+                <FileUpload />
+            </div>`,
+    }),
+}

package/components/tela/file-upload/file-upload.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = withDefaults(defineProps<{
+    class?: string
+    multiple?: boolean
+    maxFiles?: number
+    maxFileSize?: number // in MB
+    acceptedFormats?: string[] // e.g., ['image/png', 'image/jpeg', 'application/pdf']
+    acceptedExtensions?: string[] // e.g., ['.png', '.jpg', '.pdf'] - for display
+}>(), {
+    multiple: true,
+    maxFiles: 5,
+    maxFileSize: 10, // 10MB default
+    acceptedFormats: () => [],
+    acceptedExtensions: () => [],
+})
+
+const emit = defineEmits<{
+    error: [message: string]
+}>()
+
+const { t } = useI18n()
+const files = defineModel<File[]>({ required: true })
+const isDragging = ref(false)
+
+function validateFiles(newFiles: FileList | File[]): File[] {
+    const fileArray = Array.from(newFiles)
+    const maxSizeBytes = props.maxFileSize * 1024 * 1024
+
+    // Check file formats if specified
+    if (props.acceptedFormats.length > 0) {
+        const invalidFiles = fileArray.filter((file) => {
+            // Check MIME type
+            const mimeTypeMatch = props.acceptedFormats.includes(file.type)
+
+            // Check file extension as fallback
+            const extension = `.${file.name.split('.').pop()?.toLowerCase()}`
+            const extensionMatch = props.acceptedExtensions.some(ext =>
+                extension === ext.toLowerCase(),
+            )
+
+            return !mimeTypeMatch && !extensionMatch
+        })
+
+        if (invalidFiles.length > 0) {
+            const formatsDisplay = props.acceptedExtensions.length > 0
+                ? props.acceptedExtensions.join(', ').toUpperCase()
+                : props.acceptedFormats.join(', ')
+            emit('error', t('common.fileUpload.errors.invalidFormat', { formats: formatsDisplay }))
+            return []
+        }
+    }
+
+    // Check file sizes
+    const oversizedFiles = fileArray.filter(file => file.size > maxSizeBytes)
+    if (oversizedFiles.length > 0) {
+        emit('error', t('common.fileUpload.errors.fileTooLarge', { maxSize: props.maxFileSize }))
+        return []
+    }
+
+    // Check total file count
+    const totalFiles = files.value.length + fileArray.length
+    if (totalFiles > props.maxFiles) {
+        emit('error', t('common.fileUpload.errors.tooManyFiles', { maxFiles: props.maxFiles }))
+        return []
+    }
+
+    return fileArray
+}
+
+function handleFileChange(event: Event) {
+    const input = event.target as HTMLInputElement
+
+    if (input.files && input.files.length > 0) {
+        const validFiles = validateFiles(input.files)
+
+        if (validFiles.length > 0) {
+            if (props.multiple) {
+                // Append new files to existing ones
+                files.value = [...files.value, ...validFiles]
+            }
+            else {
+                files.value = [validFiles[0]]
+            }
+        }
+    }
+
+    // Reset input value to allow selecting the same file again
+    input.value = ''
+}
+
+function handleDragEnter(event: DragEvent) {
+    event.preventDefault()
+    isDragging.value = true
+}
+
+function handleDragLeave(event: DragEvent) {
+    event.preventDefault()
+    isDragging.value = false
+}
+
+function handleDragOver(event: DragEvent) {
+    event.preventDefault()
+}
+
+function handleDrop(event: DragEvent) {
+    event.preventDefault()
+    isDragging.value = false
+
+    const droppedFiles = event.dataTransfer?.files
+
+    if (droppedFiles && droppedFiles.length > 0) {
+        const validFiles = validateFiles(droppedFiles)
+
+        if (validFiles.length > 0) {
+            if (props.multiple) {
+                // Append new files to existing ones
+                files.value = [...files.value, ...validFiles]
+            }
+            else {
+                files.value = [validFiles[0]]
+            }
+        }
+    }
+}
+
+function removeFile(index: number) {
+    files.value = files.value.filter((_, i) => i !== index)
+}
+
+function formatFileSize(bytes: number): string {
+    if (bytes === 0)
+        return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return `${Math.round(bytes / k ** i * 100) / 100} ${sizes[i]}`
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-2 w-full">
+        <label
+            for="file-upload"
+            :class="cn(
+                'w-full py-4.5 flex flex-col items-center justify-center gap-2.5 cursor-pointer bg-gray-50 border-[1px] border-gray-300 border-dashed rounded-xl transition-colors',
+                isDragging && 'border-gray-300 bg-gray-100',
+                props.class,
+            )"
+            @dragenter="handleDragEnter"
+            @dragleave="handleDragLeave"
+            @dragover="handleDragOver"
+            @drop="handleDrop"
+        >
+            <TelaIcon name="i-ph-upload-simple-bold" size="16px" class="text-gray-700" />
+            <div class="flex flex-col items-center justify-center gap-1">
+                <h3 class="text-gray-700 text-body-14-semibold font-580">
+                    {{ $t('common.fileUpload.dragAndDrop') }} <TelaLinkDecoration class="text-gray-700">{{ $t('common.fileUpload.orBrowse') }}</TelaLinkDecoration>
+                </h3>
+                <p class="text-10px leading-12px tracking-normal text-gray-400">
+                    <template v-if="acceptedExtensions.length > 0">
+                        {{ acceptedExtensions.join(', ').toUpperCase() }}
+                    </template>
+                    <template v-else>
+                        {{ $t('common.fileUpload.supportedFormats') }}
+                    </template>
+                </p>
+                <span class="text-10px leading-12px tracking-normal text-gray-400">
+                    {{ t('common.fileUpload.maxSize', { maxSize: maxFileSize }) }} • {{ t('common.fileUpload.filesCount', { current: files.length, max: maxFiles }) }}
+                </span>
+            </div>
+        </label>
+
+        <div v-if="files.length > 0" class="flex flex-col gap-2px ">
+            <div
+                v-for="(file, index) in files"
+                :key="`${file.name}-${index}`"
+                class="flex items-center justify-between px-3 py-2 bg-gray-50 rounded-lg border-1px border-gray-300"
+            >
+                <div class="flex items-center gap-2 flex-1 min-w-0">
+                    <TelaIcon name="i-ph-file-bold" size="14px" class="text-gray-500 flex-shrink-0" />
+                    <span class="text-body-14-regular text-gray-700 truncate">{{ file.name }}</span>
+                    <span class="text-10px text-gray-400 flex-shrink-0">({{ formatFileSize(file.size) }})</span>
+                </div>
+                <button
+                    type="button"
+                    class="flex-shrink-0 p-1 hover:bg-gray-100 rounded transition-colors"
+                    @click="removeFile(index)"
+                >
+                    <TelaIcon name="i-ph-x-bold" size="12px" class="text-gray-500" />
+                </button>
+            </div>
+        </div>
+    </div>
+    <input
+        id="file-upload"
+        type="file"
+        class="hidden"
+        :multiple="props.multiple"
+        :accept="acceptedFormats.length > 0 ? acceptedFormats.join(',') : undefined"
+        @change="handleFileChange"
+    >
+</template>

package/components/tela/filters/checkbox-filter.stories.ts

@@ -0,0 +1,218 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import CheckboxFilter from './checkbox-filter.vue'
+
+const meta: Meta<typeof CheckboxFilter> = {
+    title: 'Filters/CheckboxFilter',
+    component: CheckboxFilter,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A dropdown filter component with searchable checkboxes for multi-select filtering. Features include a search bar, scrollable options list, and a sticky apply button. Ideal for filtering data by multiple criteria.',
+            },
+        },
+    },
+    argTypes: {
+        buttonLabel: {
+            control: 'text',
+            description: 'The label displayed on the filter button',
+        },
+        identifier: {
+            control: 'text',
+            description: 'Unique identifier for the filter',
+        },
+        options: {
+            control: 'object',
+            description: 'Object containing filter options. Each key should have a value and label property',
+        },
+        isActive: {
+            control: 'boolean',
+            description: 'Whether the filter is currently active (has selections applied)',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the filter button is disabled',
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Whether the filter is in a loading state',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { CheckboxFilter },
+        setup() {
+            const selected = ref({ identifier: 'type', label: 'Type', value: undefined })
+            const isActive = ref(false)
+
+            function handleApply(value: any) {
+                selected.value = {
+                    identifier: 'type',
+                    label: value.type.map((t: string) => t.charAt(0).toUpperCase() + t.slice(1)).join(', '),
+                    value: value.type,
+                }
+                isActive.value = true
+            }
+
+            function handleReset() {
+                selected.value = { identifier: 'type', label: 'Type', value: undefined }
+                isActive.value = false
+            }
+
+            return { selected, isActive, handleApply, handleReset, args }
+        },
+        template: `
+            <div class="flex flex-col gap-4 p-4">
+                <CheckboxFilter
+                    v-bind="args"
+                    :selected="selected"
+                    :is-active="isActive"
+                    @apply="handleApply"
+                    @reset="handleReset"
+                />
+            </div>
+        `,
+    }),
+    args: {
+        buttonLabel: 'Type',
+        identifier: 'type',
+        options: {
+            completion: { value: 'completion', label: 'Completion' },
+            parser: { value: 'parser', label: 'Parser' },
+            workflow: { value: 'workflow', label: 'Workflow' },
+        },
+        isActive: false,
+        disabled: false,
+        loading: false,
+    },
+}
+
+export const WithManyOptions: Story = {
+    render: args => ({
+        components: { CheckboxFilter },
+        setup() {
+            const selected = ref({ identifier: 'model', label: 'Model', value: undefined })
+            const isActive = ref(false)
+
+            function handleApply(value: any) {
+                const models = value.model
+                const label = models.length > 2
+                    ? `${models[0]} & ${models.length - 1} others`
+                    : models.join(' & ')
+                selected.value = {
+                    identifier: 'model',
+                    label,
+                    value: models,
+                }
+                isActive.value = true
+            }
+
+            function handleReset() {
+                selected.value = { identifier: 'model', label: 'Model', value: undefined }
+                isActive.value = false
+            }
+
+            return { selected, isActive, handleApply, handleReset, args }
+        },
+        template: `
+            <div class="flex flex-col gap-4 p-4">
+                <CheckboxFilter
+                    v-bind="args"
+                    :selected="selected"
+                    :is-active="isActive"
+                    @apply="handleApply"
+                    @reset="handleReset"
+                />
+            </div>
+        `,
+    }),
+    args: {
+        buttonLabel: 'Model',
+        identifier: 'model',
+        options: {
+            'gpt-4': { value: 'gpt-4', label: 'GPT-4' },
+            'gpt-4-turbo': { value: 'gpt-4-turbo', label: 'GPT-4 Turbo' },
+            'gpt-3.5-turbo': { value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo' },
+            'claude-3-opus': { value: 'claude-3-opus', label: 'Claude 3 Opus' },
+            'claude-3-sonnet': { value: 'claude-3-sonnet', label: 'Claude 3 Sonnet' },
+            'claude-3-haiku': { value: 'claude-3-haiku', label: 'Claude 3 Haiku' },
+            'gemini-pro': { value: 'gemini-pro', label: 'Gemini Pro' },
+            'llama-2-70b': { value: 'llama-2-70b', label: 'Llama 2 70B' },
+        },
+        isActive: false,
+        disabled: false,
+        loading: false,
+    },
+}
+
+export const Active: Story = {
+    render: args => ({
+        components: { CheckboxFilter },
+        setup() {
+            const selected = ref({ identifier: 'status', label: 'Succeeded, Failed', value: ['success', 'failed'] })
+            const isActive = ref(true)
+
+            function handleApply(value: any) {
+                selected.value = {
+                    identifier: 'status',
+                    label: value.status.map((s: string) => s.charAt(0).toUpperCase() + s.slice(1)).join(', '),
+                    value: value.status,
+                }
+                isActive.value = true
+            }
+
+            function handleReset() {
+                selected.value = { identifier: 'status', label: 'Status', value: [] }
+                isActive.value = false
+            }
+
+            return { selected, isActive, handleApply, handleReset, args }
+        },
+        template: `
+            <div class="flex flex-col gap-4 p-4">
+                <CheckboxFilter
+                    v-bind="args"
+                    :selected="selected"
+                    :is-active="isActive"
+                    @apply="handleApply"
+                    @reset="handleReset"
+                />
+            </div>
+        `,
+    }),
+    args: {
+        buttonLabel: 'Status',
+        identifier: 'status',
+        options: {
+            success: { value: 'success', label: 'Succeeded' },
+            failed: { value: 'failed', label: 'Failed' },
+        },
+        isActive: true,
+        disabled: false,
+        loading: false,
+    },
+}
+
+export const Disabled: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
+}
+
+export const Loading: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        loading: true,
+    },
+}