valtech-components 2.0.794 → 2.0.795

package/src/lib/components/organisms/avatar-upload/avatar-upload.component.ts

@@ -0,0 +1,303 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, ElementRef, EventEmitter, inject, input, Output, signal, ViewChild } from '@angular/core';
+import { IonIcon, IonModal, IonSpinner } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { cameraOutline } from 'ionicons/icons';
+import { firstValueFrom } from 'rxjs';
+import { AuthService } from '../../../services/auth';
+import { StorageService } from '../../../services/firebase';
+import { I18nService } from '../../../services/i18n';
+import { ImageService } from '../../../services/image';
+import { ImageCropComponent } from '../../molecules/image-crop';
+import { AVATAR_UPLOAD_DEFAULTS, AvatarUploadError, AvatarUploadMetadata, AvatarUploadResult } from './types';
+
+addIcons({ cameraOutline });
+
+/**
+ * AvatarUploadComponent
+ *
+ * A complete avatar upload solution with:
+ * - Image selection from device
+ * - Crop modal with round preview
+ * - Automatic compression and thumbnail generation
+ * - Upload to Firebase Storage
+ * - Backend sync via AuthService
+ *
+ * @example Basic usage
+ * ```html
+ * <val-avatar-upload
+ *   [props]="{
+ *     currentUrl: user()?.avatarUrl,
+ *     initials: 'JD',
+ *     size: 120
+ *   }"
+ *   (uploaded)="onAvatarUploaded($event)"
+ *   (error)="onError($event)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'val-avatar-upload',
+  standalone: true,
+  imports: [CommonModule, IonIcon, IonSpinner, IonModal, ImageCropComponent],
+  template: `
+    <div class="avatar-upload" [style.--avatar-size.px]="config().size" [class.avatar-upload--loading]="loading()">
+      <div class="avatar-container">
+        <!-- Avatar Image or Initials -->
+        @if (displayUrl()) {
+          <img class="avatar-image" [src]="displayUrl()" alt="Avatar" (error)="onImageError()" />
+        } @else {
+          <div class="avatar-initials" [style.background-color]="config().backgroundColor">
+            {{ config().initials || '?' }}
+          </div>
+        }
+
+        <!-- Edit Button -->
+        @if (config().editable && !loading()) {
+          <button class="edit-button" type="button" (click)="openFilePicker()" [attr.aria-label]="editButtonLabel()">
+            <ion-icon name="camera-outline"></ion-icon>
+          </button>
+        }
+
+        <!-- Loading Overlay -->
+        @if (loading()) {
+          <div class="loading-overlay">
+            <ion-spinner name="crescent"></ion-spinner>
+          </div>
+        }
+      </div>
+
+      <!-- Hidden File Input -->
+      <input #fileInput type="file" accept="image/jpeg,image/png,image/webp" (change)="onFileSelected($event)" hidden />
+
+      <!-- Crop Modal -->
+      <ion-modal
+        [isOpen]="showCropModal()"
+        (didDismiss)="onCropCancel()"
+        [breakpoints]="[0, 1]"
+        [initialBreakpoint]="1"
+      >
+        <ng-template>
+          @if (selectedFile()) {
+            <val-image-crop
+              [image]="selectedFile()!"
+              [aspectRatio]="1"
+              [roundCropper]="true"
+              [i18nNamespace]="config().i18nNamespace"
+              (cropComplete)="onCropComplete($event)"
+              (cancel)="onCropCancel()"
+              (loadFailed)="onCropLoadFailed()"
+            />
+          }
+        </ng-template>
+      </ion-modal>
+    </div>
+  `,
+  styleUrls: ['./avatar-upload.component.scss'],
+})
+export class AvatarUploadComponent {
+  private imageService = inject(ImageService);
+  private storageService = inject(StorageService);
+  private authService = inject(AuthService);
+  private i18n = inject(I18nService);
+
+  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
+
+  /** Component configuration */
+  readonly props = input<AvatarUploadMetadata>({});
+
+  /** Emitted after successful upload and backend sync */
+  @Output() uploaded = new EventEmitter<AvatarUploadResult>();
+
+  /** Emitted on any error during the process */
+  @Output() error = new EventEmitter<AvatarUploadError>();
+
+  /** Emitted when upload starts */
+  @Output() uploadStart = new EventEmitter<void>();
+
+  // Internal state
+  protected loading = signal(false);
+  protected showCropModal = signal(false);
+  protected selectedFile = signal<File | null>(null);
+  protected previewUrl = signal<string | null>(null);
+  protected imageLoadError = signal(false);
+
+  /** Merged config with defaults */
+  protected config = computed(() => ({
+    ...AVATAR_UPLOAD_DEFAULTS,
+    ...this.props(),
+  }));
+
+  /** URL to display (preview takes priority over current) */
+  protected displayUrl = computed(() => {
+    if (this.imageLoadError()) return null;
+    return this.previewUrl() || this.config().currentUrl || null;
+  });
+
+  /** Aria label for edit button */
+  protected editButtonLabel = computed(() => {
+    this.i18n.lang();
+    return this.i18n.t('changePhoto', this.config().i18nNamespace) || 'Cambiar foto';
+  });
+
+  /** Open file picker dialog */
+  openFilePicker(): void {
+    this.fileInput.nativeElement.click();
+  }
+
+  /** Handle file selection */
+  onFileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+
+    if (!file) return;
+
+    // Reset input for same file selection
+    input.value = '';
+
+    // Validate file
+    const validation = this.imageService.validate(file, {
+      maxSize: this.config().maxFileSize,
+      allowedTypes: ['image/jpeg', 'image/png', 'image/webp'],
+    });
+
+    if (!validation.valid) {
+      this.emitError(validation.error as AvatarUploadError['type'], validation.message!);
+      return;
+    }
+
+    // Open crop modal
+    this.selectedFile.set(file);
+    this.showCropModal.set(true);
+  }
+
+  /** Handle crop completion */
+  async onCropComplete(croppedBlob: Blob): Promise<void> {
+    this.showCropModal.set(false);
+    this.selectedFile.set(null);
+
+    await this.processAndUpload(croppedBlob);
+  }
+
+  /** Handle crop cancel */
+  onCropCancel(): void {
+    this.showCropModal.set(false);
+    this.selectedFile.set(null);
+  }
+
+  /** Handle crop load failure */
+  onCropLoadFailed(): void {
+    this.showCropModal.set(false);
+    this.selectedFile.set(null);
+    this.emitError(
+      'invalidType',
+      this.i18n.t('loadFailed', this.config().i18nNamespace) || 'No se pudo cargar la imagen'
+    );
+  }
+
+  /** Handle image load error */
+  onImageError(): void {
+    this.imageLoadError.set(true);
+  }
+
+  /** Timeout for upload operations (30 seconds) */
+  private static readonly UPLOAD_TIMEOUT_MS = 30000;
+
+  /** Process cropped image and upload */
+  private async processAndUpload(croppedBlob: Blob): Promise<void> {
+    this.loading.set(true);
+    this.uploadStart.emit();
+
+    // Timeout promise to prevent infinite loading
+    const uploadTimeout = new Promise<never>((_, reject) =>
+      setTimeout(() => reject(new Error('Upload timeout')), AvatarUploadComponent.UPLOAD_TIMEOUT_MS)
+    );
+
+    try {
+      const config = this.config();
+
+      // 1. Compress image
+      const compressed = await this.imageService.compress(croppedBlob, {
+        maxWidth: config.maxWidth,
+        maxHeight: config.maxWidth,
+        quality: config.compressQuality,
+      });
+
+      // 2. Generate thumbnail
+      const thumbnail = await this.imageService.thumbnail(compressed.blob, config.thumbnailSize);
+
+      // 3. Set preview immediately
+      this.previewUrl.set(compressed.dataUrl);
+      this.imageLoadError.set(false);
+
+      // 4. Get user ID for storage path
+      const userId = this.authService.user()?.userId;
+      if (!userId) {
+        throw new Error('User not authenticated');
+      }
+
+      // 5. Upload to Firebase Storage with predictable paths
+      // Path: users/{userId}/avatar.jpg - allows any app to construct URL with just userId
+      // skipPrefix: true - bypasses appId prefix for shared/cross-app paths
+      const avatarPath = `users/${userId}/avatar.jpg`;
+      const thumbPath = `users/${userId}/thumb.jpg`;
+      const uploadMetadata = { skipPrefix: true, contentType: 'image/jpeg' };
+
+      // Race against timeout to prevent infinite loading
+      const [avatarResult, thumbResult] = await Promise.race([
+        Promise.all([
+          this.storageService.uploadAndGetUrl(avatarPath, compressed.blob, uploadMetadata),
+          this.storageService.uploadAndGetUrl(thumbPath, thumbnail.blob, uploadMetadata),
+        ]),
+        uploadTimeout,
+      ]);
+
+      // 6. Update backend with URLs
+      await firstValueFrom(
+        this.authService.updateAvatar({
+          avatarUrl: avatarResult.downloadUrl,
+          avatarThumbnail: thumbResult.downloadUrl,
+        })
+      );
+
+      // 7. Update preview with cache-busting to force refresh
+      const cacheBuster = `?t=${Date.now()}`;
+      this.previewUrl.set(avatarResult.downloadUrl + cacheBuster);
+
+      // 8. Emit success
+      const result: AvatarUploadResult = {
+        avatarUrl: avatarResult.downloadUrl,
+        thumbnailUrl: thumbResult.downloadUrl,
+      };
+
+      this.uploaded.emit(result);
+    } catch (err) {
+      console.error('[AvatarUpload] processAndUpload failed:', err);
+      // Revert preview on error
+      this.previewUrl.set(null);
+
+      // Determine error message based on error type
+      let message: string;
+      if (err instanceof Error) {
+        if (err.message === 'Upload timeout') {
+          message =
+            this.i18n.t('uploadTimeout', this.config().i18nNamespace) ||
+            'La subida tardó demasiado. Verifica tu conexión.';
+        } else {
+          message = err.message;
+        }
+      } else {
+        message = this.i18n.t('uploadError', this.config().i18nNamespace) || 'Error al subir la imagen';
+      }
+
+      this.emitError('uploadFailed', message, err);
+    } finally {
+      this.loading.set(false);
+    }
+  }
+
+  /** Emit error event */
+  private emitError(type: AvatarUploadError['type'], message: string, originalError?: unknown): void {
+    this.error.emit({ type, message, originalError });
+  }
+}

package/src/lib/components/organisms/avatar-upload/avatar-upload.stories.ts

@@ -0,0 +1,282 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+import { signal } from '@angular/core';
+import { of } from 'rxjs';
+
+import { AvatarUploadComponent } from './avatar-upload.component';
+import { AuthService } from '../../../services/auth';
+import { StorageService } from '../../../services/firebase';
+import { I18nService } from '../../../services/i18n';
+import { ImageService } from '../../../services/image';
+
+// ---------------------------------------------------------------------------
+// Mock factories
+// ---------------------------------------------------------------------------
+
+function createMockAuthService() {
+  const userSignal = signal<{ userId: string } | null>({ userId: 'story-user-123' });
+  return {
+    user: userSignal.asReadonly(),
+    updateAvatar: (_payload: unknown) => of({ avatarUrl: '', avatarThumbnail: '' }),
+  };
+}
+
+function createMockStorageService() {
+  return {
+    uploadAndGetUrl: (_path: string, _blob: Blob, _meta?: unknown) =>
+      Promise.resolve({ downloadUrl: 'https://placehold.co/200x200/6366f1/ffffff?text=Avatar' }),
+  };
+}
+
+function createMockI18nService() {
+  const langSignal = signal<'es' | 'en'>('es');
+  return {
+    lang: langSignal.asReadonly(),
+    t: (key: string) => {
+      const map: Record<string, string> = {
+        changePhoto: 'Cambiar foto',
+        uploadError: 'Error al subir la imagen',
+        uploadTimeout: 'La subida tardó demasiado',
+        loadFailed: 'No se pudo cargar la imagen',
+      };
+      return map[key] ?? key;
+    },
+  };
+}
+
+function createMockImageService() {
+  return {
+    validate: (_file: File, _opts?: unknown) => ({ valid: true }),
+    compress: (blob: Blob, _opts?: unknown) =>
+      Promise.resolve({ blob, dataUrl: 'https://placehold.co/200x200/6366f1/ffffff?text=Avatar' }),
+    thumbnail: (blob: Blob, _size?: number) => Promise.resolve({ blob }),
+  };
+}
+
+const withMockedServices = applicationConfig({
+  providers: [
+    { provide: AuthService, useFactory: createMockAuthService },
+    { provide: StorageService, useFactory: createMockStorageService },
+    { provide: I18nService, useFactory: createMockI18nService },
+    { provide: ImageService, useFactory: createMockImageService },
+  ],
+});
+
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+
+const meta: Meta<AvatarUploadComponent> = {
+  title: 'Organisms/AvatarUpload',
+  component: AvatarUploadComponent,
+  decorators: [
+    withMockedServices,
+    moduleMetadata({
+      imports: [AvatarUploadComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'AvatarUpload configuration object (AvatarUploadMetadata)',
+      control: 'object',
+    },
+    uploaded: {
+      action: 'uploaded',
+      description: 'Emitted with { avatarUrl, thumbnailUrl } after a successful upload',
+    },
+    error: {
+      action: 'error',
+      description: 'Emitted with { type, message } when any step fails',
+    },
+    uploadStart: {
+      action: 'uploadStart',
+      description: 'Emitted when the upload pipeline begins',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-avatar-upload
+
+A complete avatar management component that handles the full upload pipeline:
+file selection → crop modal → compression + thumbnail generation →
+Firebase Storage upload → backend sync via AuthService.
+
+### Usage
+
+\`\`\`html
+<val-avatar-upload
+  [props]="{
+    currentUrl: user()?.avatarUrl,
+    initials: 'JD',
+    size: 120
+  }"
+  (uploaded)="onAvatarUploaded($event)"
+  (error)="onUploadError($event)"
+/>
+\`\`\`
+
+### Services required
+
+The component injects these services — they must be provided by the host app:
+
+| Service | Purpose |
+|---------|---------|
+| \`AuthService\` | Reads current user ID, calls \`updateAvatar()\` |
+| \`StorageService\` | Uploads blobs to Firebase Storage |
+| \`ImageService\` | Compresses and generates thumbnails |
+| \`I18nService\` | Translates labels |
+
+### Features
+
+- Circular crop modal with 1:1 aspect ratio
+- JPEG compression (configurable quality and max-width)
+- Separate thumbnail path (\`users/{userId}/thumb.jpg\`)
+- 30-second upload timeout with error recovery
+- Fallback initials avatar with configurable background
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<AvatarUploadComponent>;
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+/**
+ * No existing avatar — shows the initials fallback.
+ */
+export const Default: Story = {
+  args: {
+    props: {
+      initials: 'JD',
+      size: 100,
+      editable: true,
+    },
+  },
+};
+
+/**
+ * With a current avatar URL already set — shows the image.
+ */
+export const WithExistingAvatar: Story = {
+  args: {
+    props: {
+      currentUrl: 'https://i.pravatar.cc/200?img=12',
+      initials: 'MR',
+      size: 120,
+      editable: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When `currentUrl` is provided the avatar image is displayed. The camera button still allows replacement.',
+      },
+    },
+  },
+};
+
+/**
+ * Read-only mode — edit button is hidden.
+ */
+export const ReadOnly: Story = {
+  args: {
+    props: {
+      currentUrl: 'https://i.pravatar.cc/200?img=7',
+      initials: 'AB',
+      size: 100,
+      editable: false,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Setting `editable: false` hides the camera button. Useful for profile view pages.',
+      },
+    },
+  },
+};
+
+/**
+ * Large avatar with custom background color for the initials fallback.
+ */
+export const LargeWithCustomColor: Story = {
+  args: {
+    props: {
+      initials: 'VS',
+      size: 160,
+      editable: true,
+      backgroundColor: '#0ea5e9',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Larger avatar (160 px) with a custom sky-blue background for the initials placeholder.',
+      },
+    },
+  },
+};
+
+/**
+ * Side-by-side showcase of the main visual states.
+ */
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap; padding: 24px;">
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+          <val-avatar-upload [props]="{ initials: 'JD', size: 100, editable: true }"></val-avatar-upload>
+          <span style="font-family: system-ui; font-size: 12px; color: #888;">Initials fallback</span>
+        </div>
+
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+          <val-avatar-upload [props]="{
+            currentUrl: 'https://i.pravatar.cc/200?img=5',
+            initials: 'MR',
+            size: 100,
+            editable: true
+          }"></val-avatar-upload>
+          <span style="font-family: system-ui; font-size: 12px; color: #888;">With photo</span>
+        </div>
+
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+          <val-avatar-upload [props]="{
+            currentUrl: 'https://i.pravatar.cc/200?img=9',
+            initials: 'AB',
+            size: 100,
+            editable: false
+          }"></val-avatar-upload>
+          <span style="font-family: system-ui; font-size: 12px; color: #888;">Read-only</span>
+        </div>
+
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+          <val-avatar-upload [props]="{
+            initials: 'VS',
+            size: 100,
+            editable: true,
+            backgroundColor: '#0ea5e9'
+          }"></val-avatar-upload>
+          <span style="font-family: system-ui; font-size: 12px; color: #888;">Custom color</span>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'All visual states side by side: initials, with photo, read-only, custom background.',
+      },
+    },
+  },
+};

package/src/lib/components/organisms/avatar-upload/index.ts

@@ -0,0 +1,2 @@
+export * from './avatar-upload.component';
+export * from './types';

package/src/lib/components/organisms/avatar-upload/types.ts

@@ -0,0 +1,71 @@
+/**
+ * Configuration for AvatarUploadComponent
+ */
+export interface AvatarUploadMetadata {
+  /** Current avatar URL */
+  currentUrl?: string;
+  /** Initials to show when no avatar (e.g., "JD" for John Doe) */
+  initials?: string;
+  /** Background color for initials avatar */
+  backgroundColor?: string;
+  /** Avatar size in pixels (default: 100) */
+  size?: number;
+  /** Show edit button (default: true) */
+  editable?: boolean;
+  /** Storage path prefix without userId (default: 'avatars') */
+  storagePath?: string;
+  /** i18n namespace for labels (default: 'AvatarUpload') */
+  i18nNamespace?: string;
+  /** Max file size in bytes (default: 10MB) */
+  maxFileSize?: number;
+  /** Quality for compressed image 0-1 (default: 0.8) */
+  compressQuality?: number;
+  /** Max width for avatar (default: 800) */
+  maxWidth?: number;
+  /** Thumbnail size (default: 150) */
+  thumbnailSize?: number;
+}
+
+/**
+ * Result emitted after successful upload
+ */
+export interface AvatarUploadResult {
+  /** Full-size avatar URL */
+  avatarUrl: string;
+  /** Thumbnail URL */
+  thumbnailUrl: string;
+}
+
+/**
+ * Error types that can occur during upload
+ */
+export type AvatarUploadErrorType =
+  | 'invalidType'
+  | 'fileTooLarge'
+  | 'uploadFailed'
+  | 'backendFailed'
+  | 'cancelled';
+
+/**
+ * Error object emitted on failure
+ */
+export interface AvatarUploadError {
+  type: AvatarUploadErrorType;
+  message: string;
+  originalError?: unknown;
+}
+
+/**
+ * Default values
+ */
+export const AVATAR_UPLOAD_DEFAULTS = {
+  size: 100,
+  editable: true,
+  storagePath: 'avatars',
+  i18nNamespace: 'AvatarUpload',
+  maxFileSize: 10 * 1024 * 1024, // 10MB
+  compressQuality: 0.8,
+  maxWidth: 800,
+  thumbnailSize: 150,
+  backgroundColor: '#6366f1', // Indigo
+};

package/src/lib/components/organisms/banner/banner.component.scss

@@ -0,0 +1,51 @@
+@import '../../styles/mixins.scss';
+
+.content-container {
+  display: flex;
+  justify-content: space-between;
+
+  &.center {
+    flex-direction: column;
+  }
+
+  &.column {
+    flex-direction: row;
+  }
+
+  &.row {
+    flex-direction: column;
+  }
+
+  &.middle {
+    align-items: center;
+  }
+
+  &.top {
+    align-items: flex-start;
+  }
+
+  &.bottom {
+    align-items: flex-end;
+  }
+
+  &.hybrid {
+    flex-direction: column;
+    align-items: flex-start;
+
+    @include media-medium {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+}
+
+.buttons-container {
+  align-items: center;
+  display: flex;
+  margin-top: pxToRem(16);
+  margin-bottom: pxToRem(1);
+
+  &.column {
+    margin-top: pxToRem(0);
+  }
+}