@dropi/ui-components 1.0.0

package/src/components-source/file-upload-progress-bar/file-upload-progress-bar.component.stories.ts

@@ -0,0 +1,149 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+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';
+import { FileUploadProgressBarComponent } from './file-upload-progress-bar.component';
+import { clear } from 'console';
+
+registerLocaleData(localeEsCo);
+
+const mockSettingsService = {
+  dropi_loginResult: {
+    configurations: [
+      {
+        official_currency: 'COP',
+        digits_info_currency: '1.0-0',
+      },
+    ],
+  },
+};
+
+const meta: Meta<FileUploadProgressBarComponent> = {
+  title: 'UI Dropi/File Upload Progress Bar', // Cambié el título para que sea más descriptivo
+  component: FileUploadProgressBarComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+      providers: [
+        { provide: SettingsService, useValue: mockSettingsService },
+        { provide: LOCALE_ID, useValue: 'es-Co' },
+      ],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    textFile: {
+      control: { type: 'text' },
+      description: 'Nombre del archivo que se muestra',
+      table: {
+        defaultValue: { summary: 'Nombre del archivo.xlsx' },
+      },
+    },
+    progress: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Progreso de carga del archivo (0-100)',
+      table: {
+        defaultValue: { summary: '0' },
+      },
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['image', 'file'],
+      description: 'Tipo de archivo a mostrar (imagen o archivo)',
+      table: {
+        defaultValue: { summary: 'file' },
+      },
+    },
+    ulrImage: {
+      control: { type: 'text' },
+      description: 'URL de la imagen para previsualización (solo aplicable si type="image")',
+      table: {
+        defaultValue: { summary: 'assets/img/LOGO-250-PX.png' },
+      },
+    },
+    isPreview: {
+      control: { type: 'boolean' },
+      description: 'Indica si se muestra la previsualización',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+    // Outputs (solo documentación)
+
+    deleteFile: {
+      action: 'deleteFile',
+      description:
+        'Evento emitido cuando el usuario hace clic en el botón de eliminar archivo. No lleva payload asociado.',
+      table: {
+        category: 'Outputs',
+        type: { summary: 'EventEmitter<void>' },
+      },
+    },
+    uploadComplete: {
+      action: 'uploadComplete',
+      description:
+        'Evento emitido automáticamente cuando el progreso de carga alcanza el 100%. No lleva payload asociado.',
+      table: {
+        category: 'Outputs',
+        type: { summary: 'EventEmitter<void>' },
+      },
+    },
+    viewFile: {
+      action: 'viewFile',
+      description:
+        'Evento emitido cuando el usuario hace clic en el botón de visualización/previsualización del archivo. No lleva payload asociado.',
+      table: {
+        category: 'Outputs',
+        type: { summary: 'EventEmitter<void>' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<FileUploadProgressBarComponent>;
+
+const createStory = (args: any): Story => ({
+  render: (context) => ({
+    props: { ...context, ...args },
+    template: `<div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box;">
+        <app-file-upload-progress-bar
+          style="width: 300px;"
+          [progress]="progress"
+          [textFile]="textFile"
+          [status]="status"
+          [type]="type"
+          [isPreview]="isPreview"
+          [clearable]="clearable"
+          (deleteFile)="deleteFile()"
+          (uploadComplete)="uploadComplete()"
+          (viewFile)="viewFile()"
+        ></app-file-upload-progress-bar>
+    </div>`,
+  }),
+  args,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/%5BWEB%5D-components?node-id=2-391&p=f&t=zaCu6dbCrR66dwZb-0',
+    },
+  },
+});
+
+export const Default = createStory({
+  progress: 50,
+  textFile: 'document.pdf',
+  status: 'uploading',
+});
+
+export const Image = createStory({
+  progress: 100,
+  textFile: 'document.pdf',
+  status: 'uploading',
+  type: 'image',
+  isPreview: true,
+});

package/src/components-source/file-upload-progress-bar/file-upload-progress-bar.component.ts

@@ -0,0 +1,89 @@
+import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { IconComponent } from '../icon/icon.component';
+import { CommonModule } from '@angular/common';
+import { DropiSkeletonComponent } from '../dropi-skeleton/dropi-skeleton.component';
+
+@Component({
+  selector: 'app-file-upload-progress-bar',
+  templateUrl: './file-upload-progress-bar.component.html',
+  styleUrls: ['./file-upload-progress-bar.component.scss'],
+  standalone: true,
+  imports: [IconComponent, CommonModule, DropiSkeletonComponent],
+})
+export class FileUploadProgressBarComponent implements OnInit {
+  constructor() {}
+  @Input() textFile: string = 'Nombre del archivo.xlsx';
+  @Input() progress: number = 0;
+  @Input() type: 'image' | 'file' = 'file';
+  @Input() ulrImage: string = 'assets/img/LOGO-250-PX.png';
+  @Input() isPreview: boolean = true;
+
+  @Output() deleteFile: EventEmitter<any> = new EventEmitter<any>();
+  @Output() uploadComplete: EventEmitter<any> = new EventEmitter<any>();
+  @Output() viewFile: EventEmitter<any> = new EventEmitter<any>();
+
+  fileExtension: string = '';
+
+  ngOnInit() {
+    this.checkProgress();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['progress']) {
+      this.checkProgress();
+    }
+
+    if (changes['textFile']) {
+      this.fileExtension = this.getFileExtensionInfo(this.textFile).extension;
+      this.type = this.getFileExtensionInfo(this.textFile).isImage ? 'image' : 'file';
+    }
+  }
+
+  checkProgress() {
+    if (this.progress === 100) {
+      this.uploadComplete.emit();
+    }
+  }
+
+  deleteFileAction() {
+    this.deleteFile.emit();
+  }
+
+  viewEmiter() {
+    this.viewFile.emit();
+  }
+
+  /**
+   * Extrae la extensión de un archivo y determina si es una imagen
+   * @param fileName Nombre del archivo (ej: 'documento.pdf' o 'foto.jpg')
+   * @returns Objeto con la extensión y un booleano indicando si es imagen
+   */
+
+  getFileExtensionInfo(fileName: string): {
+    extension: string;
+    isImage: boolean;
+  } {
+    // Extraer la extensión (todo después del último punto)
+    const lastDotIndex = fileName.lastIndexOf('.');
+    const extension = lastDotIndex > 0 ? fileName.substring(lastDotIndex + 1).toLowerCase() : '';
+
+    // Lista de extensiones de imagen comunes (puedes añadir más si necesitas)
+    const imageExtensions = [
+      'jpg',
+      'jpeg',
+      'png',
+      'gif',
+      'bmp',
+      'webp',
+      'svg',
+      'tiff',
+      'ico',
+      'jfif',
+    ];
+
+    return {
+      extension,
+      isImage: imageExtensions.includes(extension),
+    };
+  }
+}

package/src/components-source/foundations/dropi-border-radius-demo/dropi-border-radius-demo.component.scss

@@ -0,0 +1,32 @@
+.border-demo {
+  padding: 16px;
+  border: 1px solid #dee2e6;
+  background-color: var(--Gray-Gray-300);
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  span {
+    white-space: nowrap;
+  }
+}
+
+.border-1 {
+  border-radius: var(--Border-1);
+}
+
+.border-2 {
+  border-radius: var(--Border-2);
+}
+
+.border-3 {
+  border-radius: var(--Border-3);
+}
+
+.border-4 {
+  border-radius: var(--Border-4);
+}
+
+.border-5 {
+  border-radius: var(--Border-5);
+}

package/src/components-source/foundations/dropi-border-radius-demo/dropi-border-radius-demo.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'dropi-border-radius-demo',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="border-demo" [class]="'border-' + borderRadius">
+      <span>Demo Border Radius</span>
+    </div>
+  `,
+  styleUrls: ['./dropi-border-radius-demo.component.scss'],
+})
+export class DropiBorderRadiusDemoComponent {
+  @Input() borderRadius: '1' | '2' | '3' | '4' | '5' = '1';
+}

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

@@ -0,0 +1,183 @@
+<div class="foundations">
+  <h1>🎨 {{ 'foundations' | translate }}</h1>
+
+  <p class="Body-M-Regular">
+    {{ 'visual examples of the use of design tokens typography iconography and feedback styles' | translate }}
+  </p>
+
+  <!--Logo-->
+  <section>
+    <h2>🏷️ {{ 'logo' | translate }}</h2>
+    <p class="Body-M-Regular">{{ 'dropi logo' | translate }}</p>
+    <div class="logo-list">
+      <dropi-logo [urlLogo]="'url-rota'" theme="light" size="large"></dropi-logo>
+      <dropi-logo [urlLogo]="'assets/img/logo-dropi.svg'" theme="light" size="large"></dropi-logo>
+      <dropi-logo
+        [urlLogo]="'assets/img/logo-dropi-small.svg'"
+        theme="light"
+        size="small"
+      ></dropi-logo>
+    </div>
+  </section>
+
+  <!-- Tipografías -->
+  <section>
+    <h2>🅰️ {{ 'typography' | translate }}</h2>
+    <h1>{{ 'heading level 1' | translate }}</h1>
+    <h2>{{ 'heading level 2' | translate }}</h2>
+    <h3>{{ 'heading level 3' | translate }}</h3>
+    <h4>{{ 'heading level 4' | translate }}</h4>
+    <h5>{{ 'heading level 5' | translate }}</h5>
+    <div class="typography-list">
+      <p class="Caption-M">
+        <strong>Caption-M:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+        quis aliquam nibh...
+      </p>
+
+      <p class="Body-L-Medium">
+        <strong>Body-L-Medium:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Cras quis aliquam nibh...
+      </p>
+
+      <p class="Label-S">
+        <strong>Label-S:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis
+        aliquam nibh...
+      </p>
+    </div>
+  </section>
+
+  <!-- Iconografía -->
+  <section>
+    <h2 style="margin-bottom: 1rem">🔠 {{ 'iconography' | translate }}</h2>
+    <p class="Body-M-Regular">{{ 'tokens can be used as attribute color values' | translate }}</p>
+    <div class="icon-list">
+      <app-icon name="Add-circle" width="32px" height="32px" color="Primary-Primary-500"></app-icon>
+      <app-icon
+        name="Volumen-silent"
+        width="32px"
+        height="32px"
+        color="Primary-Primary-500"
+      ></app-icon>
+      <app-icon name="Volumen" width="32px" height="32px" color="Primary-Primary-500"></app-icon>
+      <app-icon name="like" width="32px" height="32px" color="Primary-Primary-500"></app-icon>
+      <app-icon
+        name="Align-center-text"
+        width="32px"
+        height="32px"
+        color="Primary-Primary-500"
+      ></app-icon>
+      <app-icon
+        name="Volumen-silent"
+        width="32px"
+        height="32px"
+        color="Primary-Primary-500"
+      ></app-icon>
+      <app-icon
+        name="Alarm-clock"
+        width="32px"
+        height="32px"
+        color="Secondary-Secondary-500"
+      ></app-icon>
+      <app-icon name="Apps" width="32px" height="32px" color="Neutral-Black"></app-icon>
+      <app-icon name="Tshirt" width="32px" height="32px" color="Secondary-Secondary-500"></app-icon>
+      <app-icon
+        name="Heart-solid"
+        width="32px"
+        height="32px"
+        color="Secondary-Secondary-500"
+      ></app-icon>
+      <app-icon name="Page" width="32px" height="32px" color="Secondary-Secondary-500"></app-icon>
+      <app-icon
+        name="Chat-bars-grow"
+        width="32px"
+        height="32px"
+        color="Secondary-Secondary-500"
+      ></app-icon>
+    </div>
+  </section>
+
+  <!-- Estados de Feedback -->
+  <section>
+    <h2>✅ {{ 'feedback' | translate }}</h2>
+    <p class="neutral">{{ 'this is a neutral paragraph' | translate }}</p>
+    <p class="success">{{ 'success message' | translate }}</p>
+    <p class="error">{{ 'error message' | translate }}</p>
+  </section>
+
+  <!-- Banderas -->
+  <section>
+    <h2>🌎 {{ 'country flags' | translate }}</h2>
+    <p class="Body-M-Regular">{{ 'representation of flags using circle and rectangle styles' | translate }}</p>
+    <div class="icon-list">
+      <app-country-flags [country]="'CO'" [style]="'circle'"></app-country-flags>
+      <app-country-flags [country]="'ES'" [style]="'rectangle'"></app-country-flags>
+    </div>
+  </section>
+
+  <!-- Avatares -->
+  <section>
+    <h2>👤 {{ 'avatars' | translate }}</h2>
+    <p class="Body-M-Regular">{{ 'representation of avatars' | translate }}</p>
+    <div class="icon-list">
+      <dropi-avatars
+        [image]="'assets/images/delivery/servientrega.png'"
+        [type]="'transport'"
+      ></dropi-avatars>
+      <dropi-avatars [image]="'erro en el path'" [type]="'transport'"></dropi-avatars>
+      <dropi-avatars [image]="'assets/images/users/avatar-6.jpg'" [type]="'users'"></dropi-avatars>
+      <dropi-avatars [image]="'assets/images/users/avatar-1.jpg'" [type]="'users'"></dropi-avatars>
+      <dropi-avatars [initials]="'MCSP'" [type]="'users'"></dropi-avatars>
+      <dropi-avatars [initials]="'D'" [type]="'users'"></dropi-avatars>
+      <dropi-avatars [initials]="'+2'" [type]="'counter'"></dropi-avatars>
+      <dropi-avatars
+        [image]="
+          'https://d39ru7awumhhs2.cloudfront.net/colombia/user/315635/logo/1729173015LOGO.jpg'
+        "
+        [type]="'supplier'"
+      ></dropi-avatars>
+      <dropi-avatars
+        [image]="'assets/img/payment-processors/global-66.png'"
+        [type]="'payment'"
+      ></dropi-avatars>
+      <dropi-avatars
+        [image]="'assets/img/payment-processors/pse.png'"
+        [type]="'payment'"
+      ></dropi-avatars>
+    </div>
+  </section>
+
+  <!-- Ilustraciones -->
+  <section>
+    <h2>🖼️ {{ 'illustrations' | translate }}</h2>
+    <p class="Body-M-Regular">{{ 'representation of illustrations' | translate }}</p>
+    <div class="icon-list">
+      <dropi-ilustration-icon [type]="'dropi'" [state]="'warning'"></dropi-ilustration-icon>
+      <dropi-ilustration-icon [type]="'dropi'" [state]="'success'"></dropi-ilustration-icon>
+      <dropi-ilustration-icon [type]="'dropi'" [state]="'loading'"></dropi-ilustration-icon>
+      <dropi-ilustration-icon [type]="'dropi'" [state]="'error'"></dropi-ilustration-icon>
+    </div>
+    <div class="icon-list">
+      <dropi-ilustration-icon [type]="'mb'" [state]="'success'"></dropi-ilustration-icon>
+      <dropi-ilustration-icon [type]="'mb'" [state]="'error'"></dropi-ilustration-icon>
+      <dropi-ilustration-icon [type]="'mb'" [state]="'info'"></dropi-ilustration-icon>
+      <dropi-ilustration-icon [type]="'mb'" [state]="'warning'"></dropi-ilustration-icon>
+    </div>
+    <div class="icon-list">
+      <dropi-ilustration-icon
+        [type]="'insignia'"
+        [stateInsignia]="'verified'"
+        [tagProduct]="false"
+      ></dropi-ilustration-icon>
+      <dropi-ilustration-icon
+        [type]="'insignia'"
+        [stateInsignia]="'premium'"
+        [tagProduct]="false"
+      ></dropi-ilustration-icon>
+      <dropi-ilustration-icon
+        [type]="'insignia'"
+        [stateInsignia]="'exclusive'"
+        [tagProduct]="false"
+      ></dropi-ilustration-icon>
+    </div>
+  </section>
+</div>

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

@@ -0,0 +1,31 @@
+.foundations {
+  padding: 40px;
+
+  .neutral {
+    color: var(--Neutral-Black-700);
+    fill: var(--Error-Error-300);
+  }
+  .success {
+    color: var(--Success-Success-700);
+  }
+  .error {
+    color: var(--Error-Error-500);
+  }
+}
+.typography-list {
+  margin: 30px 0;
+}
+.icon-list {
+  margin: 0 0 31px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  align-items: center;
+}
+.logo-list {
+  margin: 0 0 31px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  align-items: center;
+}

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

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IconComponent } from '../icon/icon.component';
+import { CountryFlagsComponent } from '../country-flags/country-flags.component';
+import { DropiAvatarsComponent } from '../dropi-avatars/dropi-avatars.component';
+import { DropiIlustrationIconComponent } from '../dropi-ilustration-icon/dropi-ilustration-icon.component';
+import { DropiLogoComponent } from '../dropi-logo/dropi-logo.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-foundations',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IconComponent,
+    CountryFlagsComponent,
+    DropiAvatarsComponent,
+    DropiIlustrationIconComponent,
+    DropiLogoComponent,
+    TranslateModule
+  ],
+  templateUrl: './foundations.component.html',
+  styleUrls: ['./foundations.component.scss'],
+})
+export class FoundationsComponent {}