@dropi/ui-components 1.0.0

package/src/components-source/dropi-image-overlay/dropi-image-overlay.component.spec.ts

@@ -0,0 +1,145 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiImageOverlayComponent } from './dropi-image-overlay.component';
+import { IconComponent } from '../icon/icon.component';
+import { ImageOverlayService } from '@app/services/ui/image-overlay.service';
+import { SettingsService } from '@app/services/setting.service';
+import { BehaviorSubject } from 'rxjs';
+import { DomSanitizer } from '@angular/platform-browser';
+import { mockDomSanitizer } from '../../../test-utils/jest-mocks';
+
+// Mock ImageOverlayService
+const mockImageOverlayService = {
+  imageUrls$: new BehaviorSubject<string[]>([]),
+  selectedImageIndex$: new BehaviorSubject<number>(0),
+  closeOverlay: jest.fn(),
+  setSelectedImageIndex: jest.fn(),
+};
+
+// Mock SettingsService
+const mockSettingsService = {
+  getBrand: jest.fn().mockReturnValue({ name: 'dropi' }),
+};
+
+describe('DropiImageOverlayComponent', () => {
+  let component: DropiImageOverlayComponent;
+  let fixture: ComponentFixture<DropiImageOverlayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiImageOverlayComponent, IconComponent],
+      providers: [
+        { provide: ImageOverlayService, useValue: mockImageOverlayService },
+        { provide: SettingsService, useValue: mockSettingsService },
+        { provide: DomSanitizer, useValue: mockDomSanitizer },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiImageOverlayComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      fixture.detectChanges();
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.imageUrls).toEqual([]);
+      expect(component.selectedImageIndex).toBe(0);
+      expect(component.imageError).toBe(false);
+    });
+  });
+
+  describe('ngOnInit', () => {
+    it('should subscribe to imageUrls$', () => {
+      const testUrls = ['image1.jpg', 'image2.jpg'];
+      mockImageOverlayService.imageUrls$.next(testUrls);
+      fixture.detectChanges();
+      expect(component.imageUrls).toEqual(testUrls);
+    });
+
+    it('should subscribe to selectedImageIndex$', () => {
+      mockImageOverlayService.selectedImageIndex$.next(2);
+      fixture.detectChanges();
+      expect(component.selectedImageIndex).toBe(2);
+    });
+
+    it('should set isDropi to true for dropi brand', () => {
+      mockSettingsService.getBrand.mockReturnValue({ name: 'dropi' });
+      fixture.detectChanges();
+      expect(component.isDropi).toBe(true);
+    });
+
+    it('should set isDropi to false for non-dropi brand', () => {
+      mockSettingsService.getBrand.mockReturnValue({ name: 'other' });
+      fixture.detectChanges();
+      expect(component.isDropi).toBe(false);
+    });
+
+    it('should set correct fallbackUrl for dropi brand', () => {
+      mockSettingsService.getBrand.mockReturnValue({ name: 'dropi' });
+      fixture.detectChanges();
+      expect(component.fallbackUrl).toBe('./assets/utils/no-image.jpg');
+    });
+
+    it('should set correct fallbackUrl for non-dropi brand', () => {
+      mockSettingsService.getBrand.mockReturnValue({ name: 'other' });
+      fixture.detectChanges();
+      expect(component.fallbackUrl).toBe('./assets/utils/wb-no-image.jpg');
+    });
+  });
+
+  describe('Método closeOverlay', () => {
+    it('should call imageOverlayService.closeOverlay', () => {
+      fixture.detectChanges();
+      component.closeOverlay();
+      expect(mockImageOverlayService.closeOverlay).toHaveBeenCalled();
+    });
+  });
+
+  describe('Método nextImage', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should not increment index when at last image', () => {
+      component.imageUrls = ['img1.jpg', 'img2.jpg'];
+      component.selectedImageIndex = 1;
+      const event = { stopPropagation: jest.fn() } as unknown as MouseEvent;
+      component.nextImage(event);
+      expect(event.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should stop event propagation', () => {
+      component.imageUrls = ['img1.jpg', 'img2.jpg'];
+      component.selectedImageIndex = 0;
+      const event = { stopPropagation: jest.fn() } as unknown as MouseEvent;
+      component.nextImage(event);
+      expect(event.stopPropagation).toHaveBeenCalled();
+    });
+  });
+
+  describe('Método previousImage', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should stop event propagation', () => {
+      component.imageUrls = ['img1.jpg', 'img2.jpg'];
+      component.selectedImageIndex = 1;
+      const event = { stopPropagation: jest.fn() } as unknown as MouseEvent;
+      component.previousImage(event);
+      expect(event.stopPropagation).toHaveBeenCalled();
+    });
+  });
+
+  describe('Lifecycle hooks', () => {
+    it('should clean up subscriptions on ngOnDestroy', () => {
+      fixture.detectChanges();
+      component.ngOnDestroy();
+      // No error should be thrown
+      expect(true).toBe(true);
+    });
+  });
+});

package/src/components-source/dropi-image-overlay/dropi-image-overlay.component.ts

@@ -0,0 +1,76 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ImageOverlayService } from '@app/services/ui/image-overlay.service';
+import { Subscription } from 'rxjs';
+import { IconComponent } from '../icon/icon.component';
+import { SettingsService } from '@app/services/setting.service';
+
+@Component({
+  selector: 'dropi-image-overlay',
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  templateUrl: './dropi-image-overlay.component.html',
+  styleUrls: ['./dropi-image-overlay.component.scss']
+})
+export class DropiImageOverlayComponent implements OnInit, OnDestroy {
+  imageUrls: string[] = [];
+  selectedImageIndex: number = 0;
+  imageError: boolean = false;
+  isDropi: boolean = false;
+  fallbackUrl= '';
+
+  private readonly subscriptions = new Subscription();
+  constructor(private readonly imageOverlayService: ImageOverlayService,  public settingsService: SettingsService) { }
+
+  ngOnInit() {
+    this.subscriptions.add(
+      this.imageOverlayService.imageUrls$.subscribe(imageUrls => {
+        this.imageUrls = imageUrls;
+        
+      })
+    );
+
+    this.subscriptions.add(
+      this.imageOverlayService.selectedImageIndex$.subscribe(selectedImageIndex => {
+        this.selectedImageIndex = selectedImageIndex;
+      })
+    );
+
+    this.isDropi = this.settingsService.getBrand()?.name?.toLowerCase() === 'dropi';
+    this.fallbackUrl  = this.isDropi ? './assets/utils/no-image.jpg' : './assets/utils/wb-no-image.jpg';
+  }
+
+  closeOverlay() {
+    this.imageOverlayService.closeOverlay();
+  }
+  
+  nextImage(event: MouseEvent) {
+    event.stopPropagation();
+
+    if (this.selectedImageIndex === this.imageUrls.length - 1) {
+      this.imageOverlayService.setSelectedImageIndex(0);
+      return;
+    }
+    
+    this.imageOverlayService.setSelectedImageIndex(this.selectedImageIndex + 1);
+  }
+
+  previousImage(event: MouseEvent) {
+    event.stopPropagation();
+
+    if (this.selectedImageIndex === 0) {
+      this.imageOverlayService.setSelectedImageIndex(this.imageUrls.length - 1);
+      return
+    }
+    
+    this.imageOverlayService.setSelectedImageIndex(this.selectedImageIndex - 1);
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+  selectImage(index: number) {
+  this.imageOverlayService.setSelectedImageIndex(index);
+}
+
+}

package/src/components-source/dropi-image-overlay/dropi-image-overlay.stories.ts

@@ -0,0 +1,267 @@
+/**
+ * @fileoverview Image Overlay component stories for Storybook
+ * @description A fullscreen image preview overlay with navigation support
+ */
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { DropiImageOverlayComponent } from './dropi-image-overlay.component';
+import { ImageOverlayService } from '@app/services/ui/image-overlay.service';
+import { BehaviorSubject } from 'rxjs';
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+/* =========================
+ * Mocks / Utils
+ * ========================= */
+const createOverlayServiceMock = (images: string[], selectedIndex$: BehaviorSubject<number>) => ({
+  imageUrls$: new BehaviorSubject(images),
+  selectedImageIndex$: selectedIndex$,
+  closeOverlay: () => console.log('Overlay closed'),
+  setSelectedImageIndex: (index: number) => selectedIndex$.next(index),
+});
+
+/** Mock with showOverlay for visual demo (DocsDemo) */
+const createOverlayServiceMockWithShow = (
+  images: string[],
+  selectedIndex$: BehaviorSubject<number>,
+) => {
+  const imageUrls$ = new BehaviorSubject<string[]>(images);
+  return {
+    imageUrls$,
+    selectedImageIndex$: selectedIndex$,
+    closeOverlay: () => {
+      imageUrls$.next([]);
+      selectedIndex$.next(0);
+    },
+    setSelectedImageIndex: (index: number) => selectedIndex$.next(index),
+    showOverlay: (imgs: string[], startIndex: number = 0) => {
+      imageUrls$.next(imgs);
+      selectedIndex$.next(startIndex);
+    },
+  };
+};
+
+const DEMO_IMAGES = [
+  'https://d9kz1bfy19fz0.cloudfront.net/cas/67c54054197a5d43808b9fb6/Wed Jun 04 2025 16:48:40 GMT-0500/Caricaturas6.jpg',
+  'https://d9kz1bfy19fz0.cloudfront.net/cas/67c54054197a5d43808b9fb6/Wed Jun 04 2025 16:48:40 GMT-0500/Caricaturas4.jpg',
+  'https://d9kz1bfy19fz0.cloudfront.net/cas/67c54054197a5d43808b9fb6/Wed Jun 04 2025 16:48:40 GMT-0500/Caricaturas5.jpg',
+];
+
+/* =========================
+ * Meta
+ * ========================= */
+const meta: Meta<DropiImageOverlayComponent> = {
+  title: 'UI Dropi/Image Overlay',
+  component: DropiImageOverlayComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+# Image Overlay Component
+
+A fullscreen overlay component for previewing one or multiple images.
+
+## Key Features
+- **Fullscreen display**: Covers entire screen with semi-transparent background
+- **Image navigation**: Navigate between multiple images with lateral arrows
+- **Close options**: Click outside image or on close button (X)
+- **Service-driven**: Works through ImageOverlayService for state management
+
+## Usage
+
+This component is activated via ImageOverlayService which exposes:
+
+- \`imageOverlayService.showOverlay(images: string[], startIndex: number = 0);\`
+- \`imageOverlayService.closeOverlay();\`
+
+Example usage from any part of your app:
+
+\`\`\`typescript
+constructor(private imageOverlayService: ImageOverlayService) {}
+imageOverlayService.showOverlay(['img1.jpg', 'img2.jpg']);
+\`\`\`
+        `,
+      },
+    },
+  },
+  argTypes: {
+    selectedImageIndex: {
+      control: { type: 'number', min: 0 },
+      description: 'Índice de la imagen actual (controlado en Storybook)',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<DropiImageOverlayComponent>;
+
+/* =========================
+ * Stories existentes
+ * ========================= */
+const selectedIndexMultiple = new BehaviorSubject<number>(0);
+export const MultipleImages: Story = {
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: ImageOverlayService,
+          useFactory: () =>
+            createOverlayServiceMock(
+              [
+                'https://d9kz1bfy19fz0.cloudfront.net/cas/67c54054197a5d43808b9fb6/Wed Jun 04 2025 16:48:40 GMT-0500/Caricaturas6.jpg',
+                'https://d9kz1bfy19fz0.cloudfront.net/cas/67c54054197a5d43808b9fb6/Wed Jun 04 2025 16:48:40 GMT-0500/Caricaturas4.jpg',
+                'https://d9kz1bfy19fz0.cloudfront.net/cas/67c54054197a5d43808b9fb6/Wed Jun 04 2025 16:48:40 GMT-0500/Caricaturas5.jpg',
+              ],
+              selectedIndexMultiple,
+            ),
+        },
+      ],
+    }),
+  ],
+  args: {
+    selectedImageIndex: 0,
+  },
+  render: (args) => {
+    selectedIndexMultiple.next(args.selectedImageIndex ?? 0);
+    return { component: DropiImageOverlayComponent, props: args };
+  },
+};
+
+const selectedIndexSingle = new BehaviorSubject<number>(0);
+export const SingleImage: Story = {
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: ImageOverlayService,
+          useFactory: () =>
+            createOverlayServiceMock(
+              [
+                'https://d9kz1bfy19fz0.cloudfront.net/cas/67c54054197a5d43808b9fb6/Wed Jun 04 2025 16:48:40 GMT-0500/Caricaturas6.jpg',
+              ],
+              selectedIndexSingle,
+            ),
+        },
+      ],
+    }),
+  ],
+  args: {
+    selectedImageIndex: 0,
+  },
+  render: (args) => {
+    selectedIndexSingle.next(0);
+    return { component: DropiImageOverlayComponent, props: args };
+  },
+};
+
+/* =========================
+ * Demo visual (DocsDemo) - con host standalone
+ * ========================= */
+
+/** Host standalone que inyecta el servicio y muestra una galería de thumbnails */
+@Component({
+  standalone: true,
+  selector: 'docs-demo-host',
+  imports: [CommonModule, DropiImageOverlayComponent],
+  template: `
+    <div style="max-width: 920px;">
+      <h3 style="font-family: sans-serif; margin: 0 0 12px;">Galería de ejemplo</h3>
+      <p style="font-family: sans-serif; color: #6b7280; margin: 0 0 16px;">
+        Click en una imagen para abrir el overlay.
+      </p>
+
+      <div class="grid">
+        <button class="thumb" *ngFor="let src of images; let i = index" (click)="open(i)">
+          <img [src]="src" alt="thumb {{ i + 1 }}" />
+        </button>
+      </div>
+
+      <dropi-image-overlay></dropi-image-overlay>
+    </div>
+  `,
+  styles: [
+    `
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+      }
+      .thumb {
+        border: none;
+        padding: 0;
+        background: transparent;
+        cursor: pointer;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow:
+          0 1px 3px rgba(0, 0, 0, 0.08),
+          0 1px 2px rgba(0, 0, 0, 0.06);
+        transition:
+          transform 0.12s ease,
+          box-shadow 0.12s ease;
+      }
+      .thumb:hover {
+        transform: translateY(-1px);
+        box-shadow:
+          0 6px 14px rgba(0, 0, 0, 0.1),
+          0 4px 6px rgba(0, 0, 0, 0.08);
+      }
+      .thumb img {
+        width: 100%;
+        height: 180px;
+        object-fit: cover;
+        display: block;
+      }
+      @media (max-width: 640px) {
+        .thumb img {
+          height: 120px;
+        }
+        .grid {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+    `,
+  ],
+})
+class DocsDemoHostComponent {
+  images = DEMO_IMAGES;
+  constructor(private readonly imageOverlayService: ImageOverlayService) {}
+  open(index: number) {
+    this.imageOverlayService.showOverlay(this.images, index);
+  }
+}
+
+const docsSelectedIndex$ = new BehaviorSubject<number>(0);
+
+/** Story: demo visual con thumbnails que abre el overlay */
+export const DocsDemo: StoryObj = {
+  name: 'Demo: Galería interactiva',
+  decorators: [
+    moduleMetadata({
+      // 👇 Importamos el host standalone para poder usarlo en el template
+      imports: [DocsDemoHostComponent],
+      providers: [
+        {
+          provide: ImageOverlayService,
+          useFactory: () => createOverlayServiceMockWithShow(DEMO_IMAGES, docsSelectedIndex$),
+        },
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: `
+Ejemplo visual: haz click en un thumbnail para abrir el *Image Overlay* a pantalla completa.
+Usa las flechas laterales o el botón de cierre (X).
+        `,
+      },
+    },
+    layout: 'centered',
+  },
+  // 👇 Usamos template en lugar de { component: ... } para satisfacer el tipo esperado
+  render: () => ({
+    template: `<docs-demo-host></docs-demo-host>`,
+  }),
+};

package/src/components-source/dropi-languages-selector/dropi-languages-selector.component.html

@@ -0,0 +1,17 @@
+<div class="custom-dropdown" [class.open]="dropdownOpen">
+  <div class="selected-option" (click)="toggleDropdown()">
+    <app-country-flags [country]="selectedLang.flag" [style]="'rectangle'"></app-country-flags>
+    <span class="Body-S-Regular">{{ selectedLang.label }}</span>
+    <app-icon name="Caret-down" width="16px" height="16px" color="Gray-Gray-500"></app-icon>
+  </div>
+  <ul [ngClass]="{ 'dropdown-options': true, 'dropdown-open': dropdownOpen }">
+    <li
+      *ngFor="let lang of languages"
+      (click)="selectLanguage(lang)"
+      [class.active]="lang.code === selectedLang.code"
+    >
+      <app-country-flags [country]="lang.flag" [style]="'rectangle'"></app-country-flags>
+      <span class="Body-S-Regular">{{ lang.label }}</span>
+    </li>
+  </ul>
+</div>

package/src/components-source/dropi-languages-selector/dropi-languages-selector.component.scss

@@ -0,0 +1,82 @@
+.custom-dropdown {
+  position: absolute;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  z-index: 999;
+  top: 20px;
+  right: 70px;
+  @media screen and (max-width: 720px) {
+    top: 10px;
+    right: 10px;
+  }
+  &.open {
+    app-icon {
+      transform: rotate(180deg);
+    }
+  }
+  .selected-option {
+    display: flex;
+    height: 38px;
+    padding: var(--Size-2) var(--Size-3);
+    align-items: center;
+    gap: var(--Size-2);
+    border-radius: 4px;
+    border: 1px solid var(--Gray-Gray-200);
+    background: var(--Neutral-White);
+
+    .arrow {
+      margin-left: auto;
+    }
+    @media screen and (max-width: 720px) {
+      span {
+        display: none;
+      }
+    }
+  }
+
+  .dropdown-options {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    margin-top: 4px;
+    z-index: 1000;
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 0;
+    height: 0;
+    opacity: 0;
+    visibility: hidden;
+    interpolate-size: allow-keywords;
+    transition: all 0.3s ease-in-out;
+    will-change: auto;
+    &.dropdown-open {
+      height: auto;
+      opacity: 1;
+      visibility: visible;
+    }
+    li {
+      list-style: none;
+      padding: 8px 12px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      &:hover,
+      &.active {
+        background: #f5f5f5;
+      }
+    }
+
+    span {
+      margin-left: 8px;
+      @media screen and (max-width: 720px) {
+        display: none;
+      }
+    }
+  }
+}