@ingeniacode/ui-kit

Librería de componentes UI para landing pages de Infinitum. Construida con Angular 15 y Tailwind CSS, compatible con Angular 15 y 16.

Instalación

npm install @ingeniacode/ui-kit

⚠️ Si instalas desde un tarball local (desarrollo), usa siempre el .tgz generado con npm pack — nunca file: directo, ya que causa conflictos de instancias de Angular.

npm install --legacy-peer-deps /ruta/UiKit/dist/ingenia-ui-kit/ingeniacode-ui-kit-x.x.x.tgz

Configuración de estilos

La librería incluye su propio CSS compilado con Tailwind (sin prefijo, sin preflight). Impórtalo una sola vez en el styles.css global de tu proyecto:

@import "@ingeniacode/ui-kit/assets/styles.css";

No es necesario tener Tailwind instalado en el proyecto consumidor.

Uso

En un NgModule

import { IngeniaUiKitModule } from '@ingeniacode/ui-kit';

@NgModule({
  imports: [IngeniaUiKitModule]
})
export class MiModule {}

En un componente standalone (Angular 14+)

import { IngeniaUiKitModule } from '@ingeniacode/ui-kit';

@Component({
  standalone: true,
  imports: [CommonModule, IngeniaUiKitModule],
  // ...
})
export class MiComponente {}

Theming — personalización de color

Los componentes UI (ingenia-button, ingenia-input, ingenia-select, ingenia-range, ingenia-radio, ingenia-checkbox) usan CSS custom properties para el color de acento. El color por defecto es indigo (#4f46e5), pero puedes cambiarlo a cualquier color de marca sin recompilar la librería.

Variables disponibles

| Variable | Valor por defecto | Uso | |------------------------|-------------------|------------------------------------------| | --ing-accent | #4f46e5 | Color principal (fondo filled, borde, texto) | | --ing-accent-hover | #4338ca | Color al hacer hover en filled | | --ing-accent-light | #eef2ff | Fondo suave (hover en outlined/ghost) | | --ing-accent-mid | #818cf8 | Borde en estado focus de inputs | | --ing-accent-ring | 0 0 0 3px rgba(129,140,248,0.15) | Box-shadow de focus |

Cambio global — toda la app

En el styles.css de tu proyecto (después del @import de la librería):

@import "@ingeniacode/ui-kit/assets/styles.css";

:root {
  --ing-accent:       #059669;  /* verde esmeralda */
  --ing-accent-hover: #047857;
  --ing-accent-light: #ecfdf5;
  --ing-accent-mid:   #34d399;
}

Cambio por sección — scope local

Puedes aislar el color a un contenedor concreto usando la propiedad style:

<!-- Botones con color rosa solo en esta sección -->
<div style="--ing-accent: #db2777; --ing-accent-hover: #be185d; --ing-accent-light: #fdf2f8">
  <ingenia-button variant="filled">Comprar ahora</ingenia-button>
  <ingenia-button variant="outlined">Ver detalles</ingenia-button>
</div>

O en Angular con binding:

themeVars = { '--ing-accent': '#ea580c', '--ing-accent-hover': '#c2410c', '--ing-accent-light': '#fff7ed' };

<div [ngStyle]="themeVars">
  <ingenia-button>Reservar</ingenia-button>
</div>

Paletas de ejemplo

/* Indigo (por defecto) */
--ing-accent: #4f46e5; --ing-accent-hover: #4338ca; --ing-accent-light: #eef2ff; --ing-accent-mid: #818cf8;

/* Verde esmeralda */
--ing-accent: #059669; --ing-accent-hover: #047857; --ing-accent-light: #ecfdf5; --ing-accent-mid: #34d399;

/* Rosa */
--ing-accent: #db2777; --ing-accent-hover: #be185d; --ing-accent-light: #fdf2f8; --ing-accent-mid: #f472b6;

/* Naranja */
--ing-accent: #ea580c; --ing-accent-hover: #c2410c; --ing-accent-light: #fff7ed; --ing-accent-mid: #fb923c;

/* Azul */
--ing-accent: #2563eb; --ing-accent-hover: #1d4ed8; --ing-accent-light: #eff6ff; --ing-accent-mid: #60a5fa;

Componentes

| Selector | Tipo section | Input [data] | |-------------------------------|----------------------|------------------------------| | <ingenia-hero> | hero | HeroSection | | <ingenia-banner> | banner | BannerSection | | <ingenia-text> | text | TextSection | | <ingenia-text-block> | text_block | TextBlockSection | | <ingenia-video> | video | VideoSection | | <ingenia-gallery> | image_gallery | ImageGallerySection | | <ingenia-image-carousel> | image_carousel | ImageCarouselSection | | <ingenia-video-carousel> | video_carousel | VideoCarouselSection | | <ingenia-features> | features | FeaturesSection | | <ingenia-testimonials> | testimonials | TestimonialsSection | | <ingenia-faq> | faq | FaqSection | | <ingenia-cta> | cta | CtaSection | | <ingenia-countdown> | countdown | CountdownSection | | <ingenia-contact-form> | contact_form | ContactFormSection | | <ingenia-categories-grid> | categories_grid | CategoriesGridSection | | <ingenia-featured-products> | featured_products | FeaturedProductsSection | | <ingenia-social-feed> | social_feed | SocialFeedSection | | <ingenia-spacer> | spacer | SpacerSection |

Ejemplo — landing page dinámica

<ng-container *ngFor="let section of landing.sections">
  <ng-container [ngSwitch]="section.type">
    <ingenia-hero              *ngSwitchCase="'hero'"              [data]="section"></ingenia-hero>
    <ingenia-banner            *ngSwitchCase="'banner'"            [data]="section"></ingenia-banner>
    <ingenia-text              *ngSwitchCase="'text'"              [data]="section"></ingenia-text>
    <ingenia-text-block        *ngSwitchCase="'text_block'"        [data]="section"></ingenia-text-block>
    <ingenia-video             *ngSwitchCase="'video'"             [data]="section"></ingenia-video>
    <ingenia-gallery           *ngSwitchCase="'image_gallery'"     [data]="section"></ingenia-gallery>
    <ingenia-features          *ngSwitchCase="'features'"          [data]="section"></ingenia-features>
    <ingenia-testimonials      *ngSwitchCase="'testimonials'"      [data]="section"></ingenia-testimonials>
    <ingenia-faq               *ngSwitchCase="'faq'"               [data]="section"></ingenia-faq>
    <ingenia-cta               *ngSwitchCase="'cta'"               [data]="section"></ingenia-cta>
    <ingenia-countdown         *ngSwitchCase="'countdown'"         [data]="section"></ingenia-countdown>
    <ingenia-contact-form      *ngSwitchCase="'contact_form'"      [data]="section"></ingenia-contact-form>
    <ingenia-categories-grid   *ngSwitchCase="'categories_grid'"   [data]="section"></ingenia-categories-grid>
    <ingenia-featured-products *ngSwitchCase="'featured_products'" [data]="section"></ingenia-featured-products>
    <ingenia-social-feed       *ngSwitchCase="'social_feed'"       [data]="section"></ingenia-social-feed>
    <ingenia-spacer            *ngSwitchCase="'spacer'"            [data]="section"></ingenia-spacer>
  </ng-container>
</ng-container>

Desarrollo

Requisitos

• Node 18+
• Angular CLI 15

Comandos

# Servidor de desarrollo (demo app)
npm start

# Build completo: librería + CSS compilado + tarball
npm run build:lib

Flujo de publicación

# 1. Actualiza la versión
npm version patch   # 0.0.1 → 0.0.2
npm version minor   # 0.0.1 → 0.1.0

# 2. Build completo
npm run build:lib
# Genera: dist/ingenia-ui-kit/ingeniacode-ui-kit-x.x.x.tgz

# 3a. Publicar en npm
cd dist/ingenia-ui-kit
npm publish --access public --otp=XXXXXX

# 3b. O instalar localmente en otro proyecto
npm install --legacy-peer-deps /ruta/dist/ingenia-ui-kit/ingeniacode-ui-kit-x.x.x.tgz

Estructura del proyecto

UiKit/
├── projects/
│   ├── ingenia-ui-kit/          # Librería fuente
│   │   ├── src/lib/             # Componentes
│   │   ├── src/styles.css       # Entry CSS para Tailwind
│   │   ├── assets/styles.css    # CSS compilado (generado por build:lib)
│   │   └── ng-package.json
│   └── demo/                    # App de demostración
├── dist/ingenia-ui-kit/         # Build output
└── tailwind.config.js

Compatibilidad

| Angular | Compatible | |---------|------------| | 15.x | ✅ | | 16.x | ✅ |