@dropi/ui-components 1.0.0

package/src/components-source/dropi-skeleton/dropi-skeleton.component.spec.ts

@@ -0,0 +1,273 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChangeDetectorRef, SimpleChanges } from '@angular/core';
+import { DropiSkeletonComponent } from './dropi-skeleton.component';
+
+describe('DropiSkeletonComponent', () => {
+  let component: DropiSkeletonComponent;
+  let fixture: ComponentFixture<DropiSkeletonComponent>;
+  let changeDetectorRef: ChangeDetectorRef;
+
+  beforeEach(async () => {
+    const mockChangeDetectorRef = {
+      detectChanges: jest.fn(),
+      markForCheck: jest.fn(),
+      detach: jest.fn(),
+      reattach: jest.fn(),
+      checkNoChanges: jest.fn(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [DropiSkeletonComponent],
+      providers: [{ provide: ChangeDetectorRef, useValue: mockChangeDetectorRef }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiSkeletonComponent);
+    component = fixture.componentInstance;
+    changeDetectorRef = TestBed.inject(ChangeDetectorRef);
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.width).toBe('');
+      expect(component.height).toBe('');
+      expect(component.radius).toBe('8px');
+      expect(component.baseColor).toBe('#f6f7f8');
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept width input', () => {
+      component.width = '200px';
+      expect(component.width).toBe('200px');
+    });
+
+    it('should accept height input', () => {
+      component.height = '100px';
+      expect(component.height).toBe('100px');
+    });
+
+    it('should accept radius input', () => {
+      component.radius = '12px';
+      expect(component.radius).toBe('12px');
+    });
+
+    it('should accept baseColor input', () => {
+      component.baseColor = '#ffffff';
+      expect(component.baseColor).toBe('#ffffff');
+    });
+  });
+
+  describe('backgroundStyle getter', () => {
+    it('should generate correct background style with hex color', () => {
+      component.baseColor = '#ff0000';
+      const expectedStyle = `linear-gradient(
+      to right, #ff0000 8%, #e3e7efe7 28%, #ff0000 77%
+    )`;
+
+      expect(component.backgroundStyle).toBe(expectedStyle);
+    });
+
+    it('should generate correct background style with CSS variable', () => {
+      component.baseColor = 'primary-color';
+      const expectedStyle = `linear-gradient(
+      to right, var(--primary-color) 8%, #e3e7efe7 28%, var(--primary-color) 77%
+    )`;
+
+      expect(component.backgroundStyle).toBe(expectedStyle);
+    });
+
+    it('should handle default baseColor', () => {
+      // Using default value
+      const expectedStyle = `linear-gradient(
+      to right, #f6f7f8 8%, #e3e7efe7 28%, #f6f7f8 77%
+    )`;
+
+      expect(component.backgroundStyle).toBe(expectedStyle);
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    it('should call detectChanges when baseColor changes (not first change)', () => {
+      // Reset the spy before the test
+      jest.clearAllMocks();
+
+      const changes: any = {
+        baseColor: {
+          currentValue: '#new-color',
+          previousValue: '#old-color',
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+        firstChange: false, // Add this property directly
+      };
+
+      // Spy on the component's cdRef specifically
+      const cdRefSpy = jest.spyOn((component as any).cdRef, 'detectChanges');
+
+      component.ngOnChanges(changes);
+
+      expect(cdRefSpy).toHaveBeenCalled();
+    });
+
+    it('should not call detectChanges on first change of baseColor', () => {
+      const changes: SimpleChanges = {
+        baseColor: {
+          currentValue: '#new-color',
+          previousValue: undefined,
+          firstChange: true,
+          isFirstChange: () => true,
+        },
+      };
+
+      component.ngOnChanges(changes);
+
+      expect(changeDetectorRef.detectChanges).not.toHaveBeenCalled();
+    });
+
+    it('should not call detectChanges for other property changes', () => {
+      const changes: SimpleChanges = {
+        width: {
+          currentValue: '200px',
+          previousValue: '100px',
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      };
+
+      component.ngOnChanges(changes);
+
+      expect(changeDetectorRef.detectChanges).not.toHaveBeenCalled();
+    });
+
+    it('should handle multiple changes with baseColor not first change', () => {
+      // Reset the spy before the test
+      jest.clearAllMocks();
+
+      const changes: any = {
+        baseColor: {
+          currentValue: '#new-color',
+          previousValue: '#old-color',
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+        width: {
+          currentValue: '200px',
+          previousValue: '100px',
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+        firstChange: false, // Add this property directly
+      };
+
+      // Spy on the component's cdRef specifically
+      const cdRefSpy = jest.spyOn((component as any).cdRef, 'detectChanges');
+
+      component.ngOnChanges(changes);
+
+      expect(cdRefSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Renderizado', () => {
+    it('should apply width style when provided', () => {
+      component.width = '300px';
+      fixture.detectChanges();
+
+      const skeletonElement = fixture.nativeElement.querySelector('.skeleton');
+      expect(skeletonElement?.style.width).toBe('300px');
+    });
+
+    it('should apply height style when provided', () => {
+      component.height = '150px';
+      fixture.detectChanges();
+
+      const skeletonElement = fixture.nativeElement.querySelector('.skeleton');
+      expect(skeletonElement?.style.height).toBe('150px');
+    });
+
+    it('should apply border-radius style', () => {
+      component.radius = '16px';
+      fixture.detectChanges();
+
+      const skeletonElement = fixture.nativeElement.querySelector('.skeleton');
+      expect(skeletonElement?.style.borderRadius).toBe('16px');
+    });
+  });
+
+  describe('Casos edge', () => {
+    it('should handle empty string values', () => {
+      component.width = '';
+      component.height = '';
+      component.radius = '';
+      component.baseColor = '';
+
+      expect(() => component.backgroundStyle).not.toThrow();
+    });
+
+    it('should handle null values gracefully', () => {
+      component.baseColor = null as any;
+
+      expect(() => component.backgroundStyle).toThrow();
+    });
+
+    it('should handle undefined values gracefully', () => {
+      component.baseColor = undefined as any;
+
+      expect(() => component.backgroundStyle).toThrow();
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete skeleton configuration', () => {
+      // Set all properties
+      component.width = '250px';
+      component.height = '120px';
+      component.radius = '10px';
+      component.baseColor = '#e0e0e0';
+
+      fixture.detectChanges();
+
+      // Verify all properties are set correctly
+      expect(component.width).toBe('250px');
+      expect(component.height).toBe('120px');
+      expect(component.radius).toBe('10px');
+      expect(component.baseColor).toBe('#e0e0e0');
+
+      // Verify backgroundStyle is generated correctly
+      const expectedStyle = `linear-gradient(
+      to right, #e0e0e0 8%, #e3e7efe7 28%, #e0e0e0 77%
+    )`;
+      expect(component.backgroundStyle).toBe(expectedStyle);
+    });
+
+    it('should handle skeleton with CSS variable color', () => {
+      component.width = '100%';
+      component.height = '40px';
+      component.baseColor = 'skeleton-base';
+
+      fixture.detectChanges();
+
+      const expectedStyle = `linear-gradient(
+      to right, var(--skeleton-base) 8%, #e3e7efe7 28%, var(--skeleton-base) 77%
+    )`;
+      expect(component.backgroundStyle).toBe(expectedStyle);
+    });
+
+    it('should handle responsive skeleton', () => {
+      component.width = '100%';
+      component.height = 'auto';
+      component.radius = '4px';
+
+      fixture.detectChanges();
+
+      expect(component.width).toBe('100%');
+      expect(component.height).toBe('auto');
+      expect(component.radius).toBe('4px');
+    });
+  });
+});

package/src/components-source/dropi-skeleton/dropi-skeleton.component.stories.ts

@@ -0,0 +1,145 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@dotlottie/player-component';
+import { action } from '@storybook/addon-actions';
+import { DropiSkeletonComponent } from './dropi-skeleton.component';
+
+/**
+ * # Skeleton Component
+ *
+ * A placeholder loading component that mimics content structure while data is being fetched.
+ * Skeletons improve perceived performance by showing users the layout before content loads.
+ *
+ * ## Features
+ * - **Customizable dimensions**: Set width, height, and border radius
+ * - **Animated**: Subtle shimmer animation indicates loading state
+ * - **Flexible**: Adapts to any content shape
+ *
+ * ## Usage
+ * ```html
+ * <app-dropi-skeleton
+ *   width="100%"
+ *   height="2rem"
+ *   radius="8px">
+ * </app-dropi-skeleton>
+ * ```
+ */
+const meta: Meta<DropiSkeletonComponent> = {
+  title: 'UI Dropi/Skeleton',
+  component: DropiSkeletonComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A placeholder loading component that mimics content structure while data is being fetched.
+Skeletons improve perceived performance by showing users the layout before content loads.
+
+### Key Features
+- **Customizable dimensions**: Set width, height, and border radius
+- **Animated**: Subtle shimmer animation indicates loading state
+- **Flexible**: Adapts to any content shape
+        `,
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+  ],
+  argTypes: {
+    width: {
+      control: 'text',
+      description: 'Width of the skeleton element (CSS value)',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '100%' },
+      },
+    },
+    height: {
+      control: 'text',
+      description: 'Height of the skeleton element (CSS value)',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '1rem' },
+      },
+    },
+    radius: {
+      control: 'text',
+      description: 'Border radius of the skeleton element',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '4px' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiSkeletonComponent>;
+
+/** Default skeleton with standard dimensions */
+export const Default: Story = {
+  args: {
+    width: '30rem',
+    height: '2rem',
+    radius: '',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default skeleton with standard dimensions. Use as placeholder for text content.',
+      },
+    },
+  },
+};
+
+/** Skeleton with rounded corners */
+export const WithRadius: Story = {
+  args: {
+    width: '30rem',
+    height: '2rem',
+    radius: '10px',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skeleton with rounded corners. Use for buttons or pill-shaped elements.',
+      },
+    },
+  },
+};
+
+/** Skeleton with sharp corners */
+export const NoRadius: Story = {
+  args: {
+    width: '30rem',
+    height: '2rem',
+    radius: '0px',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skeleton with sharp corners. Use for rectangular content areas.',
+      },
+    },
+  },
+};
+
+/** Skeleton with custom background color */
+export const WithCustomBackgroundColor: Story = {
+  args: {
+    width: '30rem',
+    height: '2rem',
+    baseColor: 'Gray-Gray-600',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skeleton with custom background color for different visual contexts.',
+      },
+    },
+  },
+};

package/src/components-source/dropi-skeleton/dropi-skeleton.component.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'app-dropi-skeleton',
+  templateUrl: './dropi-skeleton.component.html',
+  styleUrls: ['./dropi-skeleton.component.scss'],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class DropiSkeletonComponent implements OnChanges {
+  @Input() width: string = '';
+  @Input() height: string = '';
+  @Input() radius: string = '8px';
+  @Input() baseColor: string = '#f6f7f8';
+
+  constructor(private readonly cdRef: ChangeDetectorRef) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['baseColor'] && !changes.firstChange) this.cdRef.detectChanges();
+  }
+
+  get backgroundStyle(): string {
+    const color = this.baseColor.startsWith('#') ? this.baseColor : `var(--${this.baseColor})`;
+
+    return `linear-gradient(
+      to right, ${color} 8%, #e3e7efe7 28%, ${color} 77%
+    )`;
+  }
+}

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

@@ -0,0 +1,29 @@
+<div class="stepper-container">
+  <ng-container *ngFor="let step of steps; let i = index">
+    <div
+      class="step"
+      [ngClass]="getStepState(i)"
+      [ngStyle]="{ flex: i > 0 && i < steps.length - 1 ? 2 : 1 }"
+    >
+      <div class="line" *ngIf="i !== 0"></div>
+      <div class="circle-container">
+        <div class="circle">
+          <span class="Label-S" *ngIf="showNumberOfStep">
+            {{ i + 1 }}
+          </span>
+        </div>
+
+        <div class="steps-container">
+          <p class="Label-M" *ngIf="step.title">
+            {{ step.title | translate }}
+          </p>
+
+          <p class="Body-S-Regular" *ngIf="step.description">
+            {{ step.description | translate }}
+          </p>
+        </div>
+      </div>
+      <div class="line" *ngIf="i !== steps.length - 1"></div>
+    </div>
+  </ng-container>
+</div>

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

@@ -0,0 +1,110 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.stepper-container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+  margin-bottom: var(--Size-4);
+}
+
+.step {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  &.focus {
+    .circle {
+      border-color: var(--Primary-Primary-500, #f49a3d);
+
+      span {
+        color: var(--Primary-Primary-500, #f49a3d);
+      }
+    }
+
+    .line {
+      background-color: var(--Primary-Primary-500, #f49a3d);
+    }
+
+    .step-label {
+      color: var(--Gray-Gray-700, #32394d);
+    }
+  }
+
+  &.completed {
+    .circle {
+      background-color: var(--Primary-Primary-500, #f49a3d);
+      border-color: var(--Primary-Primary-500, #f49a3d);
+
+      span {
+        color: var(--Neutral-White, #fff);
+      }
+    }
+
+    .line {
+      background-color: var(--Primary-Primary-500, #f49a3d);
+    }
+
+    .step-label {
+      color: var(--Gray-Gray-700, #32394d);
+    }
+  }
+}
+
+.line {
+  width: 100%;
+  flex: 1;
+  height: 2px;
+  background-color: var(--Gray-Gray-200, #c3c9d9);
+}
+
+.circle-container {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid var(--Gray-Gray-200);
+  background-color: transparent;
+  display: grid;
+  place-items: center;
+
+  span {
+    color: var(--Gray-Gray-200, #c3c9d9);
+    text-align: center;
+    line-height: 1;
+    pointer-events: none;
+  }
+}
+
+.steps-container {
+  position: absolute;
+  top: calc(100% + var(--Size-1));
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-2);
+  width: max-content;
+  width: 12vw;
+  min-width: 100px;
+  max-width: 180px;
+  text-align: center;
+  p {
+    margin: 0 !important;
+  }
+}
+
+.line.invisible {
+  background-color: transparent;
+}