@dropi/ui-components 1.0.0

package/src/components-source/icon/icon-names.const.ts

@@ -0,0 +1,270 @@
+export const ICON_NAMES = [
+  'Add-circle',
+  'alarm',
+  'Alarm-clock',
+  'Align-center-text',
+  'Align-justify',
+  'Align-left-text',
+  'Align-right-text',
+  'Apps',
+  'Apps-add',
+  'Arrow-alt',
+  'Arrow-diagonal-down',
+  'Arrow-diagonal-up',
+  'Arrow-double-small-left',
+  'Arrow-double-small-right',
+  'Arrow-down',
+  'Arrow-left',
+  'Arrow-next',
+  'Arrow-right',
+  'Arrow-undo',
+  'Arrow-up',
+  'Back-alt',
+  'Ban',
+  'Bank',
+  'Bell',
+  'Bell-ring',
+  'Bold',
+  'Bolt',
+  'Book',
+  'Bookmark',
+  'Box',
+  'Box-back',
+  'Box-close',
+  'Boxes',
+  'Bring-front',
+  'Calculator',
+  'Calendar',
+  'Callcenter-alt',
+  'Call-history',
+  'Call-incoming',
+  'Call-missed',
+  'Call-outgoing',
+  'Canvan',
+  'Card',
+  'Caret-down',
+  'Caret-down-up',
+  'Caret-left',
+  'Caret-right',
+  'Caret-up',
+  'Certificated',
+  'Chat-arrow-down',
+  'Chat-arrow-grow',
+  'Chat-bars-grow',
+  'Check',
+  'Checkbox',
+  'Check-circle',
+  'Checked',
+  'Chinche',
+  'Chinche-fill',
+  'City',
+  'Clip',
+  'Clock',
+  'Clon',
+  'Close-large',
+  'Close-small',
+  'Color-text',
+  'Comment-round',
+  'Comment-round info',
+  'Comment-round-check',
+  'Comment-round-heart',
+  'Comment-square',
+  'Comment-square-user',
+  'Comments-round',
+  'Comments-square',
+  'Comments-square-dots',
+  'Compress',
+  'Computer',
+  'Cross-circle',
+  'Disk',
+  'dolar-top',
+  'Download',
+  'Dropdown-down',
+  'Dropdown-left',
+  'Dropdown-Right',
+  'Dropdown-up',
+  'Duplicate',
+  'Envelope',
+  'Envelope-ban',
+  'Envelope-download',
+  'Envelope-marker',
+  'Envelope-open',
+  'Envelope-plus',
+  'Expand',
+  'Export-order',
+  'Export-product',
+  'external-link',
+  'Eye',
+  'Eye-crossed',
+  'Facebook',
+  'Face-smile',
+  'File',
+  'File-add',
+  'File-delete',
+  'File-download',
+  'File-jpg',
+  'File-music',
+  'File-pdf',
+  'File-text',
+  'File-upload',
+  'File-video',
+  'Filter',
+  'Filter-alt',
+  'Filter-settings',
+  'Freeze',
+  'Globe',
+  'Graduation-cap',
+  'Grid-alt',
+  'Headset',
+  'Heart',
+  'Heart-solid',
+  'Hexagon',
+  'Home',
+  'House-building',
+  'Huella',
+  'Id-badge',
+  'Image-add',
+  'Image-uploading',
+  'Inbox',
+  'Inbox-in',
+  'Inbox-out',
+  'Info',
+  'Instagram',
+  'Italic-text',
+  'Light-alarm',
+  'Light-bulb',
+  'like',
+  'Link',
+  'List',
+  'List-alt',
+  'List-check',
+  'List-number',
+  'list-table',
+  'Location-market',
+  'Lock',
+  'Map-marker',
+  'Map-marker-check',
+  'Map-marker-cross',
+  'Map-marker-edit',
+  'Map-marker-exclamation',
+  'Map-marker-home',
+  'Map-marker-minus',
+  'Map-marker-plus',
+  'Megaphone',
+  'Menu-burger',
+  'Menu-dots',
+  'Menu-dots-vertical',
+  'Minus',
+  'Minus-circle',
+  'Minus-small',
+  'Money',
+  'Money-1',
+  'Money-arrow-up',
+  'Money-arrow-up-alt',
+  'Money-bag',
+  'Money-coin',
+  'Money-Fee',
+  'Money-hand',
+  'Money-sending',
+  'Money-transfer',
+  'New',
+  'No-sangria',
+  'Notification',
+  'Page',
+  'Page-check',
+  'Page-edit',
+  'Palette',
+  'Paper-plane',
+  'Pencil',
+  'Phone',
+  'Phone-call',
+  'Phone-cross',
+  'Phone-pause',
+  'Phone-slash',
+  'Picture',
+  'Piggy-bank',
+  'Play',
+  'Play-alt',
+  'Plus-small',
+  'Point',
+  'Power',
+  'Print',
+  'Quarter-hour',
+  'quote',
+  'Recargar',
+  'Receipt',
+  'refresh',
+  'Rest-circle',
+  'Retirar',
+  'Rotate-right',
+  'Sale',
+  'Sangrar',
+  'Scan-barcode',
+  'Scan-qr',
+  'Search',
+  'Send-back',
+  'Settings',
+  'Share',
+  'Shield-check',
+  'Shop',
+  'Shopping-cart',
+  'Shopping-cart-add',
+  'Shopping-cart-arrow-rigth',
+  'Shopping-cart-check',
+  'Signal',
+  'Smartphone',
+  'Sparks IA',
+  'Spinner',
+  'Star',
+  'stoped',
+  'Table-columns',
+  'Telegram',
+  'Text',
+  'Ticket',
+  'Tickets',
+  'Time-fast',
+  'Time-past',
+  'Tooltip',
+  'Trash',
+  'Trophy',
+  'Truck-check',
+  'Truck-hand',
+  'Truck-move',
+  'Truck-side',
+  'Truck-unloading',
+  'Truck-uploading',
+  'Tshirt',
+  'unlike',
+  'Unlock',
+  'Upload',
+  'User',
+  'User-add',
+  'User-check',
+  'User-circle',
+  'User-community',
+  'User-delete',
+  'User-edit',
+  'User-forbidden',
+  'User-forbidden-alt',
+  'User-group',
+  'User-headset',
+  'User-lock',
+  'User-robot',
+  'User-time',
+  'Video',
+  'Volume',
+  'Volumen',
+  'Volumen-silent',
+  'Wallet',
+  'Warehouse',
+  'Warning-circle',
+  'Warning-triangle',
+  'Warranty',
+  'Whatsapp',
+  'x1',
+  'x2',
+  'Zoom-in',
+  'Zoom-out',
+] as const;
+
+export type IconName = (typeof ICON_NAMES)[number];

package/src/components-source/icon/icon.component.html

@@ -0,0 +1,3 @@
+<svg [attr.width]="width" [attr.height]="height" [ngClass]="{ spin: name === 'Spinner' }">
+  <use [attr.xlink:href]="'assets/icons/symbol/svg/sprite.css.svg#' + name"></use>
+</svg>

package/src/components-source/icon/icon.component.scss

@@ -0,0 +1,4 @@
+//spinner
+.spin {
+    animation: spin 1s linear infinite;
+  }

package/src/components-source/icon/icon.component.spec.ts

@@ -0,0 +1,304 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ElementRef, Renderer2 } from '@angular/core';
+import { IconComponent } from './icon.component';
+import { mockRenderer2, createMockElementRef } from '../../../test-utils/jest-mocks';
+
+describe('IconComponent', () => {
+  let component: IconComponent;
+  let fixture: ComponentFixture<IconComponent>;
+
+  beforeEach(async () => {
+    // Limpiar mocks antes de cada test
+    jest.clearAllMocks();
+
+    await TestBed.configureTestingModule({
+      imports: [IconComponent],
+      providers: [
+        { provide: Renderer2, useValue: mockRenderer2 },
+        { provide: ElementRef, useValue: createMockElementRef() },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.name).toBe('');
+      expect(component.width).toBe('24px');
+      expect(component.height).toBe('24px');
+      expect(component.color).toBe('currentColor');
+    });
+
+    it('should call setColors on ngOnInit', () => {
+      const spy = jest.spyOn(component, 'setColors');
+      component.ngOnInit();
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should accept input properties', () => {
+      component.name = 'home';
+      component.width = '32px';
+      component.height = '32px';
+      component.color = '#ff0000';
+
+      expect(component.name).toBe('home');
+      expect(component.width).toBe('32px');
+      expect(component.height).toBe('32px');
+      expect(component.color).toBe('#ff0000');
+    });
+  });
+
+  describe('Manejo de cambios', () => {
+    it('should call setColors when color changes and is not first change', () => {
+      const spy = jest.spyOn(component, 'setColors');
+
+      component.ngOnChanges({
+        color: {
+          currentValue: '#ff0000',
+          previousValue: 'currentColor',
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should not call setColors on first change', () => {
+      const spy = jest.spyOn(component, 'setColors');
+
+      component.ngOnChanges({
+        color: {
+          currentValue: '#ff0000',
+          previousValue: undefined,
+          firstChange: true,
+          isFirstChange: () => true,
+        },
+      });
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    it('should not call setColors when other properties change', () => {
+      const spy = jest.spyOn(component, 'setColors');
+
+      component.ngOnChanges({
+        name: {
+          currentValue: 'star',
+          previousValue: 'home',
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Configuración de colores', () => {
+    it('should set direct color when color starts with #', () => {
+      component.color = '#ff0000';
+      const rendererSpy = jest.spyOn(component['renderer'], 'setStyle');
+      component.setColors();
+
+      expect(rendererSpy).toHaveBeenCalledWith(component['el'].nativeElement, 'fill', '#ff0000');
+    });
+
+    it('should set CSS variable when color does not start with #', () => {
+      component.color = 'Primary-Primary-500';
+      const rendererSpy = jest.spyOn(component['renderer'], 'setStyle');
+      component.setColors();
+
+      expect(rendererSpy).toHaveBeenCalledWith(
+        component['el'].nativeElement,
+        'fill',
+        'var(--Primary-Primary-500)',
+      );
+    });
+
+    it('should handle currentColor token', () => {
+      component.color = 'currentColor';
+      const rendererSpy = jest.spyOn(component['renderer'], 'setStyle');
+      component.setColors();
+
+      expect(rendererSpy).toHaveBeenCalledWith(
+        component['el'].nativeElement,
+        'fill',
+        'var(--currentColor)',
+      );
+    });
+
+    it('should handle hex color with alpha', () => {
+      component.color = '#ff000080';
+      const rendererSpy = jest.spyOn(component['renderer'], 'setStyle');
+      component.setColors();
+
+      expect(rendererSpy).toHaveBeenCalledWith(component['el'].nativeElement, 'fill', '#ff000080');
+    });
+
+    it('should handle 3-digit hex color', () => {
+      component.color = '#f00';
+      const rendererSpy = jest.spyOn(component['renderer'], 'setStyle');
+      component.setColors();
+
+      expect(rendererSpy).toHaveBeenCalledWith(component['el'].nativeElement, 'fill', '#f00');
+    });
+
+    it('should handle design token colors', () => {
+      const designTokens = [
+        'Gray-Gray-500',
+        'Success-Success-400',
+        'Error-Error-600',
+        'Warning-Warning-300',
+      ];
+
+      designTokens.forEach((token) => {
+        component.color = token;
+        const rendererSpy = jest.spyOn(component['renderer'], 'setStyle');
+        component.setColors();
+
+        expect(rendererSpy).toHaveBeenCalledWith(
+          component['el'].nativeElement,
+          'fill',
+          `var(--${token})`,
+        );
+      });
+    });
+  });
+
+  describe('Casos edge', () => {
+    it('should handle empty color string', () => {
+      component.color = '';
+      component.setColors();
+
+      // Con string vacío no debe llamar setStyle
+      expect(mockRenderer2.setStyle).not.toHaveBeenCalled();
+    });
+
+    it('should handle null color', () => {
+      component.color = null;
+      component.setColors();
+
+      // Con null no debe llamar setStyle
+      expect(mockRenderer2.setStyle).not.toHaveBeenCalled();
+    });
+
+    it('should handle undefined color', () => {
+      component.color = undefined;
+      component.setColors();
+
+      // Con undefined no debe llamar setStyle
+      expect(mockRenderer2.setStyle).not.toHaveBeenCalled();
+    });
+
+    it('should handle color that starts with # but is invalid', () => {
+      component.color = '#xyz';
+      const rendererSpy = jest.spyOn(component['renderer'], 'setStyle');
+      component.setColors();
+
+      expect(rendererSpy).toHaveBeenCalledWith(component['el'].nativeElement, 'fill', '#xyz');
+    });
+  });
+
+  describe('Propiedades de tamaño', () => {
+    it('should handle custom width and height', () => {
+      component.width = '48px';
+      component.height = '48px';
+
+      expect(component.width).toBe('48px');
+      expect(component.height).toBe('48px');
+    });
+
+    it('should handle percentage sizes', () => {
+      component.width = '100%';
+      component.height = '50%';
+
+      expect(component.width).toBe('100%');
+      expect(component.height).toBe('50%');
+    });
+
+    it('should handle rem units', () => {
+      component.width = '2rem';
+      component.height = '1.5rem';
+
+      expect(component.width).toBe('2rem');
+      expect(component.height).toBe('1.5rem');
+    });
+
+    it('should handle em units', () => {
+      component.width = '1.5em';
+      component.height = '1.5em';
+
+      expect(component.width).toBe('1.5em');
+      expect(component.height).toBe('1.5em');
+    });
+  });
+
+  describe('Nombres de iconos', () => {
+    it('should handle standard icon names', () => {
+      const iconNames = ['home', 'user', 'settings', 'search', 'close'];
+
+      iconNames.forEach((name) => {
+        component.name = name;
+        expect(component.name).toBe(name);
+      });
+    });
+
+    it('should handle kebab-case icon names', () => {
+      component.name = 'arrow-up';
+      expect(component.name).toBe('arrow-up');
+    });
+
+    it('should handle camelCase icon names', () => {
+      component.name = 'arrowDown';
+      expect(component.name).toBe('arrowDown');
+    });
+
+    it('should handle snake_case icon names', () => {
+      component.name = 'arrow_left';
+      expect(component.name).toBe('arrow_left');
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should work with all properties configured', () => {
+      component.name = 'custom-icon';
+      component.width = '64px';
+      component.height = '64px';
+      component.color = '#4CAF50';
+
+      const rendererSpy = jest.spyOn(component['renderer'], 'setStyle');
+      component.setColors();
+
+      expect(component.name).toBe('custom-icon');
+      expect(component.width).toBe('64px');
+      expect(component.height).toBe('64px');
+      expect(component.color).toBe('#4CAF50');
+      expect(rendererSpy).toHaveBeenCalledWith(component['el'].nativeElement, 'fill', '#4CAF50');
+    });
+
+    it('should handle multiple color changes', () => {
+      const colors = ['#ff0000', 'Primary-500', '#00ff00', 'Secondary-300'];
+
+      colors.forEach((color) => {
+        component.color = color;
+        const rendererSpy = jest.spyOn(component['renderer'], 'setStyle');
+        component.setColors();
+
+        const expectedValue = color.startsWith('#') ? color : `var(--${color})`;
+        expect(rendererSpy).toHaveBeenCalledWith(
+          component['el'].nativeElement,
+          'fill',
+          expectedValue,
+        );
+      });
+    });
+  });
+});

package/src/components-source/icon/icon.component.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  Input,
+  ElementRef,
+  Renderer2,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+
+@Component({
+  selector: 'app-icon',
+  standalone: true,
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss'],
+  imports: [CommonModule],
+})
+export class IconComponent implements OnInit, OnChanges {
+  // Nombre del ícono, debe coincidir con el "id" en el sprite SVG
+  @Input() name: string = '';
+  // Atributos opcionales para controlar el tamaño y color
+  @Input() width: string = '24px';
+  @Input() height: string = '24px';
+  @Input() color: string = 'currentColor';
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2,
+  ) {}
+
+  ngOnInit() {
+    this.setColors();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['color'] && !changes['color'].firstChange) this.setColors();
+  }
+
+  setColors() {
+    if (!this.color) {
+      // Si no hay color, no hacer nada
+      return;
+    }
+
+    if (this.color.startsWith('#')) {
+      // Si es un color directo (ej: "#ff0000"), lo usa normal
+      this.renderer.setStyle(this.el.nativeElement, 'fill', this.color);
+    } else {
+      // Si el color es un token, usa la variable CSS
+      this.renderer.setStyle(this.el.nativeElement, 'fill', `var(--${this.color})`);
+    }
+  }
+}