@nuvia-ui/components 4.0.1

package/src/ds-file-uploader/ds-file-uploader.js

@@ -0,0 +1,442 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { FieldLabelMixin, fieldLabelStyles } from '../mixins/field-label.mixin.js';
+import { FieldMessageMixin, fieldMessageStyles } from '../mixins/field-message.mixin.js';
+import '../ds-icon/ds-icon.js';
+import '../ds-rich-list/ds-rich-list.js';
+import '../ds-file-uploaded/ds-file-uploaded.js';
+
+/**
+ * Parses file size to human readable string
+ * @param {number} bytes 
+ * @returns {string}
+ */
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+/**
+ * File Uploader — Drag and drop area for uploading files.
+ * Provides label, help/error messages, and renders the uploaded files list.
+ *
+ * @element ds-file-uploader
+ *
+ * @prop {string} label - The label text.
+ * @prop {string} info - Info tooltip text.
+ * @prop {string} helpText - Hint text displayed below the field.
+ * @prop {string} errorText - Error text. Changes state to error.
+ * @prop {boolean} multiple - Allows multiple files.
+ * @prop {boolean} disabled - Disables the component.
+ * @prop {string} accept - Accepted file types (e.g. ".jpg, .pdf").
+ * @prop {number} maxFileSize - Maximum allowed file size in bytes.
+ * @prop {number} maxFiles - Maximum allowed number of files.
+ * @prop {Array} files - Array of file objects to render.
+ *
+ * @fires ds-change - Emitted when files change. Detail contains `files` array.
+ * @fires ds-error - Emitted when a file is rejected.
+ */
+export class DsFileUploader extends FieldMessageMixin(FieldLabelMixin(LitElement)) {
+  static properties = {
+    label: { type: String },
+    info: { type: String },
+    helpText: { type: String, attribute: 'help-text' },
+    errorText: { type: String, attribute: 'error-text' },
+    multiple: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    accept: { type: String },
+    maxFileSize: { type: Number, attribute: 'max-file-size' },
+    maxFiles: { type: Number, attribute: 'max-files' },
+    files: { type: Array },
+    _isDragging: { type: Boolean, state: true }
+  };
+
+  static styles = [
+    fieldLabelStyles,
+    fieldMessageStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-space-xs);
+        width: 100%;
+      }
+
+      .drop-area {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: var(--ds-file-uploader-drop-area-min-height, 72px);
+        padding: var(--ds-space-md);
+        background-color: transparent;
+        border: 1px dashed var(--ds-color-border-strong);
+        border-radius: var(--ds-radius-container);
+        cursor: pointer;
+        transition: background-color 0.2s, border-color 0.2s, border-width 0.2s;
+        box-sizing: border-box;
+        text-align: center;
+      }
+
+      .drop-area:hover {
+        background-color: var(--ds-color-bg-hover);
+      }
+
+      .drop-area:focus-visible {
+        outline: none;
+        border: 2px solid var(--ds-color-border-focus);
+        padding: calc(var(--ds-space-md) - 1px);
+      }
+
+      :host([is-dragging]) .drop-area {
+        background-color: var(--ds-color-bg-brand-subtle, var(--ds-color-bg-hover));
+        border-color: var(--ds-color-border-brand, var(--ds-color-border-focus));
+      }
+
+      /* Error State */
+      :host([error]) .drop-area,
+      .drop-area.error {
+        border-color: var(--ds-color-border-error);
+      }
+
+      /* Disabled State */
+      :host([disabled]) .drop-area {
+        pointer-events: none;
+        border-color: var(--ds-color-border-disabled);
+        background-color: var(--ds-color-bg-disabled);
+        opacity: 0.5;
+      }
+
+      /* Disabled Label and Message */
+      :host([disabled]) .label-row label {
+        color: var(--ds-color-text-disabled);
+        cursor: not-allowed;
+      }
+
+      :host([disabled]) .field-message {
+        color: var(--ds-color-text-disabled);
+      }
+
+      .drop-area-content {
+        display: flex;
+        align-items: center;
+        gap: var(--ds-space-xs);
+        pointer-events: none; /* Let the container handle clicks */
+      }
+
+      .drop-area-content ds-icon {
+        color: var(--ds-color-icon-secondary);
+      }
+
+      :host([disabled]) .drop-area-content ds-icon {
+        color: var(--ds-color-icon-disabled);
+      }
+
+      .drop-area-text {
+        font: var(--ds-typo-content-body-regular);
+        color: var(--ds-color-text-secondary);
+      }
+
+      :host([disabled]) .drop-area-text {
+        color: var(--ds-color-text-disabled);
+      }
+
+      .files-list {
+        margin-top: var(--ds-space-xs);
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-space-sm);
+      }
+
+      input[type="file"] {
+        display: none;
+      }
+    `
+  ];
+
+  constructor() {
+    super();
+    this.label = '';
+    this.info = '';
+    this.helpText = '';
+    this.errorText = '';
+    this.multiple = false;
+    this.disabled = false;
+    this.accept = '';
+    this.maxFileSize = 0;
+    this.maxFiles = 0;
+    this.files = [];
+    this._isDragging = false;
+    this._fileInputId = `ds-file-input-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  updated(changedProps) {
+    if (changedProps.has('errorText')) {
+      this.toggleAttribute('error', !!this.errorText);
+    }
+  }
+
+  /**
+   * Public method to programmatically trigger the file dialog.
+   */
+  openFileDialog() {
+    if (this.disabled) return;
+    const input = this.shadowRoot.querySelector('#' + this._fileInputId);
+    if (input) input.click();
+  }
+
+  /**
+   * Public method to clear all files.
+   */
+  clear() {
+    if (this.disabled) return;
+    this.errorText = '';
+    // Release memory
+    this.files.forEach(f => {
+      if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);
+    });
+    this.files = [];
+    const input = this.shadowRoot.querySelector('#' + this._fileInputId);
+    if (input) input.value = '';
+    this._dispatchChange();
+  }
+
+  _handleClick() {
+    this.openFileDialog();
+  }
+
+  _handleKeyDown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.openFileDialog();
+    }
+  }
+
+  _handleDragOver(e) {
+    e.preventDefault();
+    if (this.disabled) return;
+    this._isDragging = true;
+    this.toggleAttribute('is-dragging', true);
+  }
+
+  _handleDragLeave(e) {
+    e.preventDefault();
+    this._isDragging = false;
+    this.toggleAttribute('is-dragging', false);
+  }
+
+  _handleDrop(e) {
+    e.preventDefault();
+    this._isDragging = false;
+    this.toggleAttribute('is-dragging', false);
+
+    if (this.disabled) return;
+
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      this._processFiles(Array.from(e.dataTransfer.files));
+    }
+  }
+
+  _handleInputChange(e) {
+    if (e.target.files && e.target.files.length > 0) {
+      this._processFiles(Array.from(e.target.files));
+      // Reset input so the same file could be selected again if removed
+      e.target.value = '';
+    }
+  }
+
+  _processFiles(newRawFiles) {
+    this.errorText = '';
+    const validFiles = [];
+    let rejected = false;
+
+    // Check Max Files
+    if (this.maxFiles > 0 && (this.files.length + newRawFiles.length) > this.maxFiles) {
+      this._dispatchError('max-files', `Maximum number of files is ${this.maxFiles}.`);
+      rejected = true;
+      if (!this.multiple) return; // If single mode exceeds max (shouldn't really happen if correctly configured, but just in case)
+    }
+
+    // Process each
+    const toProcess = this.multiple ? newRawFiles : [newRawFiles[0]];
+
+    for (const file of toProcess) {
+      // Check for Duplicates
+      const isDuplicate = this.files.some(f => f.filename === file.name && f.file.size === file.size);
+      if (isDuplicate) {
+        this._dispatchError('duplicate-file', `File "${file.name}" has already been uploaded.`, file);
+        rejected = true;
+        continue;
+      }
+
+      // Check Size
+      const maxBytes = Number(this.maxFileSize);
+      if (maxBytes > 0 && file.size > maxBytes) {
+        this._dispatchError('max-file-size', `File "${file.name}" exceeds the maximum allowed size of ${formatBytes(maxBytes)}.`, file);
+        rejected = true;
+        continue;
+      }
+
+      // Check Accept (basic implementation, native input handles most of selection restriction)
+      if (this.accept) {
+        const acceptList = this.accept.split(',').map(a => a.trim().toLowerCase());
+        const ext = file.name.split('.').pop().toLowerCase();
+        const baseType = file.type.split('/')[0];
+
+        const isAccepted = acceptList.some(type => {
+          if (type.startsWith('.')) return `.${ext}` === type;
+          if (type.endsWith('/*')) return `${baseType}/*` === type;
+          return file.type === type;
+        });
+
+        if (!isAccepted) {
+          this._dispatchError('invalid-type', `File "${file.name}" has an invalid type.`, file);
+          rejected = true;
+          continue;
+        }
+      }
+
+      // Ensure single/multiple rules
+      if (!this.multiple && (validFiles.length > 0 || this.files.length > 0)) {
+        // If single and we already have a file, clear existing
+        this.files.forEach(f => {
+          if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);
+        });
+        this.files = [];
+      }
+
+      // Icon Mapping
+      let icon = 'document';
+      let previewUrl = '';
+      if (file.type.startsWith('image/')) {
+        previewUrl = URL.createObjectURL(file);
+        icon = 'image';
+      } else if (file.type === 'application/pdf') {
+        icon = 'description';
+      } else if (file.type.includes('spreadsheet') || file.type.includes('csv') || file.type.includes('excel')) {
+        icon = 'table_view';
+      } else if (file.type.includes('zip') || file.type.includes('archive') || file.type.includes('tar') || file.type.includes('gzip')) {
+        icon = 'folder_zip';
+      } else if (file.type.startsWith('video/')) {
+        icon = 'movie';
+      }
+
+      validFiles.push({
+        id: Math.random().toString(36).substr(2, 9),
+        file,
+        filename: file.name,
+        size: formatBytes(file.size),
+        progress: 0,
+        loading: false,
+        error: false,
+        errorMessage: '',
+        previewUrl,
+        icon
+      });
+    }
+
+    if (validFiles.length > 0) {
+      if (this.multiple) {
+        this.files = [...this.files, ...validFiles];
+      } else {
+        this.files = [validFiles[0]];
+      }
+      this._dispatchChange();
+    }
+  }
+
+  _dispatchChange() {
+    this.dispatchEvent(new CustomEvent('ds-change', {
+      bubbles: true,
+      composed: true,
+      detail: { files: this.files }
+    }));
+  }
+
+  _dispatchError(type, message, file = null) {
+    this.errorText = message;
+    this.dispatchEvent(new CustomEvent('ds-error', {
+      bubbles: true,
+      composed: true,
+      detail: { type, message, file }
+    }));
+  }
+
+  _handleRemoveFile(e) {
+    const filenameToRemove = e.detail.filename;
+    const fileToRemove = this.files.find(f => f.filename === filenameToRemove);
+    if (fileToRemove && fileToRemove.previewUrl) {
+      URL.revokeObjectURL(fileToRemove.previewUrl);
+    }
+    this.files = this.files.filter(f => f.filename !== filenameToRemove);
+    this._dispatchChange();
+  }
+
+  render() {
+    const showDropArea = this.multiple || this.files.length === 0;
+
+    return html`
+      ${this.renderFieldLabel(this.label, this.info, this._fileInputId)}
+      
+      <input 
+        type="file" 
+        id="${this._fileInputId}"
+        ?multiple=${this.multiple}
+        accept="${this.accept || ''}"
+        @change=${this._handleInputChange}
+        ?disabled=${this.disabled}
+      />
+
+      ${showDropArea ? html`
+        <div 
+          part="drop-area"
+          class="drop-area ${this.errorText ? 'error' : ''}"
+          role="button"
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this._handleClick}
+          @keydown=${this._handleKeyDown}
+          @dragover=${this._handleDragOver}
+          @dragleave=${this._handleDragLeave}
+          @drop=${this._handleDrop}
+          aria-label="Click or drag and drop to upload files"
+          aria-disabled=${this.disabled ? 'true' : 'false'}
+        >
+          <div class="drop-area-content">
+            <ds-icon name="upload" size="sm"></ds-icon>
+            <span class="drop-area-text">Drop files here or click to upload</span>
+          </div>
+        </div>
+      ` : nothing}
+
+      ${this.renderFieldMessage(this.helpText, this.errorText)}
+
+      ${this.files.length > 0 ? html`
+        <div class="files-list">
+          <ds-rich-list selectable="none">
+            ${this.files.map(f => html`
+              <ds-file-uploaded
+                filename="${f.filename}"
+                size="${f.size}"
+                progress="${f.progress}"
+                preview-url="${f.previewUrl || ''}"
+                icon="${f.icon || 'document'}"
+                ?loading="${f.loading}"
+                ?error="${f.error}"
+                error-message="${f.errorMessage}"
+                ?disabled=${this.disabled}
+                @ds-remove-file=${this._handleRemoveFile}
+              ></ds-file-uploaded>
+            `)}
+          </ds-rich-list>
+        </div>
+      ` : nothing}
+    `;
+  }
+}
+
+if (!customElements.get('ds-file-uploader')) {
+  customElements.define('ds-file-uploader', DsFileUploader);
+}

package/src/ds-file-uploader/ds-file-uploader.mdx

@@ -0,0 +1,44 @@
+import { Meta, Story, Canvas, ArgsTable, Description } from '@storybook/blocks';
+import * as DsFileUploaderStories from './ds-file-uploader.stories';
+
+<Meta of={DsFileUploaderStories} />
+
+# DsFileUploader
+
+<Description />
+
+The `ds-file-uploader` provides a user-friendly drag-and-drop target to select files from the device.
+
+## Anatomy
+It features an optional label, help/error messages, and dynamically renders the `ds-file-uploaded` items summarizing the chosen files.
+It wraps a hidden native `<input type="file">`.
+
+## Examples
+
+### Default (Single File)
+In single file mode, selecting a file replaces the dropzone with the file item itself. Removing the file will re-display the dropzone.
+<Canvas>
+  <Story of={DsFileUploaderStories.Default} />
+</Canvas>
+
+### Multiple Files
+In multiple file mode, the dropzone remains visible and stacks the uploaded file items beneath it.
+<Canvas>
+  <Story of={DsFileUploaderStories.Multiple} />
+</Canvas>
+
+### With Info Tooltip
+<Canvas>
+  <Story of={DsFileUploaderStories.WithInfoTooltip} />
+</Canvas>
+
+### Error State
+<Canvas>
+  <Story of={DsFileUploaderStories.ErrorState} />
+</Canvas>
+
+## Validation Configuration
+Use `accept`, `max-file-size`, and `max-files` attributes to constrain inputs natively. Invalid files will emit a `ds-error` event from the component without adding them to the file list.
+
+## API Reference
+<ArgsTable />

package/src/ds-file-uploader/ds-file-uploader.stories.js

@@ -0,0 +1,76 @@
+import './ds-file-uploader.js';
+import { html } from 'lit';
+
+export default {
+    title: 'Components/File Uploader',
+    component: 'ds-file-uploader',
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        info: { control: 'text' },
+        helpText: { control: 'text', name: 'help-text' },
+        errorText: { control: 'text', name: 'error-text' },
+        multiple: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        accept: { control: 'text' },
+        maxFileSize: { control: 'number', name: 'max-file-size' },
+        maxFiles: { control: 'number', name: 'max-files' }
+    },
+    parameters: {
+        actions: {
+            handles: ['ds-change', 'ds-error']
+        }
+    }
+};
+
+const Template = (args) => html`
+  <div style="max-width: 400px;">
+    <ds-file-uploader
+      label=${args.label || ''}
+      info=${args.info || ''}
+      help-text=${args.helpText || ''}
+      error-text=${args.errorText || ''}
+      ?multiple=${args.multiple}
+      ?disabled=${args.disabled}
+      accept=${args.accept || ''}
+      max-file-size=${args.maxFileSize || 0}
+      max-files=${args.maxFiles || 0}
+    ></ds-file-uploader>
+  </div>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Upload document',
+    helpText: 'Only PDF or DOC files, up to 10MB.',
+    multiple: false,
+    disabled: false
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+    ...Default.args,
+    label: 'Upload photos',
+    helpText: 'Select or drag multiple images. Max 5 files.',
+    multiple: true,
+    maxFiles: 5,
+    accept: 'image/*'
+};
+
+export const WithInfoTooltip = Template.bind({});
+WithInfoTooltip.args = {
+    ...Default.args,
+    info: 'Attachments must not contain personal identifiable information.'
+};
+
+export const ErrorState = Template.bind({});
+ErrorState.args = {
+    ...Default.args,
+    errorText: 'The selected file is too large.'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    ...Default.args,
+    disabled: true
+};

package/src/ds-file-uploader/ds-file-uploader.test.js

@@ -0,0 +1,142 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-file-uploader.js';
+
+describe('DsFileUploader', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+        vi.restoreAllMocks();
+    });
+
+    it('renders correctly with default UI', async () => {
+        container.innerHTML = '<ds-file-uploader label="Upload doc"></ds-file-uploader>';
+        const el = container.querySelector('ds-file-uploader');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(el).toBeTruthy();
+        expect(el.shadowRoot.querySelector('label').textContent).toContain('Upload doc');
+        expect(el.shadowRoot.querySelector('.drop-area')).toBeTruthy();
+        expect(el.shadowRoot.querySelector('input[type="file"]')).toBeTruthy();
+    });
+
+    it('hides drop area in single mode when file is uploaded', async () => {
+        container.innerHTML = '<ds-file-uploader></ds-file-uploader>';
+        const el = container.querySelector('ds-file-uploader');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        el._processFiles([new File([''], 'test.png', { type: 'image/png' })]);
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(el.shadowRoot.querySelector('.drop-area')).toBeNull();
+        const uploaded = el.shadowRoot.querySelectorAll('ds-file-uploaded');
+        expect(uploaded).toHaveLength(1);
+    });
+
+    it('keeps drop area in multiple mode when files are uploaded', async () => {
+        container.innerHTML = '<ds-file-uploader multiple></ds-file-uploader>';
+        const el = container.querySelector('ds-file-uploader');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        el._processFiles([new File([''], 'test.png', { type: 'image/png' })]);
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(el.shadowRoot.querySelector('.drop-area')).toBeTruthy();
+        const uploaded = el.shadowRoot.querySelectorAll('ds-file-uploaded');
+        expect(uploaded).toHaveLength(1);
+    });
+
+    it('emits ds-change event on files array update', async () => {
+        container.innerHTML = '<ds-file-uploader></ds-file-uploader>';
+        const el = container.querySelector('ds-file-uploader');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const changeSpy = vi.fn();
+        el.addEventListener('ds-change', changeSpy);
+
+        el._processFiles([new File(['content'], 'test.pdf', { type: 'application/pdf' })]);
+
+        expect(changeSpy).toHaveBeenCalledOnce();
+        const detail = changeSpy.mock.calls[0][0].detail;
+        expect(detail.files).toHaveLength(1);
+        expect(detail.files[0].filename).toBe('test.pdf');
+    });
+
+    it('validates maxFileSize and emits error', async () => {
+        container.innerHTML = '<ds-file-uploader max-file-size="100"></ds-file-uploader>';
+        const el = container.querySelector('ds-file-uploader');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const errorSpy = vi.fn();
+        el.addEventListener('ds-error', errorSpy);
+
+        // Create a file > 100 bytes
+        const bigFile = new File(['a'.repeat(200)], 'big.txt', { type: 'text/plain' });
+        el._processFiles([bigFile]);
+
+        expect(errorSpy).toHaveBeenCalledOnce();
+        const detail = errorSpy.mock.calls[0][0].detail;
+        expect(detail.type).toBe('max-file-size');
+        expect(el.files).toHaveLength(0); // Should not be added
+    });
+
+    it('removes file from list on ds-remove-file event', async () => {
+        container.innerHTML = '<ds-file-uploader></ds-file-uploader>';
+        const el = container.querySelector('ds-file-uploader');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        el._processFiles([new File([''], 'todelete.png', { type: 'image/png' })]);
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(el.files).toHaveLength(1);
+
+        const uploadedEl = el.shadowRoot.querySelector('ds-file-uploaded');
+        uploadedEl.dispatchEvent(new CustomEvent('ds-remove-file', {
+            bubbles: true,
+            composed: true,
+            detail: { filename: 'todelete.png' }
+        }));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(el.files).toHaveLength(0);
+    });
+
+    it('clears all files programmatically', async () => {
+        container.innerHTML = '<ds-file-uploader></ds-file-uploader>';
+        const el = container.querySelector('ds-file-uploader');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        el._processFiles([new File([''], 'file1.pdf')]);
+        expect(el.files).toHaveLength(1);
+
+        el.clear();
+        expect(el.files).toHaveLength(0);
+    });
+
+    it('rejects duplicate files and emits error', async () => {
+        container.innerHTML = '<ds-file-uploader multiple></ds-file-uploader>';
+        const el = container.querySelector('ds-file-uploader');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const errorSpy = vi.fn();
+        el.addEventListener('ds-error', errorSpy);
+
+        const file = new File(['content'], 'duplicate.txt', { type: 'text/plain' });
+
+        // First upload should succeed
+        el._processFiles([file]);
+        expect(el.files).toHaveLength(1);
+
+        // Second upload of the same file should fail
+        el._processFiles([file]);
+
+        expect(errorSpy).toHaveBeenCalledOnce();
+        const detail = errorSpy.mock.calls[0][0].detail;
+        expect(detail.type).toBe('duplicate-file');
+        expect(el.files).toHaveLength(1); // Should still only have 1 file
+    });
+});