@dropi/ui-components 1.0.0

package/src/components-source/vertical-steps/vertical-steps.component.html

@@ -0,0 +1,35 @@
+<div class="vertical-steps">
+  @for (step of processedSteps; track step.number; let i = $index) {
+    <div
+      class="step-item"
+      [class.completed]="step.calculatedState === 'completed'"
+      [class.current]="step.calculatedState === 'current'"
+      [class.pending]="step.calculatedState === 'pending'"
+      [class.clickable]="isStepClickable(step.number)"
+      (click)="onStepClick(step.number)"
+    >
+      <!-- Indicador del paso (círculo + línea) -->
+      <div class="step-indicator">
+        <div class="step-circle">
+          @if (step.calculatedState === 'completed' && showCheckIcon) {
+            <app-icon name="Check-small" width="14px" height="14px"></app-icon>
+          } @else {
+            <span class="step-number">{{ step.number }}</span>
+          }
+        </div>
+        @if (!isLastStep(i)) {
+          <div class="step-line"></div>
+        }
+      </div>
+
+      <!-- Etiqueta del paso -->
+      <div class="step-label">
+        @if (step.labelKey) {
+          <span>{{ step.labelKey | translate }}</span>
+        } @else {
+          <span>{{ step.label }}</span>
+        }
+      </div>
+    </div>
+  }
+</div>

package/src/components-source/vertical-steps/vertical-steps.component.scss

@@ -0,0 +1,143 @@
+:host {
+  display: block;
+}
+
+.vertical-steps {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.step-item {
+  display: flex;
+  gap: 4px;
+  height: 50px;
+  width: 100%;
+
+  &.clickable {
+    cursor: pointer;
+  }
+
+  // Indicador del paso (círculo + línea)
+  .step-indicator {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: 1px;
+  }
+
+  // Círculo del paso
+  .step-circle {
+    width: 24px;
+    height: 24px;
+    border-radius: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-bottom: -1px;
+  }
+
+  // Número dentro del círculo
+  .step-number {
+    font-family: 'Inter', sans-serif;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 1.1;
+    text-align: center;
+  }
+
+  // Línea conectora entre pasos
+  .step-line {
+    flex: 1;
+    width: 2px;
+    margin-top: -1px;
+    margin-bottom: -1px;
+  }
+
+  // Etiqueta del paso
+  .step-label {
+    display: flex;
+    align-items: center;
+    height: 24px;
+    margin-left: 6px;
+
+    span {
+      font-family: 'Inter', sans-serif;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 1.5;
+      white-space: nowrap;
+    }
+  }
+
+  // ==========================================
+  // ESTADO: Completado (completed)
+  // ==========================================
+  &.completed {
+    .step-circle {
+      background-color: var(--Primary-Primary-500, #f49a3d);
+      border: 2px solid var(--Primary-Primary-500, #f49a3d);
+
+      app-icon {
+        color: var(--white, #ffffff) !important;
+      }
+
+      .step-number {
+        color: var(--white, #ffffff) !important;
+      }
+    }
+
+    .step-line {
+      background-color: var(--Primary-Primary-500, #f49a3d);
+    }
+
+    .step-label span {
+      color: var(--Gray-Gray-700, #32394d);
+    }
+  }
+
+  // ==========================================
+  // ESTADO: Actual/Focus (current)
+  // ==========================================
+  &.current {
+    .step-circle {
+      background-color: transparent;
+      border: 2px solid var(--Primary-Primary-500, #f49a3d);
+
+      .step-number {
+        color: var(--Primary-Primary-500, #f49a3d);
+      }
+    }
+
+    .step-line {
+      background-color: var(--Primary-Primary-500, #f49a3d);
+    }
+
+    .step-label span {
+      color: var(--Gray-Gray-700, #32394d);
+    }
+  }
+
+  // ==========================================
+  // ESTADO: Pendiente (pending)
+  // ==========================================
+  &.pending {
+    .step-circle {
+      background-color: transparent;
+      border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+
+      .step-number {
+        color: var(--Gray-Gray-200, #c3c9d9);
+      }
+    }
+
+    .step-line {
+      background-color: var(--Gray-Gray-200, #c3c9d9);
+    }
+
+    .step-label span {
+      color: var(--Gray-Gray-500, #69738c);
+    }
+  }
+}

package/src/components-source/vertical-steps/vertical-steps.component.spec.ts

@@ -0,0 +1,121 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { VerticalStepsComponent } from './vertical-steps.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('VerticalStepsComponent', () => {
+  let component: VerticalStepsComponent;
+  let fixture: ComponentFixture<VerticalStepsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VerticalStepsComponent, TranslateModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(VerticalStepsComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should process steps on init', () => {
+    component.steps = [{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }];
+    component.currentStep = 2;
+    fixture.detectChanges();
+
+    expect(component.processedSteps.length).toBe(3);
+    expect(component.processedSteps[0].calculatedState).toBe('completed');
+    expect(component.processedSteps[1].calculatedState).toBe('current');
+    expect(component.processedSteps[2].calculatedState).toBe('pending');
+  });
+
+  it('should use step state if provided', () => {
+    component.steps = [
+      { label: 'Step 1', state: 'completed' },
+      { label: 'Step 2', state: 'current' },
+      { label: 'Step 3', state: 'pending' },
+    ];
+    fixture.detectChanges();
+
+    expect(component.processedSteps[0].calculatedState).toBe('completed');
+    expect(component.processedSteps[1].calculatedState).toBe('current');
+    expect(component.processedSteps[2].calculatedState).toBe('pending');
+  });
+
+  it('should determine if step is clickable', () => {
+    component.steps = [{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }];
+    component.currentStep = 2;
+    component.clickable = true;
+    fixture.detectChanges();
+
+    expect(component.isStepClickable(1)).toBe(true);
+    expect(component.isStepClickable(2)).toBe(true);
+    expect(component.isStepClickable(3)).toBe(false);
+  });
+
+  it('should not be clickable when clickable is false', () => {
+    component.steps = [{ label: 'Step 1' }, { label: 'Step 2' }];
+    component.currentStep = 2;
+    component.clickable = false;
+    fixture.detectChanges();
+
+    expect(component.isStepClickable(1)).toBe(false);
+    expect(component.isStepClickable(2)).toBe(false);
+  });
+
+  it('should emit stepClick event when clicking a clickable step', () => {
+    component.steps = [{ label: 'Step 1' }, { label: 'Step 2' }];
+    component.currentStep = 2;
+    component.clickable = true;
+    fixture.detectChanges();
+
+    const spy = jest.spyOn(component.stepClick, 'emit');
+    component.onStepClick(1);
+
+    expect(spy).toHaveBeenCalledWith(1);
+  });
+
+  it('should not emit stepClick event when clicking a non-clickable step', () => {
+    component.steps = [{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }];
+    component.currentStep = 2;
+    component.clickable = true;
+    fixture.detectChanges();
+
+    const spy = jest.spyOn(component.stepClick, 'emit');
+    component.onStepClick(3);
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('should identify last step correctly', () => {
+    component.steps = [{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }];
+    fixture.detectChanges();
+
+    expect(component.isLastStep(0)).toBe(false);
+    expect(component.isLastStep(1)).toBe(false);
+    expect(component.isLastStep(2)).toBe(true);
+  });
+
+  it('should update processed steps when currentStep changes', () => {
+    component.steps = [{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }];
+    component.currentStep = 1;
+    fixture.detectChanges();
+
+    expect(component.processedSteps[0].calculatedState).toBe('current');
+    expect(component.processedSteps[1].calculatedState).toBe('pending');
+
+    component.currentStep = 2;
+    component.ngOnChanges({
+      currentStep: {
+        currentValue: 2,
+        previousValue: 1,
+        firstChange: false,
+        isFirstChange: () => false,
+      },
+    });
+
+    expect(component.processedSteps[0].calculatedState).toBe('completed');
+    expect(component.processedSteps[1].calculatedState).toBe('current');
+  });
+});

package/src/components-source/vertical-steps/vertical-steps.component.stories.ts

@@ -0,0 +1,216 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { VerticalStepsComponent, VerticalStep } from './vertical-steps.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { IconComponent } from '@app/ui/icon/icon.component';
+
+const meta: Meta<VerticalStepsComponent> = {
+  title: 'UI Dropi/VerticalSteps',
+  component: VerticalStepsComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TranslateModule.forRoot(), IconComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    steps: {
+      description: 'Lista de pasos a mostrar',
+      control: 'object',
+    },
+    currentStep: {
+      description: 'Paso actual (1-indexed)',
+      control: { type: 'number', min: 1 },
+    },
+    clickable: {
+      description: 'Permite hacer clic en los pasos completados y el actual',
+      control: 'boolean',
+    },
+    showCheckIcon: {
+      description: 'Mostrar el ícono de check en pasos completados',
+      control: 'boolean',
+    },
+    stepClick: {
+      description: 'Evento emitido cuando se hace clic en un paso',
+      action: 'stepClick',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<VerticalStepsComponent>;
+
+const defaultSteps: VerticalStep[] = [
+  { label: 'General' },
+  { label: 'Inventario' },
+  { label: 'Imágenes' },
+  { label: 'Garantías' },
+];
+
+const extendedSteps: VerticalStep[] = [
+  { label: 'General' },
+  { label: 'Variantes e inventario' },
+  { label: 'Imágenes' },
+  { label: 'Garantías' },
+  { label: 'Privatizar producto' },
+  { label: 'Recursos adicionales' },
+  { label: 'Dropi App' },
+];
+
+/**
+ * Estado por defecto - Primer paso activo
+ */
+export const Default: Story = {
+  args: {
+    steps: defaultSteps,
+    currentStep: 1,
+    clickable: false,
+    showCheckIcon: true,
+  },
+};
+
+/**
+ * Segundo paso activo - El primero aparece completado
+ */
+export const SecondStepActive: Story = {
+  args: {
+    steps: defaultSteps,
+    currentStep: 2,
+    clickable: false,
+    showCheckIcon: true,
+  },
+};
+
+/**
+ * Tercer paso activo - Los dos primeros aparecen completados
+ */
+export const ThirdStepActive: Story = {
+  args: {
+    steps: defaultSteps,
+    currentStep: 3,
+    clickable: false,
+    showCheckIcon: true,
+  },
+};
+
+/**
+ * Último paso activo - Todos los anteriores aparecen completados
+ */
+export const LastStepActive: Story = {
+  args: {
+    steps: defaultSteps,
+    currentStep: 4,
+    clickable: false,
+    showCheckIcon: true,
+  },
+};
+
+/**
+ * Todos los pasos completados
+ */
+export const AllCompleted: Story = {
+  args: {
+    steps: defaultSteps.map((step) => ({ ...step, state: 'completed' as const })),
+    currentStep: 5,
+    clickable: false,
+    showCheckIcon: true,
+  },
+};
+
+/**
+ * Con pasos clickeables - Permite navegar a pasos anteriores
+ */
+export const Clickable: Story = {
+  args: {
+    steps: defaultSteps,
+    currentStep: 3,
+    clickable: true,
+    showCheckIcon: true,
+  },
+};
+
+/**
+ * Sin ícono de check - Muestra el número en pasos completados
+ */
+export const WithoutCheckIcon: Story = {
+  args: {
+    steps: defaultSteps,
+    currentStep: 3,
+    clickable: false,
+    showCheckIcon: false,
+  },
+};
+
+/**
+ * Formulario extendido - 7 pasos (público)
+ */
+export const ExtendedFormPublic: Story = {
+  args: {
+    steps: extendedSteps,
+    currentStep: 1,
+    clickable: true,
+    showCheckIcon: true,
+  },
+};
+
+/**
+ * Formulario extendido - Paso 4 activo
+ */
+export const ExtendedFormMidway: Story = {
+  args: {
+    steps: extendedSteps,
+    currentStep: 4,
+    clickable: true,
+    showCheckIcon: true,
+  },
+};
+
+/**
+ * Estados personalizados - Control manual de cada paso
+ */
+export const CustomStates: Story = {
+  args: {
+    steps: [
+      { label: 'Paso completado', state: 'completed' },
+      { label: 'Paso actual', state: 'current' },
+      { label: 'Paso pendiente', state: 'pending' },
+      { label: 'Otro pendiente', state: 'pending' },
+    ],
+    clickable: false,
+    showCheckIcon: true,
+  },
+};
+
+/**
+ * Con claves de traducción
+ */
+export const WithTranslationKeys: Story = {
+  args: {
+    steps: [
+      { labelKey: 'MY_PRODUCTS.CREATE_COMBO.STEPS.GENERAL' },
+      { labelKey: 'MY_PRODUCTS.CREATE_COMBO.STEPS.PRODUCTS' },
+      { labelKey: 'MY_PRODUCTS.CREATE_COMBO.STEPS.PRICING' },
+      { labelKey: 'MY_PRODUCTS.CREATE_COMBO.STEPS.IMAGES' },
+      { labelKey: 'MY_PRODUCTS.CREATE_COMBO.STEPS.SUMMARY' },
+    ],
+    currentStep: 2,
+    clickable: true,
+    showCheckIcon: true,
+  },
+};
+
+/**
+ * Formulario simple privado - 4 pasos
+ */
+export const SimpleFormPrivate: Story = {
+  args: {
+    steps: [
+      { label: 'General' },
+      { label: 'Inventario' },
+      { label: 'Imágenes y videos' },
+      { label: 'Garantías' },
+    ],
+    currentStep: 1,
+    clickable: true,
+    showCheckIcon: true,
+  },
+};

package/src/components-source/vertical-steps/vertical-steps.component.ts

@@ -0,0 +1,151 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { IconComponent } from '@app/ui/icon/icon.component';
+
+export type VerticalStepState = 'pending' | 'current' | 'completed';
+
+export interface VerticalStep {
+  /** Etiqueta del paso */
+  label?: string;
+  /** Clave de traducción para la etiqueta (alternativa a label) */
+  labelKey?: string;
+  /** Estado del paso */
+  state?: VerticalStepState;
+}
+
+/**
+ * Componente de pasos verticales de Dropi
+ * Muestra una lista vertical de pasos con indicadores de estado
+ *
+ * @example
+ * <vertical-steps
+ *   [steps]="[
+ *     { labelKey: 'STEP_1', state: 'completed' },
+ *     { labelKey: 'STEP_2', state: 'current' },
+ *     { labelKey: 'STEP_3', state: 'pending' }
+ *   ]"
+ *   [currentStep]="2"
+ *   [clickable]="true"
+ *   (stepClick)="onStepClick($event)"
+ * />
+ */
+@Component({
+  selector: 'vertical-steps',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, IconComponent],
+  templateUrl: './vertical-steps.component.html',
+  styleUrls: ['./vertical-steps.component.scss'],
+})
+export class VerticalStepsComponent implements OnInit, OnChanges {
+  /**
+   * Lista de pasos a mostrar
+   * @type {VerticalStep[]}
+   */
+  @Input() steps: VerticalStep[] = [];
+
+  /**
+   * Paso actual (1-indexed). Si se proporciona, sobrescribe el estado de los pasos.
+   * Los pasos anteriores serán 'completed', el actual 'current', y los siguientes 'pending'.
+   * @type {number}
+   */
+  @Input() currentStep: number = 1;
+
+  /**
+   * Permite hacer clic en los pasos completados y el actual
+   * @default false
+   * @type {boolean}
+   */
+  @Input() clickable: boolean = false;
+
+  /**
+   * Mostrar el ícono de check en pasos completados
+   * @default true
+   * @type {boolean}
+   */
+  @Input() showCheckIcon: boolean = true;
+
+  /**
+   * Evento emitido cuando se hace clic en un paso
+   * @type {EventEmitter<number>}
+   */
+  @Output() stepClick = new EventEmitter<number>();
+
+  /** Pasos procesados con estado calculado */
+  processedSteps: (VerticalStep & { number: number; calculatedState: VerticalStepState })[] = [];
+
+  ngOnInit(): void {
+    this.processSteps();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['steps'] || changes['currentStep']) {
+      this.processSteps();
+    }
+  }
+
+  /**
+   * Procesa los pasos y calcula el estado de cada uno
+   */
+  private processSteps(): void {
+    this.processedSteps = this.steps.map((step, index) => {
+      const stepNumber = index + 1;
+      let calculatedState: VerticalStepState;
+
+      // Si el paso tiene un estado definido, usarlo; si no, calcularlo basado en currentStep
+      if (step.state) {
+        calculatedState = step.state;
+      } else {
+        if (stepNumber < this.currentStep) {
+          calculatedState = 'completed';
+        } else if (stepNumber === this.currentStep) {
+          calculatedState = 'current';
+        } else {
+          calculatedState = 'pending';
+        }
+      }
+
+      return {
+        ...step,
+        number: stepNumber,
+        calculatedState,
+      };
+    });
+  }
+
+  /**
+   * Determina si un paso es clickeable
+   * @param stepNumber Número del paso (1-indexed)
+   * @returns true si el paso es clickeable
+   */
+  isStepClickable(stepNumber: number): boolean {
+    return this.clickable && stepNumber <= this.currentStep;
+  }
+
+  /**
+   * Maneja el clic en un paso
+   * @param stepNumber Número del paso (1-indexed)
+   */
+  onStepClick(stepNumber: number): void {
+    if (this.isStepClickable(stepNumber)) {
+      this.stepClick.emit(stepNumber);
+    }
+  }
+
+  /**
+   * Determina si es el último paso
+   * @param index Índice del paso (0-indexed)
+   * @returns true si es el último paso
+   */
+  isLastStep(index: number): boolean {
+    return index === this.processedSteps.length - 1;
+  }
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Public API Surface de @dropi/ui-components
+ *
+ * Este archivo exporta la API pública de la librería para uso externo
+ */
+
+// Exportar el módulo de elementos
+export { DropiElementsModule } from "./lib/elements.module";
+
+// Exportar funciones de registro
+export {
+  registerDropiElements,
+  isComponentRegistered,
+} from "./lib/elements-registry";
+
+// Información de versión
+export const DROPI_ELEMENTS_VERSION = "1.0.0";
+
+/**
+ * README: Cómo usar esta librería
+ *
+ * Los estilos CSS (dropi-tokens.css) deben importarse por separado
+ * en tu aplicación. No se pueden bundlear en el JavaScript.
+ *
+ * Ejemplo:
+ * ```typescript
+ * // En tu aplicación
+ * import '@dropi/ui-components/dropi-tokens.css';  // CSS tokens
+ * import '@dropi/ui-components';                    // Web Components
+ * ```
+ */