@dropi/ui-components 1.0.0

package/src/components-source/date-picker/date-picker.component.ts

@@ -0,0 +1,313 @@
+import { AnimationEvent } from '@angular/animations';
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  forwardRef,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild,
+  TemplateRef,
+  EmbeddedViewRef,
+  OnInit,
+  NgZone,
+} from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CalendarModule } from 'primeng/calendar';
+import { NgPrimeModule } from '@app/ngprime.module';
+import { IconComponent } from '../icon/icon.component';
+
+/**
+ * Componente que renderiza un calendario para seleccionar fechas.
+ * Soporta la configuración de fechas mínima y máxima que se pueden seleccionar.
+ * Permite mostrar un título flotante sobre el componente de fecha y un texto placeholder.
+ * Emite eventos cuando se selecciona una nueva fecha y cuando se cierra el panel emergente del calendario.
+ * @example
+ * <app-date-picker [minDate]="new Date(2022, 0, 1)" [maxDate]="new Date(2022, 11, 31)"></app-date-picker>
+ */
+
+interface FilterOption {
+  filter: string; // Texto descriptivo del filtro
+  value: string; // Valor técnico del filtro
+  group: string; // Grupo al que pertenece
+}
+type FilterGroup = Array<FilterOption>;
+
+@Component({
+  selector: 'app-date-picker',
+  standalone: true,
+  imports: [CommonModule, CalendarModule, FormsModule, IconComponent],
+  templateUrl: './date-picker.component.html',
+  styleUrls: ['./date-picker.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DatePickerComponent),
+      multi: true,
+    },
+  ],
+})
+export class DatePickerComponent implements OnInit {
+  @Input() showTime: boolean = false;
+  /**
+   * Establece la fecha mínima que se puede seleccionar.
+   * @example
+   * <app-date-picker [minDate]="new Date(2022, 0, 1)"/>
+   */
+  @Input() minDate: Date;
+
+  /**
+   * Establece la fecha máxima que se puede seleccionar.
+   * @example
+   * <app-date-picker [maxDate]="new Date(2022, 11, 31)"/>
+   */
+  @Input() maxDate: Date;
+
+  /**
+   * Indica si el componente está en estado de carga.
+   * Por defecto es false.
+   * @example
+   * <app-date-picker [loading]="true"/>
+   */
+  @Input() loading: boolean = false;
+
+  /**
+   * Establece la alineación del calendario emergente.
+   * Por defecto es false, lo que significa que el calendario se abrirá a la izquierda del input de fecha.
+   * Si se establece en true, el calendario se abrirá a la derecha del input de fecha.
+   * @example
+   * <app-date-picker [setRight]="true"/>
+   */
+  @Input() setRight: boolean = false;
+
+  /**
+   * Establece un título flotante sobre el componente de fecha.
+   * @example
+   * <app-date-picker [label]="'Fecha de nacimiento'"/>
+   */
+  @Input() label: string = null;
+
+  /**
+   * Texto que se mostrará en el input de fecha si no se ha seleccionado una fecha.
+   * Por defecto es null, lo que significa que se mostrará el texto "DD/MM/YYYY".
+   * @example
+   * <app-date-picker [placeholder]="'Seleccione una fecha'"/>
+   */
+  @Input() placeholder: string = 'DD/MM/YYYY';
+
+  /**
+   * Establece si el componente de fecha debe mostrar un icono de calendario.
+   * Por defecto es false.
+   * @example
+   * <app-date-picker [showIcon]="true"/>
+   */
+  @Input() showIcon: boolean = false;
+
+  @Input() required: boolean = false;
+
+  /**
+   * Indica si el componente debe mostrar un estado de error.
+   * Por defecto es false.
+   * @example
+   * <app-date-picker [isInvalid]="true"/>
+   */
+  @Input() isInvalid: boolean = false;
+
+  // Indica si el componente debe estar deshabilitado.
+  @Input() disabled: boolean = false;
+
+  /**
+   * Indica si el componente debe mostrar un estado de error.
+   * Por defecto es false.
+   * @example
+   * <app-date-picker [isInvalid]="true"/>
+   */
+  @Input() selectionMode: string = 'single';
+
+  /**
+   * Indica si el componente debe mostrar un estado de error.
+   * Por defecto es false.
+   * @example
+   * <app-date-picker [isInvalid]="true"/>
+   */
+  @Input() filters: FilterGroup[] = [];
+
+  /**
+   * Evento que se dispara cuando se selecciona una nueva fecha.
+   * @example
+   * <app-date-picker (onChangeDate)="onChangeDate($event)"/>
+   */
+  @Output() onChangeDate = new EventEmitter<Date>();
+
+  /**
+   * Emite un evento cuando se cierra el panel emergente del calendario.
+   * El evento emitido contiene la animación que se está ejecutando en el momento de cerrar el panel.
+   * @example
+   * <app-date-picker (onClosePanel)="onClosePanel($event)"/>
+   */
+  @Output() onClosePanel = new EventEmitter<AnimationEvent>();
+
+  @Output() sendFilters = new EventEmitter<FilterOption>();
+  /**
+   * Define la fecha preseleccionada ( en caso de que cuando lo utilices, ya tengas una fecha estipulada)
+   * Por defecto es null.
+   * @example
+   * <app-date-picker [selectedDate]="new Date(2022, 11, 31)"/>
+   */
+  private _selectedDate: Date | Date[] = new Date();
+
+  /**
+   * Verifica si una fecha es válida
+   * @param date Fecha a validar
+   * @returns true si la fecha es válida, false en caso contrario
+   */
+  private isValidDate(date: Date): boolean {
+    return date instanceof Date && !isNaN(date.getTime());
+  }
+
+  @Input() set selectedDate(value: any) {
+    if (!this.selectionMode || this.selectionMode !== 'range') {
+      if (value === undefined || value === null || value === '' || value === 'Invalid Date') {
+        this._selectedDate = null;
+        return;
+      }
+      const parsedDate = new Date(value);
+      // Solo asignar si la fecha es válida
+      this._selectedDate = this.isValidDate(parsedDate) ? parsedDate : null;
+    } else if (this.selectionMode === 'range') {
+      if (value === undefined || value === null || value === '' || value === 'Invalid Date') {
+        this._selectedDate = [];
+        return;
+      }
+      // Asegurar que value sea un array para el rango
+      if (Array.isArray(value)) {
+        this._selectedDate = value.map((date) => {
+          if (!date || date === 'Invalid Date') return null;
+          const parsedDate = new Date(date);
+          return this.isValidDate(parsedDate) ? parsedDate : null;
+        });
+      } else {
+        // Si no es un array, crear un rango con la misma fecha en ambos extremos
+        const date = new Date(value);
+        if (this.isValidDate(date)) {
+          this._selectedDate = [date, date];
+        } else {
+          this._selectedDate = [];
+        }
+      }
+    }
+  }
+
+  @ViewChild('filtersTemplate') filtersTemplate!: TemplateRef<any>;
+  private filtersViewRef: EmbeddedViewRef<any> | null = null;
+
+  get selectedDate(): Date | Date[] {
+    // Tipo ajustado para coincidir con el setter
+    return this._selectedDate;
+  }
+
+  isDateView = true;
+  activeRangeIndex: number | null = null;
+  isSelectedFilter: boolean = false;
+
+  onChange: any = () => {};
+  onTouch: any = () => {};
+
+  constructor(private zone: NgZone) {}
+
+  ngOnInit(): void {}
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  onSelect(event: Date) {
+    this.onChangeDate.emit(event);
+
+    this.onTouch();
+  }
+
+  onClose(event: AnimationEvent) {
+    this.onClosePanel.emit(event);
+  }
+
+  writeValue(value: any): void {
+    // Usar el setter que ya tiene validación de fechas inválidas
+    this.selectedDate = value;
+  }
+
+  onCalendarOpen(event: any) {
+    if (this.filters.length > 0) {
+      const overlay = document.querySelector('.p-datepicker') as HTMLElement;
+
+      if (overlay) {
+        overlay.style.display = 'flex';
+        overlay.style.flexDirection = 'row';
+        overlay.style.alignItems = 'flex-start';
+        overlay.style.justifyContent = 'space-between';
+        overlay.style.gap = '1rem';
+
+        let filtersDiv = overlay.querySelector('.custom-filters') as HTMLElement;
+        if (!filtersDiv) {
+          filtersDiv = document.createElement('div');
+          filtersDiv.classList.add('custom-filters');
+          this.buildFilters(filtersDiv);
+          overlay.appendChild(filtersDiv);
+        }
+
+        // 👉 Observa cambios en el calendario
+        const observer = new MutationObserver(() => {
+          const isMonthPicker = !!overlay.querySelector('.p-monthpicker');
+          const isYearPicker = !!overlay.querySelector('.p-yearpicker');
+
+          if (isMonthPicker || isYearPicker) {
+            filtersDiv.style.display = 'none';
+          } else {
+            filtersDiv.style.display = 'block';
+          }
+        });
+
+        observer.observe(overlay, { childList: true, subtree: true });
+      }
+    }
+  }
+
+  // Método auxiliar
+  private buildFilters(filtersDiv: HTMLElement) {
+    this.filters.forEach((group) => {
+      let groupDiv = document.createElement('div');
+      groupDiv.classList.add('filtros');
+
+      let title = document.createElement('div');
+      title.classList.add('title-header');
+      title.textContent = group[0].group;
+      groupDiv.appendChild(title);
+
+      group.forEach((f) => {
+        let btn = document.createElement('button');
+        btn.textContent = f.filter;
+        btn.classList.add('filter-btn');
+
+        btn.addEventListener('click', () => {
+          this.zone.run(() => {
+            groupDiv.querySelectorAll('.filter-btn').forEach((b) => b.classList.remove('selected'));
+            btn.classList.add('selected');
+            this.sendFilters.emit(f);
+          });
+        });
+
+        groupDiv.appendChild(btn);
+      });
+
+      filtersDiv.appendChild(groupDiv);
+    });
+  }
+
+  ditributeFilters() {
+    this.filters;
+  }
+}

package/src/components-source/date-picker/date-picker.stories.spec.ts

@@ -0,0 +1,150 @@
+/**
+ * Tests for DatePickerComponent Stories
+ *
+ * Este archivo demuestra cómo testear stories de Storybook usando Jest.
+ * Usa los args de cada story para configurar el componente en tests.
+ *
+ * @see https://storybook.js.org/docs/writing-tests/stories-in-unit-tests
+ */
+
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
+
+import * as stories from './date-picker.component.stories';
+import { DatePickerComponent } from './date-picker.component';
+
+// Extraer los stories individuales
+const { Default, WithLabel, Loading, WithIcon, Required, Invalid, WithDateRange, RightAligned } =
+  stories;
+
+describe('DatePickerComponent Stories', () => {
+  let fixture: ComponentFixture<DatePickerComponent>;
+  let component: DatePickerComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DatePickerComponent, FormsModule, BrowserAnimationsModule],
+    }).compileComponents();
+  });
+
+  describe('Default Story', () => {
+    it('should render the default date picker', async () => {
+      // Renderizar el story Default
+      fixture = TestBed.createComponent(DatePickerComponent);
+      component = fixture.componentInstance;
+
+      // Aplicar los args del story
+      const args = Default.args || {};
+      Object.assign(component, args);
+
+      fixture.detectChanges();
+
+      expect(component).toBeTruthy();
+      expect(component.loading).toBe(false);
+      expect(component.showIcon).toBe(false);
+    });
+  });
+
+  describe('WithLabel Story', () => {
+    it('should render date picker with label', async () => {
+      fixture = TestBed.createComponent(DatePickerComponent);
+      component = fixture.componentInstance;
+
+      const args = WithLabel.args || {};
+      Object.assign(component, args);
+
+      fixture.detectChanges();
+
+      expect(component.label).toBeTruthy();
+      const compiled = fixture.nativeElement;
+      const labelElement = compiled.querySelector('.label');
+      expect(labelElement).toBeTruthy();
+    });
+  });
+
+  describe('Loading Story', () => {
+    it('should render loading state', async () => {
+      fixture = TestBed.createComponent(DatePickerComponent);
+      component = fixture.componentInstance;
+
+      const args = Loading.args || {};
+      Object.assign(component, args);
+
+      fixture.detectChanges();
+
+      expect(component.loading).toBe(true);
+    });
+  });
+
+  describe('WithIcon Story', () => {
+    it('should render date picker with calendar icon', async () => {
+      fixture = TestBed.createComponent(DatePickerComponent);
+      component = fixture.componentInstance;
+
+      const args = WithIcon.args || {};
+      Object.assign(component, args);
+
+      fixture.detectChanges();
+
+      expect(component.showIcon).toBe(true);
+    });
+  });
+
+  describe('Required Story', () => {
+    it('should render required date picker', async () => {
+      fixture = TestBed.createComponent(DatePickerComponent);
+      component = fixture.componentInstance;
+
+      const args = Required.args || {};
+      Object.assign(component, args);
+
+      fixture.detectChanges();
+
+      expect(component.required).toBe(true);
+    });
+  });
+
+  describe('Invalid Story', () => {
+    it('should render date picker with invalid state', async () => {
+      fixture = TestBed.createComponent(DatePickerComponent);
+      component = fixture.componentInstance;
+
+      const args = Invalid.args || {};
+      Object.assign(component, args);
+
+      fixture.detectChanges();
+
+      expect(component.isInvalid).toBe(true);
+    });
+  });
+
+  describe('WithDateRange Story', () => {
+    it('should render date picker with min and max date constraints', async () => {
+      fixture = TestBed.createComponent(DatePickerComponent);
+      component = fixture.componentInstance;
+
+      const args = WithDateRange.args || {};
+      Object.assign(component, args);
+
+      fixture.detectChanges();
+
+      expect(component.minDate).toBeDefined();
+      expect(component.maxDate).toBeDefined();
+    });
+  });
+
+  describe('RightAligned Story', () => {
+    it('should render date picker aligned to the right', async () => {
+      fixture = TestBed.createComponent(DatePickerComponent);
+      component = fixture.componentInstance;
+
+      const args = RightAligned.args || {};
+      Object.assign(component, args);
+
+      fixture.detectChanges();
+
+      expect(component.setRight).toBe(true);
+    });
+  });
+});

package/src/components-source/date-picker-range/date-picker-range.component.html

@@ -0,0 +1,45 @@
+<div [ngClass]="setRight ? '' : 'calendar-left'" class="date-picker-range" *ngIf="!loading">
+  <div *ngIf="showLabel" class="label">{{'date range'|translate}}</div>
+  <p-calendar
+    #calendarInputRef
+    class="date-picker-input"
+    [panelStyleClass]="setRight ? 'dropi-custom-calendar' : 'dropi-custom-calendar calendar-left'"
+    [ngClass]="{ 'date-picker-input--open': loading }"
+    [(ngModel)]="dateRange"
+    selectionMode="range"
+    [readonlyInput]="true"
+    dateFormat="dd/mm/yy"
+    [style]="{ width: '100%' }"
+    inputId="date-range"
+    (onSelect)="onSelect($event)"
+    [maxDate]="maxDate"
+    [minDate]="minDate"
+    [placeholder]="placeholder"
+    ([CalendarTypeView])="(CalendarTypeView)"
+    showOtherMonths="false"
+    responsiveOptions="true"
+    [disabled]="loading"
+    (onClick)="checkCalendarView(calendar)"
+    [appendTo]="appendTo"
+  >
+    <ng-template *ngIf="CalendarTypeView === null" pTemplate="header">
+      <div class="custom-header">
+        <button
+          pButton
+          *ngFor="let range of ranges; let i = index"
+          (click)="selectRange(range, i)"
+          label="{{ range.label |translate}}"
+          class="p-button-text"
+          [ngClass]="{ active: i === activeRangeIndex }"
+        ></button>
+        <div *ngIf="viewRangeWarning" class="warning-box">
+          <span class="warning-message">Solo puedes filtrar en un rango máximo de 90 días.</span>
+        </div>
+      </div>
+    </ng-template>
+  </p-calendar>
+</div>
+
+<div class="loading" *ngIf="loading">
+  <div class="skeleton dp"></div>
+</div>