@dropi/ui-components 1.0.0

package/project.json

@@ -0,0 +1,48 @@
+{
+  "name": "dropi-ui-elements",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/dropi-ui-elements/src",
+  "prefix": "dropi",
+  "projectType": "library",
+  "release": {
+    "version": {
+      "manifestRootsToUpdate": ["dist/{projectRoot}"],
+      "currentVersionResolver": "git-tag",
+      "fallbackCurrentVersionResolver": "disk"
+    }
+  },
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "libs/dropi-ui-elements/ng-package.json",
+        "tsConfig": "libs/dropi-ui-elements/tsconfig.lib.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/dropi-ui-elements/tsconfig.lib.prod.json"
+        },
+        "development": {}
+      },
+      "defaultConfiguration": "production"
+    },
+    "nx-release-publish": {
+      "options": {
+        "packageRoot": "dist/{projectRoot}"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/dropi-ui-elements/jest.config.ts",
+        "tsConfig": "libs/dropi-ui-elements/tsconfig.spec.json"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

package/publish.sh

@@ -0,0 +1,113 @@
+#!/bin/bash
+
+# Script para publicar dropi-ui-components a GitHub y NPM
+# Ejecutar: bash publish.sh
+
+set -e  # Exit on error
+
+echo "🚀 Publicación de @dropi/ui-components"
+echo "========================================="
+echo ""
+
+# Colores
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Verificar que estamos en el directorio correcto
+if [ ! -f "package.json" ]; then
+    echo "❌ Error: No se encuentra package.json"
+    echo "   Ejecuta este script desde ~/Desktop/dropi-ui-components"
+    exit 1
+fi
+
+echo "📍 Directorio: $(pwd)"
+echo ""
+
+# Paso 1: Verificar si ya hay un remote
+if git remote get-url origin &> /dev/null; then
+    echo "✅ Git remote ya configurado"
+    git remote -v
+else
+    echo "${YELLOW}⚠️  No hay remote configurado${NC}"
+    echo ""
+    echo "Por favor, crea el repositorio en GitHub primero:"
+    echo "  1. Ir a: https://github.com/new"
+    echo "  2. Nombre: ui-components"
+    echo "  3. Organización: dropi (o tu org)"
+    echo "  4. NO inicializar con README"
+    echo ""
+    read -p "URL del repositorio (ej: https://github.com/dropi/ui-components.git): " REPO_URL
+    
+    if [ -z "$REPO_URL" ]; then
+        echo "❌ URL no proporcionada. Saliendo..."
+        exit 1
+    fi
+    
+    git remote add origin "$REPO_URL"
+    echo "${GREEN}✅ Remote agregado${NC}"
+fi
+
+echo ""
+
+# Paso 2: Push a GitHub
+echo "📤 Haciendo push a GitHub..."
+git branch -M main
+git push -u origin main --tags
+
+echo "${GREEN}✅ Código publicado en GitHub${NC}"
+echo ""
+
+# Paso 3: Preguntar si publicar a NPM
+read -p "¿Deseas publicar a NPM ahora? (y/n): " PUBLISH_NPM
+
+if [ "$PUBLISH_NPM" = "y" ] || [ "$PUBLISH_NPM" = "Y" ]; then
+    echo ""
+    echo "📦 Publicando a NPM..."
+    
+    # Verificar si hay un build
+    if [ ! -d "../dist" ]; then
+        echo "❌ No se encuentra el directorio dist/"
+        echo "   Ejecuta: npm run build:complete"
+        exit 1
+    fi
+    
+    cd ../dist
+    
+    # Verificar login de NPM
+    if ! npm whoami &> /dev/null; then
+        echo "${YELLOW}⚠️  No estás logueado en NPM${NC}"
+        npm login
+    fi
+    
+    echo ""
+    echo "Usuario NPM: $(npm whoami)"
+    echo ""
+    
+    read -p "¿Publicar como paquete público? (y/n): " PUBLIC_PKG
+    
+    if [ "$PUBLIC_PKG" = "y" ] || [ "$PUBLIC_PKG" = "Y" ]; then
+        npm publish --access public
+    else
+        npm publish
+    fi
+    
+    echo ""
+    echo "${GREEN}✅ Paquete publicado a NPM${NC}"
+    cd -
+else
+    echo ""
+    echo "⏭️  Publicación a NPM omitida"
+    echo "   Puedes hacerlo más tarde con:"
+    echo "   cd ~/Desktop/dist && npm publish --access public"
+fi
+
+echo ""
+echo "========================================="
+echo "${GREEN}🎉 Proceso completado!${NC}"
+echo ""
+echo "Comandos útiles:"
+echo "  Ver en GitHub: git remote get-url origin"
+echo "  Nueva versión: npm version patch (o minor/major)"
+echo "  Re-publicar: npm run build:complete && cd ../dist && npm publish"
+echo ""

package/src/components-source/accordion/accordion-item/accordion-item.component.html

@@ -0,0 +1,12 @@
+<div class="accordion-item">
+  <div class="accordion-header" (click)="toggle()">
+    <p>{{ sectionTitle }}</p>
+    <div class="icon">
+      <i class="pi pi-chevron-down" *ngIf="!isOpen"></i>
+      <i class="pi pi-chevron-up" *ngIf="isOpen"></i>
+    </div>
+  </div>
+  <div class="accordion-content" *ngIf="isOpen">
+    <ng-content></ng-content>
+  </div>
+</div>

package/src/components-source/accordion/accordion-item/accordion-item.component.scss

@@ -0,0 +1,47 @@
+.accordion-item {
+  border: none;
+  border-radius: 0px;
+  border-bottom: 1px solid var(--Gray-100, #e6eaf2);
+}
+
+.accordion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: background 0.3s;
+
+  &:hover {
+    background: var(--Gray-50, #f7f8fa);
+  }
+
+  p {
+    padding: var(--Size-5, 24px) var(--Size-4, 16px);
+    cursor: pointer;
+    color: var(--Gray-600, #475066);
+    font-family: Inter, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 110%;
+    margin: 0px;
+  }
+
+  .icon {
+    padding: var(--Size-3, 12px) var(--Size-3, 12px);
+    color: var(--Gray-500, #69738c);
+
+    i {
+      font-size: 14px;
+    }
+  }
+}
+
+.accordion-content {
+  padding: 16px;
+  background: white;
+  transition:
+    max-height 0.3s ease-in-out,
+    opacity 0.3s ease-in-out,
+    padding 0.3s;
+}

package/src/components-source/accordion/accordion-item/accordion-item.component.spec.ts

@@ -0,0 +1,122 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { AccordionItemComponent } from './accordion-item.component';
+import { AccordionComponent } from '../accordion.component';
+
+// Declarar jest globalmente para evitar errores de TypeScript
+declare const jest: any;
+
+describe('AccordionItemComponent', () => {
+  let component: AccordionItemComponent;
+  let fixture: ComponentFixture<AccordionItemComponent>;
+  let debugElement: DebugElement;
+  let mockAccordion: any;
+
+  beforeEach(async () => {
+    // Crear mock del AccordionComponent con los métodos correctos
+    mockAccordion = {
+      toggle: jest.fn(),
+      isOpen: jest.fn().mockReturnValue(false),
+      multiple: false,
+      openItems: [],
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [AccordionItemComponent],
+      providers: [{ provide: AccordionComponent, useValue: mockAccordion }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AccordionItemComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
+
+    // Configurar propiedades necesarias
+    component.index = 0;
+
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.sectionTitle).toBe('');
+      expect(component.index).toBeDefined();
+    });
+
+    it('should accept sectionTitle input', () => {
+      component.sectionTitle = 'Test Header';
+      fixture.detectChanges();
+      expect(component.sectionTitle).toBe('Test Header');
+    });
+
+    it('should accept index input', () => {
+      component.index = 5;
+      fixture.detectChanges();
+      expect(component.index).toBe(5);
+    });
+  });
+
+  describe('Funcionalidad de toggle', () => {
+    it('should call accordion toggle when toggle is called', () => {
+      component.toggle();
+      expect(mockAccordion.toggle).toHaveBeenCalledWith(component.index);
+    });
+
+    it('should handle toggle correctly', () => {
+      component.index = 2;
+      component.toggle();
+      expect(mockAccordion.toggle).toHaveBeenCalledWith(2);
+    });
+  });
+
+  describe('Estado de apertura', () => {
+    it('should return correct open state from accordion', () => {
+      mockAccordion.isOpen.mockReturnValue(true);
+
+      const isOpenState = component.isOpen;
+
+      expect(isOpenState).toBe(true);
+      expect(mockAccordion.isOpen).toHaveBeenCalledWith(component.index);
+    });
+
+    it('should return false when accordion returns false', () => {
+      mockAccordion.isOpen.mockReturnValue(false);
+
+      const isOpenState = component.isOpen;
+
+      expect(isOpenState).toBe(false);
+    });
+  });
+
+  describe('Renderizado del template', () => {
+    it('should display section title', () => {
+      component.sectionTitle = 'Test Section';
+      fixture.detectChanges();
+
+      expect(component.sectionTitle).toBe('Test Section');
+    });
+
+    it('should have access to accordion service', () => {
+      expect(component.accordion).toBe(mockAccordion);
+    });
+  });
+
+  describe('Integración con accordion', () => {
+    it('should interact with accordion correctly', () => {
+      component.index = 1;
+      component.sectionTitle = 'Test Item';
+
+      // Test toggle functionality
+      component.toggle();
+      expect(mockAccordion.toggle).toHaveBeenCalledWith(1);
+
+      // Test open state
+      mockAccordion.isOpen.mockReturnValue(true);
+      expect(component.isOpen).toBe(true);
+    });
+  });
+});

package/src/components-source/accordion/accordion-item/accordion-item.component.ts

@@ -0,0 +1,42 @@
+import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AccordionComponent } from '../accordion.component';
+
+/**
+ * Componente que renderiza un item de un acordeón.
+ *
+ * Un item del acordeón tiene un título y un contenido que se puede expandir o contraer.
+ *
+ * @example
+ * <app-accordion>
+ *   <app-accordion-item title="Título 1">Contenido 1</app-accordion-item>
+ *   <app-accordion-item title="Título 2">Contenido 2</app-accordion-item>
+ * </app-accordion>
+ */
+@Component({
+  selector: 'app-accordion-item',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './accordion-item.component.html',
+  styleUrls: ['./accordion-item.component.scss']
+})
+export class AccordionItemComponent {
+  /**
+   * The title of the item.
+   */
+  @Input() sectionTitle: string = '';
+  /**
+   * The index of the item in the accordion.
+   */
+  @Input() index!: number;
+  @ContentChild('content', { static: true }) content!: TemplateRef<any>;
+  constructor(public accordion: AccordionComponent) {}
+
+  toggle() {
+    this.accordion.toggle(this.index);
+  }
+
+  get isOpen(): boolean {
+    return this.accordion.isOpen(this.index);
+  }
+}

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

@@ -0,0 +1,3 @@
+<div class="dropi-accordion">
+  <ng-content />
+</div>

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

@@ -0,0 +1,5 @@
+.dropi-accordion {
+  width: 100%;
+  border-top: 1px solid var(--Gray-100, #E6EAF2);
+  overflow: hidden;
+}

package/src/components-source/accordion/accordion.component.spec.ts

@@ -0,0 +1,243 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccordionComponent } from './accordion.component';
+
+describe('AccordionComponent', () => {
+  let component: AccordionComponent;
+  let fixture: ComponentFixture<AccordionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccordionComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.multiple).toBe(false);
+      expect(component.activeIndex).toBeNull();
+      expect(component.openSections).toBeInstanceOf(Set);
+      expect(component.openSections.size).toBe(0);
+    });
+
+    it('should accept multiple input', () => {
+      component.multiple = true;
+      expect(component.multiple).toBe(true);
+    });
+  });
+
+  describe('Modo single (default)', () => {
+    beforeEach(() => {
+      component.multiple = false;
+    });
+
+    it('should open section on toggle', () => {
+      component.toggle(0);
+      expect(component.activeIndex).toBe(0);
+      expect(component.isOpen(0)).toBe(true);
+    });
+
+    it('should close section when toggling same index', () => {
+      component.toggle(0);
+      expect(component.isOpen(0)).toBe(true);
+
+      component.toggle(0);
+      expect(component.activeIndex).toBeNull();
+      expect(component.isOpen(0)).toBe(false);
+    });
+
+    it('should close previous section when opening new one', () => {
+      component.toggle(0);
+      expect(component.isOpen(0)).toBe(true);
+
+      component.toggle(1);
+      expect(component.isOpen(0)).toBe(false);
+      expect(component.isOpen(1)).toBe(true);
+      expect(component.activeIndex).toBe(1);
+    });
+
+    it('should return false for closed sections', () => {
+      expect(component.isOpen(0)).toBe(false);
+      expect(component.isOpen(1)).toBe(false);
+    });
+
+    it('should handle multiple toggle calls', () => {
+      component.toggle(0);
+      component.toggle(1);
+      component.toggle(2);
+
+      expect(component.isOpen(0)).toBe(false);
+      expect(component.isOpen(1)).toBe(false);
+      expect(component.isOpen(2)).toBe(true);
+    });
+  });
+
+  describe('Modo multiple', () => {
+    beforeEach(() => {
+      component.multiple = true;
+    });
+
+    it('should open multiple sections', () => {
+      component.toggle(0);
+      component.toggle(1);
+
+      expect(component.isOpen(0)).toBe(true);
+      expect(component.isOpen(1)).toBe(true);
+      expect(component.openSections.size).toBe(2);
+    });
+
+    it('should close specific section without affecting others', () => {
+      component.toggle(0);
+      component.toggle(1);
+      component.toggle(2);
+
+      expect(component.isOpen(0)).toBe(true);
+      expect(component.isOpen(1)).toBe(true);
+      expect(component.isOpen(2)).toBe(true);
+      expect(component.openSections.size).toBe(3);
+
+      // Close middle section
+      component.toggle(1);
+
+      expect(component.openSections.size).toBe(2);
+      expect(component.isOpen(0)).toBe(true);
+      expect(component.isOpen(1)).toBe(false);
+      expect(component.isOpen(2)).toBe(true);
+    });
+
+    it('should handle closing all sections in multiple mode', () => {
+      component.toggle(0);
+      component.toggle(1);
+      component.toggle(2);
+
+      expect(component.openSections.size).toBe(3);
+
+      // Close all
+      component.toggle(0);
+      component.toggle(1);
+      component.toggle(2);
+
+      expect(component.openSections.size).toBe(0);
+      for (let i = 0; i < 3; i++) {
+        expect(component.isOpen(i)).toBe(false);
+      }
+    });
+
+    it('should handle toggle same section correctly', () => {
+      component.toggle(0);
+      expect(component.isOpen(0)).toBe(true);
+      expect(component.openSections.size).toBe(1);
+
+      // Toggle the same index again
+      component.toggle(0);
+      expect(component.isOpen(0)).toBe(false);
+      expect(component.openSections.size).toBe(0);
+    });
+  });
+
+  describe('Cambio de modo', () => {
+    it('should switch from single to multiple mode', () => {
+      component.toggle(2);
+      expect(component.isOpen(2)).toBe(true);
+      expect(component.activeIndex).toBe(2);
+
+      component.multiple = true;
+      expect(component.activeIndex).toBe(2);
+      expect(component.openSections.size).toBe(0);
+    });
+
+    it('should maintain state when switching from multiple to single', () => {
+      component.multiple = true;
+      component.toggle(0);
+      component.toggle(1);
+      expect(component.openSections.size).toBe(2);
+
+      component.multiple = false;
+
+      // Should close all but keep activeIndex
+      expect(component.activeIndex).toBeNull();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle invalid indices', () => {
+      component.toggle(0);
+      expect(component.isOpen(0)).toBe(true);
+      
+      // El componente permite índices negativos y grandes
+      component.toggle(-1);
+      expect(component.isOpen(-1)).toBe(true);
+
+      component.toggle(999);
+      expect(component.isOpen(999)).toBe(true);
+    });
+  });
+
+  describe('Stress tests', () => {
+    it('should handle rapid toggling in single mode', () => {
+      component.multiple = false;
+
+      component.toggle(0);
+      component.toggle(0);
+      component.toggle(0);
+
+      expect(component.isOpen(0)).toBe(true);
+    });
+
+    it('should handle rapid toggling in multiple mode', () => {
+      component.multiple = true;
+
+      component.toggle(0);
+      component.toggle(0);
+      component.toggle(0);
+
+      expect(component.isOpen(0)).toBe(true);
+    });
+  });
+
+  describe('Workflow integration', () => {
+    it('should handle complete workflow in single mode', () => {
+      component.multiple = false;
+
+      // Open first section  
+      component.toggle(0);
+      expect(component.isOpen(0)).toBe(true);
+      expect(component.activeIndex).toBe(0);
+
+      // Open second section (should close first)
+      component.toggle(1);
+      expect(component.isOpen(0)).toBe(false);
+      expect(component.isOpen(1)).toBe(true);
+
+      // Close current section
+      component.toggle(1);
+      expect(component.isOpen(1)).toBe(false);
+    });
+
+    it('should handle complete workflow in multiple mode', () => {
+      component.multiple = true;
+
+      // Open multiple sections
+      component.toggle(0);
+      component.toggle(1);
+      component.toggle(2);
+
+      expect(component.openSections.size).toBe(3);
+
+      // Close middle section
+      component.toggle(1);
+
+      expect(component.openSections.size).toBe(2);
+      expect(component.isOpen(0)).toBe(true);
+      expect(component.isOpen(1)).toBe(false);
+      expect(component.isOpen(2)).toBe(true);
+    });
+  });
+});