@dropi/ui-components 1.0.0

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

@@ -0,0 +1,203 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { Routes } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TabsComponent } from './tabs.component';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dummy',
+  template: ``,
+})
+export class DummyComponent {}
+
+const routes: Routes = [
+  { path: 'tab1', component: DummyComponent },
+  { path: 'tab2', component: DummyComponent },
+  { path: '**', redirectTo: 'tab1' },
+];
+
+/**
+ * # Tabs Component
+ *
+ * A navigation component for organizing content into multiple tabbed sections.
+ * Tabs allow users to switch between different views within the same context.
+ *
+ * ## Features
+ * - **Route integration**: Works with Angular Router for navigation
+ * - **Completion indicators**: Optional icons showing completion status
+ * - **Flexible configuration**: Customizable labels and routes
+ * - **Accessible**: Keyboard navigable with ARIA support
+ *
+ * ## Usage
+ * ```html
+ * <app-tabs
+ *   [configuration]="[
+ *     { id: 0, label: 'Details', route: '/details' },
+ *     { id: 1, label: 'Settings', route: '/settings' }
+ *   ]"
+ *   [showIcon]="true">
+ * </app-tabs>
+ * ```
+ */
+const meta: Meta<TabsComponent> = {
+  title: 'UI Dropi/Tabs',
+  component: TabsComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [RouterTestingModule.withRoutes(routes)],
+      declarations: [DummyComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A navigation component for organizing content into multiple tabbed sections.
+Tabs allow users to switch between different views within the same context.
+
+### Key Features
+- **Route integration**: Works with Angular Router for navigation
+- **Completion indicators**: Optional icons showing completion status
+- **Flexible configuration**: Customizable labels and routes
+- **Accessible**: Keyboard navigable with ARIA support
+        `,
+      },
+    },
+  },
+  argTypes: {
+    configuration: {
+      control: 'object',
+      description:
+        'Array of tab configuration objects with id, label, route, and optional completed flag',
+      table: {
+        type: { summary: 'TabConfig[]' },
+      },
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Whether to show completion status icons on tabs',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<TabsComponent>;
+
+const createStory = (args: any, storyDescription?: string): Story => ({
+  render: (args, { parameters }) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="margin: 30px;">
+        <app-tabs [configuration]="configuration" [showIcon]="showIcon"></app-tabs>
+      </div>
+    `,
+  }),
+  args,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/%5BWEB%5D-components?node-id=2-382&p=f&t=38gOklZaqpbxVROn-0',
+    },
+    docs: {
+      description: {
+        story: storyDescription,
+      },
+    },
+  },
+});
+
+/** Default tabs without icons */
+export const Default = createStory(
+  {
+    configuration: [
+      {
+        id: 0,
+        label: 'Tab 1 example',
+        route: '/tab1',
+      },
+      {
+        id: 1,
+        label: 'Tab 2 example',
+        route: '/tab2',
+      },
+    ],
+    showIcon: false,
+  },
+  'Basic tab navigation without completion indicators. Click tabs to switch views.',
+);
+
+/** Tabs with incomplete status icons */
+export const WithIconIncompleted = createStory(
+  {
+    configuration: [
+      {
+        id: 0,
+        label: 'Tab 1 example',
+        route: '/tab1',
+        completed: false,
+      },
+      {
+        id: 1,
+        label: 'Tab 2 example',
+        route: '/tab2',
+        completed: false,
+      },
+    ],
+    showIcon: true,
+  },
+  'Tabs showing incomplete status indicators. Useful for multi-step forms.',
+);
+
+/** Tabs with completed status icons */
+export const WithIconCompleted = createStory(
+  {
+    configuration: [
+      {
+        id: 0,
+        label: 'Tab 1 example',
+        route: '/tab1',
+        completed: true,
+      },
+      {
+        id: 1,
+        label: 'Tab 2 example',
+        route: '/tab2',
+        completed: true,
+      },
+    ],
+    showIcon: true,
+  },
+  'Tabs with completion checkmarks. Use to show completed steps in a workflow.',
+);
+
+/** Tabs with counter badges */
+export const WithCounter = createStory(
+  {
+    configuration: [
+      {
+        id: 0,
+        label: 'In development',
+        counter: 10,
+      },
+      {
+        id: 1,
+        label: 'In staging',
+      },
+      {
+        id: 2,
+        label: 'In production',
+        counter: 0,
+      },
+    ],
+    showIcon: false,
+  },
+  'Tabs displaying count badges. Useful for showing quantities or notifications per tab.',
+);

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

@@ -0,0 +1,138 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+
+import { TabProperties } from '@app/utilities/interfaces/ui/tabs.interface';
+import { Subscription } from 'rxjs';
+import { TranslateModule } from '@ngx-translate/core';
+import { DropiBadgeComponent } from '../dropi-badge/dropi-badge.component';
+
+@Component({
+  selector: 'app-tabs',
+  templateUrl: './tabs.component.html',
+  styleUrls: ['./tabs.component.scss'],
+  standalone: true,
+  imports: [CommonModule, RouterModule, TranslateModule, DropiBadgeComponent],
+})
+export class TabsComponent implements OnInit, OnDestroy {
+  /**
+   * Define las propiedades y la cantidad de tabs a renderizar.
+   *
+   * Cada opción dentro del arreglo debe contener las siguientes propiedades:
+   * - `id`: Identificador único del tab.
+   * - `label`: Texto a mostrar en la pestaña.
+   * - `route`: Ruta a la que se redirige al hacer clic.
+   * - `completed`: Indica si se debe mostrar el icono de completado.
+   * - `counter`: Muestra un contador al lado de la pestaña (Opcional).
+   *
+   * @type {TabProperties[]}
+   */
+
+  @Input() public configuration: TabProperties[] = [];
+  /**
+   * Indica si se debe mostrar el icono de completado en la pestaña.
+   *
+   * Valor por defecto: `false`.
+   *
+   * @type {boolean}
+   */
+
+  @Input() public showIcon: boolean = false;
+
+  /**
+   * Evento emitido cuando se selecciona una opción.
+   *
+   * Al emitirse, se envían las propiedades de la pestaña seleccionada.
+   *
+   * @type {EventEmitter<TabProperties>}
+   */
+  @Output() public onIndexChanged: EventEmitter<TabProperties> = new EventEmitter<TabProperties>();
+
+  /**
+   * Indica el valor de la pestaña activa actualmente.
+   *
+   * Representa el identificador de la pestaña seleccionada y activa.
+   *
+   * @type {number}
+   */
+  @Input() public activeTab: number = 0;
+
+  /**
+   * Bloquea el cambio de ruta y activa restricciones
+   *
+   * Cuando es `true`, evita la navegación entre pestañas y permite incorporar:
+   * - Alertas de confirmación antes de cambiar de ruta
+   * - Bloqueo de acciones hasta que se cumplan condiciones específicas
+   * - Validaciones adicionales antes de permitir el cambio de pestaña
+   *
+   * Útil para flujos críticos donde se requiere confirmación del usuario
+   * o validación de datos antes de permitir la navegación.
+   *
+   * @default false
+   * @type {boolean}
+   */
+  @Input() public stopAction: boolean = false;
+
+  /**
+   * Subscripciones activas durante el flujo
+   *
+   * Almacena las subscripciones activas para despues eliminarlas en el ciclo de vida
+   *
+   * @type {Subscription}
+   */
+
+  private readonly subscriptions: Subscription = new Subscription();
+
+  constructor(private readonly router: Router) {}
+
+  ngOnInit(): void {
+    if (this.configuration.find((tab) => tab.route)) {
+      this.setActiveTabByRoute(this.router.url);
+      this.validateUrlChange();
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+
+  validateUrlChange() {
+    this.subscriptions.add(
+      this.router.events.subscribe((event) => {
+        if (event instanceof NavigationEnd) {
+          this.setActiveTabByRoute(event.url);
+        }
+      }),
+    );
+  }
+
+  setActiveTabByRoute(route: string) {
+    const activeTab = this.configuration.find((tab) => route.includes(tab.route));
+    this.activeTab = activeTab ? activeTab.id : 0;
+  }
+
+  ///dashboard/settings/personal-data?section=invoice
+  onTabClick(tabClicked: TabProperties) {
+    this.onIndexChanged.emit(tabClicked);
+
+    if (!this.stopAction) {
+      if (tabClicked.route) {
+        // se ajustó para recibir query params y poder trabajar tabs con una misma url
+        let [path, query] = tabClicked.route.split('?');
+        const queryParams = new URLSearchParams(query);
+
+        const paramsObj: any = {};
+        queryParams.forEach((value, key) => {
+          paramsObj[key] = value;
+        });
+
+        path = decodeURIComponent(path);
+
+        this.router.navigate([path], { queryParams: paramsObj });
+        return;
+      }
+
+      this.activeTab = tabClicked.id;
+    }
+  }
+}

package/src/components-source/tag-type-product/tag-type-product.component.html

@@ -0,0 +1 @@
+<div class="type-variation">VARIABLE</div>

package/src/components-source/tag-type-product/tag-type-product.component.scss

@@ -0,0 +1,10 @@
+.type-variation {
+  border-radius: 4px;
+  background: #f1b44c;
+  padding: 2px 6px;
+  font-size: 12px;
+  color: #fff;
+  text-transform: capitalize;
+  font-weight: 400;
+  width: fit-content;
+}

package/src/components-source/tag-type-product/tag-type-product.component.spec.ts

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TagTypeProductComponent } from './tag-type-product.component';
+
+describe('TagTypeProductComponent', () => {
+  let component: TagTypeProductComponent;
+  let fixture: ComponentFixture<TagTypeProductComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TagTypeProductComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TagTypeProductComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+  });
+
+  describe('Renderizado', () => {
+    it('should render the component template', () => {
+      const compiled = fixture.nativeElement as HTMLElement;
+      expect(compiled).toBeTruthy();
+    });
+  });
+
+  describe('Componente simple', () => {
+    it('should be a standalone component', () => {
+      // El componente no tiene propiedades de entrada ni salida
+      // Es un componente simple de presentación
+      expect(fixture.componentInstance).toBeDefined();
+    });
+  });
+});

package/src/components-source/tag-type-product/tag-type-product.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'tag-type-product',
+    templateUrl: './tag-type-product.component.html',
+    styleUrls: ['./tag-type-product.component.scss'],
+    standalone: true
+})
+export class TagTypeProductComponent {}

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

@@ -0,0 +1,37 @@
+<p-toast position="top-right" [baseZIndex]="99999">
+  <ng-template let-message pTemplate="message">
+    <div class="container">
+      <div class="lottie-img" *ngIf="brandIsDropi">
+        <dotlottie-player
+          [src]="animations[message.severity]"
+          background="transparent"
+          speed="1"
+          style="width: 100%; height: auto"
+          loop
+          autoplay
+        ></dotlottie-player>
+      </div>
+
+      <div class="wb-img" *ngIf="!brandIsDropi">
+        <div
+          [class]="'bg-icon-' + message.severity"
+          [ngClass]="{
+            triangle: message.severity === 'warn',
+            circle: message.severity !== 'warn'
+          }"
+        >
+          <img [src]="icons[message.severity]" [alt]="'logo-' + message.severity" />
+        </div>
+      </div>
+
+      <div class="info-container">
+        <h5 class="title">{{ message.summary }}</h5>
+        <p class="Body-M-Regular description">{{ message.detail }}</p>
+
+        <a *ngIf="message.link" [href]="message.link.url" target="_blank" class="link">
+          {{ message.link.text }}
+        </a>
+      </div>
+    </div>
+  </ng-template>
+</p-toast>

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

@@ -0,0 +1,142 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  padding-left: 10px;
+  padding-right: 0px;
+  margin: 5px 0px;
+
+  .info-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    margin-left: 16px;
+    align-self: center;
+  }
+
+  .lottie-img {
+    width: 50px;
+    height: 50px;
+  }
+
+  .wb-img {
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+  }
+
+  .triangle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+    background-image: url('/assets/img/icons/custom/triangle.svg');
+    background-size: 43px 39px;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .bg-icon-success {
+    background-color: var(--Success-success-500, #0abb87);
+  }
+
+  .bg-icon-info {
+    background-color: var(--Info-Info-500, #50a5f1);
+  }
+
+  .bg-icon-error {
+    background-color: var(--Error-Error-500, #f46a6b);
+  }
+
+  .bg-icon-warn {
+    padding-top: 5px;
+    background-color: transparent;
+  }
+}
+
+:host ::ng-deep {
+  .p-toast-icon-close {
+    color: var(--Gray-400, #858ea6);
+  }
+
+  .p-toast-top-right {
+    top: 80px;
+  }
+
+  .p-toast {
+    opacity: 1;
+  }
+
+  .p-toast-message-content {
+    background: var(--Base-white, #fff);
+    padding: 5px 6px;
+    min-width: 300px;
+    box-shadow: 0.5px -1px 7px 0px rgba(0, 0, 0, 0.06);
+
+    .title {
+      color: var(--Gray-700, #32394d);
+      font-family: Inter, sans-serif;
+      font-size: var(--font-size-l);
+      font-style: normal;
+      font-weight: 700;
+      line-height: 110%;
+      text-align: start;
+      margin: 0px;
+      max-width: 250px;
+    }
+
+    .description {
+      text-align: start;
+      margin: 0px;
+      margin-top: var(--Size-1);
+      max-width: 250px;
+    }
+
+    .link {
+      color: var(--Info-Info-500, #50a5f1);
+      margin-top: var(--Size-2);
+      font-family: Inter, sans-serif;
+      font-size: var(--font-size-s);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 150%;
+      text-decoration-line: underline !important;
+      text-decoration-style: solid !important;
+      text-decoration-skip-ink: auto;
+      text-decoration-thickness: auto;
+      text-underline-offset: auto;
+      text-underline-position: from-font;
+    }
+  }
+
+  .p-toast .p-toast-message {
+    border-radius: 8px;
+  }
+
+  .p-toast-message-warn {
+    border-left: 8px solid var(--Warning-warning-500, #f1b44c);
+  }
+
+  .p-toast-message-info {
+    border-left: 8px solid var(--Info-Info-500, #50a5f1);
+  }
+
+  .p-toast-message-error {
+    border-left: 8px solid var(--Error-Error-500, #f46a6b);
+  }
+
+  .p-toast-message-success {
+    border-left: 8px solid var(--Success-success-500, #0abb87);
+  }
+}