@dropi/ui-components 1.0.0

package/src/components-source/checkbox-selection-list/checkbox-selection-list.component.stories.ts

@@ -0,0 +1,157 @@
+/**
+ * @fileoverview CheckboxSelectionList component stories for Storybook
+ * @description A filterable checkbox list for multi-selection scenarios
+ */
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { CheckboxSelectionListComponent } from './checkbox-selection-list.component';
+
+const meta: Meta<CheckboxSelectionListComponent> = {
+  title: 'UI Dropi/Checkbox Selection List',
+  component: CheckboxSelectionListComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+# Checkbox Selection List Component
+
+A list component with checkboxes and optional search filter.
+
+## Key Features
+- **Multi-select**: Select multiple options
+- **Single-select**: Optional single selection mode
+- **Search filter**: Filter options by text
+- **Not found message**: Customizable empty state
+        `,
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description: 'List of available options to select',
+      control: 'object',
+      defaultValue: [
+        { label: 'Option 1', value: 'option-1' },
+        { label: 'Option 2', value: 'option-2' },
+        { label: 'Option 3', value: 'option-3' },
+      ],
+    },
+    showFilter: {
+      description: 'Show or hide the search field',
+      control: 'boolean',
+      defaultValue: true,
+    },
+    filterPlaceholder: {
+      description: 'Placeholder for the search field',
+      control: 'text',
+      defaultValue: 'Search...',
+    },
+    searchDelay: {
+      description: 'Delay time in milliseconds for search',
+      control: 'number',
+      defaultValue: 100,
+    },
+    showNotFound: {
+      description: 'Show or hide the "No results found" message',
+      control: 'boolean',
+      defaultValue: true,
+    },
+    notFoundMessage: {
+      description: 'Custom message when no results are found',
+      control: 'text',
+      defaultValue: 'No results found',
+    },
+  },
+  args: {
+    onSearch: action('onSearch'),
+    checkedValues: action('checkedValues'),
+  },
+};
+
+export default meta;
+type Story = StoryObj<CheckboxSelectionListComponent>;
+
+/**
+ * Default checkbox list with filter enabled
+ */
+export const Default: Story = {
+  args: {
+    options: [
+      { label: 'Option 1', id: 'option-1' },
+      { label: 'Option 2', id: 'option-2' },
+      { label: 'Option 3', id: 'option-3' },
+    ],
+    showFilter: true,
+    filterPlaceholder: 'Search...',
+    searchDelay: 100,
+    showNotFound: true,
+    notFoundMessage: 'No results found',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/%5BWEB%5D-components?node-id=26-199&p=f&t=LtgMIFDi6MGO8NBe-0',
+    },
+  },
+};
+
+/**
+ * Checkbox list without search filter
+ */
+export const WithoutFilter: Story = {
+  args: {
+    ...Default.args,
+    showFilter: false,
+  },
+};
+
+/**
+ * Single selection mode
+ */
+export const SingleSelect: Story = {
+  args: {
+    ...Default.args,
+    showFilter: false,
+    multiSelect: false,
+  },
+};
+
+/**
+ * List with custom filter placeholder
+ */
+export const CustomPlaceholder: Story = {
+  args: {
+    ...Default.args,
+    filterPlaceholder: 'Type to search...',
+  },
+};
+
+export const NoResultsMessage: Story = {
+  args: {
+    ...Default.args,
+    options: [],
+    notFoundMessage: 'No hay coincidencias',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    ...Default.args,
+    options: [
+      {
+        ...Default.args.options[0],
+        preIcon: '/assets/images/delivery/domina.png',
+      },
+      {
+        ...Default.args.options[1],
+        preIcon: '/assets/images/delivery/veloces.png',
+      },
+      {
+        ...Default.args.options[2],
+        preIcon: '/assets/images/delivery/envia.png',
+      },
+    ],
+  },
+};

package/src/components-source/checkbox-selection-list/checkbox-selection-list.component.ts

@@ -0,0 +1,219 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+  FormControl,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+
+import { debounceTime } from 'rxjs/operators';
+import { Option } from '@app/utilities/interfaces/ui/checkbox-selection-list-interface';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { DropiCheckboxComponent } from '../dropi-checkbox/dropi-checkbox.component';
+import { Subscription } from 'rxjs';
+
+/**
+ * Componente que renderiza un listado de opciones con checkboxes.
+ * Permite buscar dentro del listado de opciones.
+ * Emite eventos cuando se selecciona o deselecciona una opción.
+ *
+ * @example
+ * <app-checkbox-selection-list
+ *   [showFilter]="true"
+ *   [options]="[
+ *     { label: 'Opción 1', value: 'opcion-1' },
+ *     { label: 'Opción 2', value: 'opcion-2' },
+ *     { label: 'Opción 3', value: 'opcion-3' }
+ *   ]"
+ *   (ngModel)="selectedOptions"
+ * ></app-checkbox-selection-list>
+ *
+ * @example
+ * <app-checkbox-selection-list
+ *   [showFilter]="true"
+ *   [options]="[
+ *     { label: 'Opción 1', value: 'opcion-1' },
+ *     { label: 'Opción 2', value: 'opcion-2' },
+ *     { label: 'Opción 3', value: 'opcion-3' }
+ *   ]"
+ *   [formControlName]="selectedOptions"
+ * ></app-checkbox-selection-list>
+ * */
+@Component({
+  selector: 'app-checkbox-selection-list',
+  templateUrl: './checkbox-selection-list.component.html',
+  styleUrls: ['./checkbox-selection-list.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    FormsModule,
+    ReactiveFormsModule,
+    DropiCheckboxComponent,
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxSelectionListComponent),
+      multi: true,
+    },
+  ],
+})
+export class CheckboxSelectionListComponent implements ControlValueAccessor, OnInit, OnChanges {
+  /**
+   * Listado de opciones disponibles para seleccionar
+   */
+  @Input() options: Option[] = [];
+
+  /**
+   * Permite mostrar u ocultar el campo de búsqueda
+   * @default true
+   */
+  @Input() showFilter: boolean = true;
+
+  /**
+   * Placeholder para el campo de búsqueda
+   */
+  @Input() filterPlaceholder: string = 'Search';
+
+  /**
+   * Tiempo de demora en milisegundos para realizar la búsqueda
+   */
+  @Input() searchDelay: number = 100;
+
+  /**
+   * Permite mostrar u ocultar el mensaje de "No se encontraron resultados"
+   * @default true
+   */
+  @Input() showNotFound: boolean = true;
+
+  /**
+   * Mensaje personalizado para mostrar cuando no se encuentran resultados
+   * @default "No se encontraron resultados"
+   */
+  @Input() notFoundMessage: string = 'No related results found';
+
+  /**
+   * Permite seleccionar multiples opciones
+   * @default true
+   */
+  @Input() multiSelect: boolean = true;
+
+  /**
+   * Evento que se dispara al realizar una búsqueda (Se emite cuando se cambia el valor del input de búsqueda basado en @SearchDelay)
+   */
+  @Output() onSearch = new EventEmitter<string>();
+
+  /**
+   * Evento que se dispara al cambiar el estado de los checkbox
+   */
+  @Output() checkedValues = new EventEmitter<Option[]>();
+
+  searchControl = new FormControl('');
+  selectedValues: Option[] = [];
+  filteredOptions: Option[] = [];
+
+  private onChange: (value: Option[]) => void = () => {};
+  private onTouched: () => void = () => {};
+  private readonly subscriptions: Subscription = new Subscription();
+
+  constructor(
+    private readonly changeDetector: ChangeDetectorRef,
+    private readonly translate: TranslateService,
+  ) {}
+
+  ngOnInit() {
+    this.subscriptions.add(
+      this.searchControl.valueChanges.pipe(debounceTime(this.searchDelay)).subscribe((value) => {
+        this.filterOption(value);
+        this.onSearch.emit(value);
+      }),
+    );
+
+    this.filteredOptions = this.options;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['options']) this.syncCheckedValues();
+  }
+
+  clearSearchInput() {
+    this.searchControl.setValue('');
+    this.onSearch.emit('');
+  }
+
+  toggleSelection(checked: boolean, option: Option) {
+    if (this.multiSelect) {
+      option.checked = checked;
+      this.selectedValues = this.options.filter((o) => o.checked);
+      this.checkedValues.emit(this.selectedValues);
+      this.onChange(this.selectedValues);
+      this.onTouched();
+    } else {
+      // Desmarcar todas
+      this.options.forEach((o) => (o.checked = false));
+      // Marcar solo el actual si se está marcando
+      option.checked = checked;
+      this.selectedValues = this.options.filter((o) => o.checked);
+      // Reflejar cambios visuales también en el filtrado
+      this.filteredOptions = [...this.options];
+      // Emitir
+      this.checkedValues.emit(this.selectedValues);
+      this.onChange(this.selectedValues);
+      this.onTouched();
+    }
+  }
+
+  filterOption(optionLabel: string) {
+    if (!optionLabel?.trim()) {
+      this.filteredOptions = this.options;
+      return;
+    }
+    this.filteredOptions = this.options.filter((o) =>
+      o.label.toLowerCase().includes(optionLabel.toLowerCase()),
+    );
+  }
+
+  writeValue(value: Option[]): void {
+    this.selectedValues = value || [];
+    this.options.forEach((option) => {
+      option.checked = this.selectedValues.some((o) => o.id === option.id);
+    });
+    this.filteredOptions = [...this.options];
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    // Si tu componente tuviera un disabled global lo controlas aquí.
+  }
+
+  private syncCheckedValues() {
+    this.options.forEach((option) => {
+      option.checked = this.selectedValues.some((o) => o.id === option.id);
+    });
+    this.filteredOptions = [...this.options];
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+}

package/src/components-source/city-selector/city-selector.component.html

@@ -0,0 +1,22 @@
+<div class="city-selector">
+  <p-multiSelect
+    [options]="groupedCities"
+    [group]="true"
+    [(ngModel)]="selectedCities"
+    [placeholder]="'select a city' | translate"
+    display="chip"
+    [showClear]="false"
+    [showHeader]="true"
+    (ngModelChange)="onSelectCityChange($event)"
+    [itemSize]="10"
+    [disabled]="disabled"
+    [lazy]="true"
+    (onLazyLoad)="loadCities($event)"
+  >
+    <ng-template let-group pTemplate="group">
+      <div class="flex item-state">
+        <span>{{ group.label }}</span>
+      </div>
+    </ng-template>
+  </p-multiSelect>
+</div>

package/src/components-source/city-selector/city-selector.component.scss

@@ -0,0 +1 @@
+

package/src/components-source/city-selector/city-selector.component.spec.ts

@@ -0,0 +1,278 @@
+import { beforeEach, describe, expect, it } from '@jest/globals';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CitySelectorComponent } from './city-selector.component';
+import { CityService } from '../../pages/service/city/city.service';
+import { CacheService } from '../../services/cache.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { FormsModule } from '@angular/forms';
+import { of, throwError } from 'rxjs';
+
+describe('CitySelectorComponent', () => {
+  let component: CitySelectorComponent;
+  let fixture: ComponentFixture<CitySelectorComponent>;
+  let mockCityService: any;
+  let mockCacheService: any;
+
+  const mockCitiesResponse = {
+    data: [
+      {
+        label: 'STATE 1',
+        id_state: '1',
+        items: [
+          { label: 'CITY 1', id_city: '101' },
+          { label: 'CITY 2', id_city: '102' },
+        ],
+      },
+      {
+        label: 'STATE 2',
+        id_state: '2',
+        items: [{ label: 'CITY 3', id_city: '201' }],
+      },
+    ],
+  };
+
+  beforeEach(async () => {
+    mockCityService = {
+      getCitiesByCountry: jest.fn().mockReturnValue(of(mockCitiesResponse)),
+    };
+
+    mockCacheService = {
+      get: jest.fn().mockReturnValue(null),
+      set: jest.fn(),
+    };
+
+    // Mock localStorage
+    const localStorageMock = {
+      getItem: jest.fn().mockImplementation((key: string) => {
+        if (key === 'DROPI_configurations') {
+          return JSON.stringify([{ country: 'CO' }]);
+        }
+        if (key === 'DROPI_cities_CO') {
+          return JSON.stringify([
+            { id: 1, name: 'Bogotá' },
+            { id: 2, name: 'Medellín' },
+          ]);
+        }
+        return null;
+      }),
+      setItem: jest.fn(),
+      clear: jest.fn(),
+    };
+    Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
+    // Crear el componente directamente sin TestBed
+    component = new CitySelectorComponent(mockCityService, mockCacheService);
+    fixture = {
+      componentInstance: component,
+      detectChanges: () => {},
+      nativeElement: {},
+    } as any;
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.disabled).toBe(false);
+      expect(component.country).toBe('');
+    });
+
+    it('should initialize selectedCities as empty array if not provided', () => {
+      component.ngOnInit();
+      expect(component.selectedCities).toEqual([]);
+    });
+  });
+
+  describe('Carga de ciudades desde API', () => {
+    it('should fetch cities from API on init', () => {
+      component.ngOnInit();
+
+      expect(mockCityService.getCitiesByCountry).toHaveBeenCalled();
+    });
+
+    it('should process and capitalize city names', (done) => {
+      component.ngOnInit();
+
+      setTimeout(() => {
+        expect(component['allCities'].length).toBeGreaterThan(0);
+        expect(component['allCities'][0].label).toBe('State 1');
+        done();
+      }, 100);
+    });
+
+    it('should handle API errors gracefully', () => {
+      mockCityService.getCitiesByCountry.mockReturnValue(throwError(() => new Error('API Error')));
+
+      expect(() => component.fetchCitiesFromAPI()).not.toThrow();
+    });
+
+    it('should save cities to localStorage', (done) => {
+      component.ngOnInit();
+
+      setTimeout(() => {
+        expect(localStorage.setItem).toHaveBeenCalledWith('groupedCities', expect.any(String));
+        done();
+      }, 100);
+    });
+
+    it('should save cities to cache by domain', (done) => {
+      component.ngOnInit();
+
+      setTimeout(() => {
+        expect(mockCacheService.set).toHaveBeenCalledWith(
+          expect.stringContaining('grouped-cities-'),
+          expect.any(Array),
+          expect.any(Number),
+        );
+        done();
+      }, 100);
+    });
+  });
+
+  describe('Gestión de caché', () => {
+    it('should use cached cities if available', () => {
+      const cachedCities = [{ label: 'Cached State', value: '1', items: [] }];
+      mockCacheService.get.mockReturnValue(cachedCities);
+
+      component.ngOnInit();
+
+      expect(component['allCities']).toEqual(cachedCities);
+      expect(mockCityService.getCitiesByCountry).not.toHaveBeenCalled();
+    });
+
+    it('should fallback to localStorage if no domain cache', () => {
+      const storedCities = JSON.stringify([{ label: 'Stored State', value: '1', items: [] }]);
+      (localStorage.getItem as any).mockReturnValue(storedCities);
+
+      component.ngOnInit();
+
+      expect(component['allCities'].length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Carga diferida de ciudades', () => {
+    it('should load initial chunk of cities', () => {
+      component['allCities'] = Array(200)
+        .fill(null)
+        .map((_, i) => ({
+          label: `State ${i}`,
+          value: `${i}`,
+          items: [],
+        }));
+
+      component.groupedCities = component['allCities'].slice(0, component['chunkSize']);
+
+      expect(component.groupedCities.length).toBe(100);
+    });
+
+    it('should load more cities on scroll', () => {
+      component['allCities'] = Array(200)
+        .fill(null)
+        .map((_, i) => ({
+          label: `State ${i}`,
+          value: `${i}`,
+          items: [],
+        }));
+      component.groupedCities = component['allCities'].slice(0, 100);
+
+      const event = { first: 0, last: 150 };
+      component.loadCities(event);
+
+      expect(component.groupedCities.length).toBeGreaterThan(100);
+    });
+
+    it('should not load more if already at end', () => {
+      component['allCities'] = Array(50)
+        .fill(null)
+        .map((_, i) => ({
+          label: `State ${i}`,
+          value: `${i}`,
+          items: [],
+        }));
+      component.groupedCities = component['allCities'];
+
+      const initialLength = component.groupedCities.length;
+      const event = { first: 0, last: 60 };
+      component.loadCities(event);
+
+      expect(component.groupedCities.length).toBe(initialLength);
+    });
+  });
+
+  describe('Selección de ciudades', () => {
+    it('should emit selected cities on change', () => {
+      const emitSpy = jest.spyOn(component.selectedCitiesChange, 'emit');
+      const mockEvent = { value: [101, 102] };
+
+      component.onSelectCityChange(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('should handle pre-selected cities with values', () => {
+      component.selectedCities = [{ value: 101 }, { value: 102 }];
+
+      component.ngOnInit();
+
+      expect(component.selectedCities).toEqual([101, 102]);
+    });
+
+    it('should maintain selected cities if already array of numbers', () => {
+      component.selectedCities = [101, 102];
+
+      component.ngOnInit();
+
+      // El componente puede transformar los valores, verificamos que tenga elementos
+      expect(component.selectedCities.length).toBe(2);
+    });
+  });
+
+  describe('Estado deshabilitado', () => {
+    it('should accept disabled state', () => {
+      component.disabled = true;
+      fixture.detectChanges();
+
+      expect(component.disabled).toBe(true);
+    });
+  });
+
+  describe('Configuración de país', () => {
+    it('should read country from localStorage', () => {
+      const mockConfig = JSON.stringify([{ country: 'CO' }]);
+      (localStorage.getItem as any).mockReturnValue(mockConfig);
+
+      component.ngOnInit();
+
+      expect(component.country).toBe('CO');
+    });
+
+    it('should handle missing country configuration', () => {
+      (localStorage.getItem as any).mockReturnValue(JSON.stringify([{}]));
+
+      expect(() => component.ngOnInit()).not.toThrow();
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete city selection workflow', (done) => {
+      const emitSpy = jest.spyOn(component.selectedCitiesChange, 'emit');
+
+      component.ngOnInit();
+
+      setTimeout(() => {
+        // Cities loaded
+        expect(component['allCities'].length).toBeGreaterThan(0);
+
+        // Select cities
+        const mockSelection = { value: [101, 201] };
+        component.onSelectCityChange(mockSelection);
+
+        expect(emitSpy).toHaveBeenCalledWith(mockSelection);
+        done();
+      }, 100);
+    });
+  });
+});