@dropi/ui-components 1.0.0

package/src/components-source/input/input.component.stories.ts

@@ -0,0 +1,269 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { InputComponent } from './input.component';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { SettingsService } from '@app/services/setting.service';
+import { LOCALE_ID } from '@angular/core';
+import { registerLocaleData } from '@angular/common';
+import localeEsCo from '@angular/common/locales/es-CO';
+
+registerLocaleData(localeEsCo);
+
+const mockSettingsService = {
+  dropi_loginResult: {
+    configurations: [
+      {
+        official_currency: 'COP',
+        digits_info_currency: '1.0-0',
+      },
+    ],
+  },
+};
+
+/**
+ * # Input Component
+ *
+ * A flexible and feature-rich text input component for forms.
+ * Supports various input types including text, password, money, and numeric inputs.
+ *
+ * ## Features
+ * - **Form integration**: Works seamlessly with Angular Reactive Forms
+ * - **Input types**: Standard text, password with toggle visibility, money with currency formatting
+ * - **Validation**: Built-in error display for form validation
+ * - **Helper text**: Optional helper text below the input
+ * - **Icons**: Support for prefix icons with customizable colors
+ * - **Labels**: Fixed or floating label options
+ *
+ * ## Usage
+ * ```html
+ * <app-input
+ *   [inputProperties]="{
+ *     label: 'Email',
+ *     placeholder: 'Enter your email',
+ *     formControl: emailControl,
+ *     maxLength: 100
+ *   }"
+ *   [disabled]="false"
+ *   [fixedLabel]="true">
+ * </app-input>
+ * ```
+ */
+const meta: Meta<InputComponent> = {
+  title: 'UI Dropi/Input',
+  component: InputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+      providers: [
+        { provide: SettingsService, useValue: mockSettingsService },
+        { provide: LOCALE_ID, useValue: 'es-Co' },
+      ],
+    }),
+  ],
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A flexible and feature-rich text input component for forms.
+Supports various input types including text, password, money, and numeric inputs.
+
+### Key Features
+- **Form integration**: Works seamlessly with Angular Reactive Forms
+- **Input types**: Standard text, password with toggle visibility, money with currency formatting
+- **Validation**: Built-in error display for form validation
+- **Helper text**: Optional helper text below the input
+- **Icons**: Support for prefix icons with customizable colors
+- **Labels**: Fixed or floating label options
+        `,
+      },
+    },
+  },
+  argTypes: {
+    inputProperties: {
+      control: 'object',
+      description:
+        'Configuration object containing all input properties (label, placeholder, formControl, etc.)',
+      table: {
+        type: { summary: 'InputProperties' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the input field when set to true',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    fixedLabel: {
+      control: 'boolean',
+      description: 'When true, the label stays fixed above the input instead of floating',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<InputComponent>;
+
+const createStory = (args: any, storyDescription?: string): Story => ({
+  render: () => ({
+    props: args,
+    template: `
+      <app-input [inputProperties]="inputProperties" [fixedLabel]="fixedLabel" [disabled]="disabled"></app-input>
+    `,
+  }),
+  args,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/%5BWEB%5D-components?node-id=2-391&p=f&t=zaCu6dbCrR66dwZb-0',
+    },
+    docs: {
+      description: {
+        story: storyDescription,
+      },
+    },
+  },
+});
+
+const invalidControl = new FormControl('', Validators.required);
+invalidControl.markAsTouched();
+invalidControl.markAsDirty();
+
+/** Default input with label and placeholder */
+export const Default = createStory(
+  {
+    inputProperties: {
+      label: 'Example label',
+      placeholder: 'Example placeholder',
+      formControl: new FormControl('', Validators.required),
+      isPasswordInput: false,
+      isMoneyInput: false,
+      maxLength: 10,
+    },
+    disabled: false,
+    fixedLabel: true,
+  },
+  'Basic input field with a fixed label and placeholder text.',
+);
+
+/** Required input field */
+export const Required = createStory(
+  {
+    inputProperties: {
+      ...Default.args.inputProperties,
+      formControl: new FormControl('', Validators.required),
+    },
+    disabled: false,
+  },
+  'Input field marked as required. Shows validation error when left empty and touched.',
+);
+
+/** Disabled input field */
+export const Disabled = createStory(
+  {
+    inputProperties: {
+      ...Default.args.inputProperties,
+      formControl: new FormControl('Example value'),
+      textHelper: 'Example helper for input',
+    },
+    disabled: true,
+  },
+  'Input field in disabled state. Users cannot interact with or modify the value.',
+);
+
+/** Input with validation errors */
+export const WithErrors = createStory(
+  {
+    inputProperties: {
+      ...Default.args.inputProperties,
+      formControl: invalidControl,
+      icon: 'Heart-solid',
+      iconColor: 'Primary-Primary-500',
+      textHelper: 'Example helper for input',
+    },
+    disabled: false,
+    fixedLabel: true,
+  },
+  'Input field showing validation error state. The error appears when the field is touched and invalid.',
+);
+
+/** Input with prefix icon */
+export const WithIcon = createStory(
+  {
+    inputProperties: {
+      ...Default.args.inputProperties,
+      formControl: new FormControl('Dropi'),
+      icon: 'Heart-solid',
+      iconColor: 'Primary-Primary-500',
+    },
+    disabled: false,
+  },
+  'Input field with a prefix icon. Icons help users understand the expected input type.',
+);
+
+/** Input with helper text */
+export const WithHelper = createStory(
+  {
+    inputProperties: { ...WithIcon.args.inputProperties, textHelper: 'Example helper for input' },
+    disabled: false,
+  },
+  'Input field with helper text below. Use helper text to provide additional context or instructions.',
+);
+
+/** Currency/Money input with formatting */
+export const MoneyInput = createStory(
+  {
+    inputProperties: {
+      ...Default.args.inputProperties,
+      formControl: new FormControl('100000'),
+      isMoneyInput: true,
+      maxLength: null,
+    },
+    disabled: false,
+  },
+  'Money input that automatically formats values with currency symbol and thousand separators.',
+);
+
+/** Thousand separator input without currency symbol */
+export const ThousandSeparatorInput = createStory(
+  {
+    inputProperties: {
+      ...Default.args.inputProperties,
+      formControl: new FormControl('100000'),
+      isThousandSeparator: true,
+      maxLength: null,
+    },
+    disabled: false,
+  },
+  'Numeric input with thousand separators but without currency symbol. Useful for quantities or IDs.',
+);
+
+/** Password input with visibility toggle */
+export const PasswordInput = createStory(
+  {
+    inputProperties: {
+      ...Default.args.inputProperties,
+      isPasswordInput: true,
+      textHelper: 'Example helper for password input',
+    },
+    disabled: false,
+    fixedLabel: true,
+  },
+  'Password input with toggle button to show/hide the password. Includes strength indicator.',
+);
+
+/** Numeric-only input */
+export const NumericInput = createStory(
+  {
+    inputProperties: { ...Default.args.inputProperties, isNumericInput: true },
+    disabled: false,
+  },
+  'Input that only accepts numeric characters. Useful for phone numbers, quantities, etc.',
+);

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

@@ -0,0 +1,119 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges, SimpleChange } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InputProperties } from '@app/utilities/interfaces/ui/input-interface';
+import { Validators, ReactiveFormsModule } from '@angular/forms';
+import { IconComponent } from '../icon/icon.component';
+import { ThousandSeparatorDirective } from '@app/utilities/directives/thousand-separator.directive';
+import { TranslateModule } from '@ngx-translate/core';
+import { OnlyNumbersDirective } from '@app/utilities/directives/only-numbers.directive';
+import { OnlyLettersDirective } from '@app/utilities/directives/only-letters.directive';
+
+@Component({
+  selector: 'app-input',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    IconComponent,
+    ThousandSeparatorDirective,
+    TranslateModule,
+    OnlyNumbersDirective,
+    OnlyLettersDirective,
+  ],
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.scss'],
+})
+export class InputComponent implements OnInit, OnChanges {
+  /**
+   * Define las propiedades necesarias para un campo de entrada (`input`).
+   *
+   * Cada campo debe contener las siguientes propiedades:
+   * - `formControl`: Control de formulario asociado al campo.
+   * - `label`: Texto descriptivo que se mostrará como etiqueta.
+   * - `placeholder`: Texto de ejemplo dentro del campo.
+   * - `maxLength`: Número máximo de caracteres permitidos.
+   *
+   * Propiedades opcionales:
+   * - `textHelper`: Texto de ayuda que se mostrará debajo del campo.
+   * - `icon`: Nombre del icono a mostrar dentro del input.
+   * - `iconColor`: Color aplicado al icono del input.
+   * - `isMoneyInput`: Indica si debe aplicarse una directiva para separar valores.
+   * - `isPasswordInput: Indica si el input debe tener comportamiento de campo de contraseña`
+   * - `isNumericInput: Indica si el input solo acepta caracteres numericos`
+   * @type {InputProperties}
+   */
+  @Input() public inputProperties: InputProperties;
+  /**
+   * Indica si se debe mostrar deshabilitiado el input.
+   *
+   * Valor por defecto: `false`.
+   *
+   * @type {boolean}
+   */
+  @Input() public disabled: boolean = false;
+  /**
+   * Indica si se debe mostrar el asterisco de obligatorio basado en si es requerido el formControl
+   *
+   * Valor por defecto: `true`.
+   *
+   * @type {boolean}
+   */
+  @Input() public showObligatoryAsterisk: boolean = true;
+
+  /**
+   * Indica si se debe mostrar el label fijo en la parte superior del input
+   *
+   * Valor por defecto: `false`.
+   *
+   * @type {boolean}
+   */
+  @Input() public fixedLabel: boolean = false;
+  /**
+   * Indica si se debe mostrar el asterisco de obligatorio basado en si es requerido el formControl y si showObligatoryAsterisk es true
+   *
+   * Valor por defecto: `false`.
+   *
+   * @type {boolean}
+   */
+  public showAsterisk: boolean = false;
+  /**
+   * Indica si se debe ocultar los caracteres dentro del input
+   *
+   * Valor por defecto: `false`.
+   *
+   * @type {boolean}
+   */
+  public showPassword: boolean = false;
+
+  ngOnInit() {
+    this.validateDisabled();
+    this.addObligatoryAsterisk();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['disabled']) {
+      const disabledChange = changes['disabled'];
+    }
+  }
+
+  addObligatoryAsterisk() {
+    this.showAsterisk =
+      this.showObligatoryAsterisk &&
+      this.inputProperties.formControl.hasValidator(Validators.required);
+  }
+
+  isRequired() {
+    return this.inputProperties.formControl.hasValidator(Validators.required);
+  }
+
+  validateDisabled() {
+    if (this.disabled) {
+      this.inputProperties.formControl.disable();
+    }
+  }
+
+  showOrHidePassword() {
+    if (this.disabled || this.inputProperties.formControl.disabled) return;
+    this.showPassword = !this.showPassword;
+  }
+}

package/src/components-source/lottie-loader/lottie-loader.component.html

@@ -0,0 +1,16 @@
+<div class="loader-container" *ngIf="visible">
+  <div class="lottie-animation">
+    <dotlottie-player
+      [src]="loadingAnimation"
+      background="transparent"
+      speed="1"
+      style="width: 200px; height: auto"
+      loop
+      autoplay
+    ></dotlottie-player>
+  </div>
+  <div class="loader-text">
+    <h3>{{ title }}</h3>
+    <p>{{ message }}</p>
+  </div>
+</div>

package/src/components-source/lottie-loader/lottie-loader.component.scss

@@ -0,0 +1,32 @@
+.loader-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 100%;
+}
+
+.lottie-animation {
+  width: 80%;
+  max-width: 200px;
+  display: flex;
+  justify-content: center;
+}
+
+.loader-text {
+  text-align: center;
+
+  h3 {
+    color: var(--Gray-Gray-1, #1f2937);
+    font-size: 16px; // reducido de 19px a 16px
+    font-weight: 500;
+  }
+
+  p {
+    color: var(--Gray-Gray-2, #74798d);
+    font-size: 12px; // reducido de 14px a 12px
+    margin-top: 6px;
+  }
+}

package/src/components-source/lottie-loader/lottie-loader.component.spec.ts

@@ -0,0 +1,103 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LottieLoaderComponent } from './lottie-loader.component';
+
+describe('LottieLoaderComponent', () => {
+  let component: LottieLoaderComponent;
+  let fixture: ComponentFixture<LottieLoaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LottieLoaderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LottieLoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.visible).toBe(true);
+      expect(component.loadingAnimation).toBe('/assets/lottie-files/loading.json');
+      expect(component.title).toBe('Cargando...');
+      expect(component.message).toBe('Por favor, espere un momento');
+    });
+  });
+
+  describe('Propiedad visible', () => {
+    it('should accept true value', () => {
+      component.visible = true;
+      expect(component.visible).toBe(true);
+    });
+
+    it('should accept false value', () => {
+      component.visible = false;
+      expect(component.visible).toBe(false);
+    });
+  });
+
+  describe('Propiedad loadingAnimation', () => {
+    it('should accept custom animation path', () => {
+      component.loadingAnimation = '/assets/lottie-files/custom.json';
+      expect(component.loadingAnimation).toBe('/assets/lottie-files/custom.json');
+    });
+  });
+
+  describe('Propiedad title', () => {
+    it('should accept custom title', () => {
+      component.title = 'Custom Loading Title';
+      expect(component.title).toBe('Custom Loading Title');
+    });
+
+    it('should accept empty string', () => {
+      component.title = '';
+      expect(component.title).toBe('');
+    });
+  });
+
+  describe('Propiedad message', () => {
+    it('should accept custom message', () => {
+      component.message = 'Custom loading message';
+      expect(component.message).toBe('Custom loading message');
+    });
+
+    it('should accept empty string', () => {
+      component.message = '';
+      expect(component.message).toBe('');
+    });
+  });
+
+  describe('ngOnInit', () => {
+    it('should be called on initialization', () => {
+      const spy = jest.spyOn(component, 'ngOnInit');
+      component.ngOnInit();
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Combinaciones de propiedades', () => {
+    it('should work with all custom properties', () => {
+      component.visible = true;
+      component.loadingAnimation = '/custom/path.json';
+      component.title = 'Processing';
+      component.message = 'Please wait while we process your request';
+
+      fixture.detectChanges();
+
+      expect(component.visible).toBe(true);
+      expect(component.loadingAnimation).toBe('/custom/path.json');
+      expect(component.title).toBe('Processing');
+      expect(component.message).toBe('Please wait while we process your request');
+    });
+
+    it('should hide when visible is false', () => {
+      component.visible = false;
+      fixture.detectChanges();
+      expect(component.visible).toBe(false);
+    });
+  });
+});

package/src/components-source/lottie-loader/lottie-loader.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NgIf } from '@angular/common';
+
+@Component({
+    selector: 'app-lottie-loader',
+    templateUrl: './lottie-loader.component.html',
+    styleUrls: ['./lottie-loader.component.scss'],
+    standalone: true,
+    imports: [NgIf]
+})
+export class LottieLoaderComponent implements OnInit {
+  @Input() visible: boolean = true;
+  @Input() loadingAnimation: string = '/assets/lottie-files/loading.json';
+  @Input() title: string = 'Cargando...';
+  @Input() message: string = 'Por favor, espere un momento';
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}