@pragma-dev-kit/pragma-ds-angular

🅰️ Librería de componentes Angular para Pragma Design System

📦 Instalación

npm install @pragma-dev-kit/pragma-ds-angular

O con yarn:

yarn add @pragma-dev-kit/pragma-ds-angular

⚙️ Configuración

1. Importar estilos globales

Agrega los estilos CSS de Pragma DS en tu archivo angular.json:

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/@pragma-dev-kit/pragma-ds/dist/pragma-ds/pragma-ds.css"
            ]
          }
        }
      }
    }
  }
}

2. Importar el módulo de componentes

Importa ComponentLibraryModule en tu módulo principal:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ComponentLibraryModule } from '@pragma-dev-kit/pragma-ds-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ComponentLibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Para aplicaciones standalone (Angular 14+)

Si usas componentes standalone, importa el módulo en tu main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { ComponentLibraryModule } from '@pragma-dev-kit/pragma-ds-angular';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(ComponentLibraryModule)
  ]
});

🚀 Uso de componentes

Ejemplo básico

<div class="app-container">
  <h1>Mi aplicación con Pragma DS</h1>
  
  <pds-input label="Nombre" placeholder="Ingresa tu nombre"></pds-input>
  
  <pds-checkbox label="Acepto términos y condiciones"></pds-checkbox>
  
  <pds-button variant="primary">Enviar</pds-button>
</div>

Ejemplo con formularios reactivos

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <pds-input
        label="Nombre"
        formControlName="name"
        placeholder="Ingresa tu nombre"
      ></pds-input>

      <pds-input
        label="Email"
        type="email"
        formControlName="email"
        placeholder="[email protected]"
      ></pds-input>

      <pds-checkbox
        label="Acepto términos"
        formControlName="terms"
      ></pds-checkbox>

      <pds-button variant="primary" type="submit">
        Enviar
      </pds-button>
    </form>
  `
})
export class FormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      terms: [false, Validators.requiredTrue]
    });
  }

  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

Ejemplo con eventos

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <pds-button
      variant="primary"
      (click)="handleClick()"
    >
      Click me
    </pds-button>

    <pds-dropdown
      [options]="items"
      (selectionChange)="onSelectionChange($event)"
    ></pds-dropdown>
  `
})
export class ExampleComponent {
  items = [
    { label: 'Opción 1', value: '1' },
    { label: 'Opción 2', value: '2' },
    { label: 'Opción 3', value: '3' }
  ];

  handleClick() {
    console.log('Button clicked!');
  }

  onSelectionChange(event: any) {
    console.log('Selected:', event.detail);
  }
}

📋 Componentes disponibles

• pds-button - Botones con diferentes variantes (primary, secondary, tertiary)
• pds-input - Campos de entrada de texto
• pds-textarea - Áreas de texto multilínea
• pds-checkbox - Casillas de verificación
• pds-radio - Botones de radio
• pds-toggle - Interruptores de encendido/apagado
• pds-dropdown - Menús desplegables
• pds-avatar - Avatares de usuario
• pds-card - Tarjetas de contenido
• pds-breadcrumb - Navegación de migas de pan
• pds-pagination - Paginación de contenido
• pds-toast - Notificaciones toast
• pds-tooltip - Tooltips informativos
• pds-icon - Iconos del sistema
• pds-icon-button - Botones con iconos
• pds-accordion - Acordeones expandibles
• pds-tab - Pestañas de navegación
• pds-tables - Tablas de datos
• pds-tags - Etiquetas
• pds-loading - Indicadores de carga
• pds-stepper - Pasos de proceso
• pds-search - Barra de búsqueda
• pds-filter - Filtros
• pds-calendar - Calendario

💡 Tips y mejores prácticas

✅ Recomendaciones

• Importa solo lo necesario: El módulo ComponentLibraryModule incluye todos los componentes
• Usa formularios reactivos: Para mejor control y validación de formularios
• Aplica estilos consistentes: Los componentes respetan el tema global de Pragma DS
• Maneja eventos correctamente: Usa los eventos personalizados de cada componente
• TypeScript: Aprovecha el tipado fuerte para mejor experiencia de desarrollo

⚠️ Consideraciones

• Compatibilidad: Requiere Angular 15.2 o superior
• Estilos globales: Los estilos CSS deben importarse una sola vez en angular.json
• CUSTOM_ELEMENTS_SCHEMA: No es necesario agregarlo, el módulo ya lo incluye

🔧 Integración con formularios

Los componentes de Pragma DS son compatibles con Angular Forms:

import { ReactiveFormsModule } from '@angular/forms';
import { ComponentLibraryModule } from '@pragma-dev-kit/pragma-ds-angular';

@NgModule({
  imports: [
    ReactiveFormsModule,
    ComponentLibraryModule
  ]
})
export class AppModule { }

📚 Documentación

Para ver ejemplos interactivos y documentación completa de cada componente, visita nuestro Storybook.

🔗 Enlaces útiles

• Documentación de Angular
• Guía de formularios reactivos
• NPM Package
• Repositorio GitHub

🐛 Reportar problemas

Si encuentras algún problema o tienes sugerencias, por favor abre un issue en nuestro repositorio de GitHub.

📄 Licencia

ISC