UUI: sistema de diseño para Web Components

UUI: Creando un sistema de diseño universal para la web con componentes web

El sistema de diseño UUI ofrece un conjunto mínimo de componentes web para acelerar el desarrollo web. Es independiente de marcos y se basa en principios de diseño atómico, utilizando tokens fundamentales para colores, tipografía, redondeos y sombras. Los componentes son fácilmente personalizables, lo que permite una integración fluida en proyectos de React, Vue, Angular o JavaScript puro. Esto resuelve el problema común de interfaces inconsistentes entre equipos que gestionan múltiples proyectos.

El sistema se centra únicamente en la capa visual, claramente separada de la lógica de negocio. Los tokens se definen sin significado semántico; las guías especifican valores válidos. Atributos inválidos generan advertencias en la consola y se reemplazan por valores predeterminados.

Instalación y configuración

Instala el paquete mediante npm después de agregar tu token a .npmrc:

npm install @ushliypakostnik/uui-library

Copia las fuentes desde node_modules/@ushliypakostnik/uui-library/public/fonts a public/fonts. Agrega un script postinstall en package.json:

{
  "scripts": {
    "postinstall": "node -e \"const fs=require('fs');const path=require('path');const src=path.join(__dirname,'node_modules/@ushliypakostnik/uui-library/public/fonts');const dest=path.join(__dirname,'public/fonts');if(fs.existsSync(src)){fs.cpSync(src,dest,{recursive:true});console.log('Fuentes copiadas a',dest);}else{console.log('Fuentes no encontradas');}\""
  }
}

Inicialización

Importa e inicializa:

import UUI from 'uui';

new UUI({ isInitWC: true, isAddNormalize: true });

Opciones:

• isInitWC: true — inicializa componentes web (para Vue3, Angular, JS puro).
• isAddNormalize: true — aplica normalización CSS (recomendado para nuevos proyectos).

TypeScript: Agrega una declaración de módulo en *.d.ts:

declare module "@ushliypakostnik/uui-library";

Para React, instala @types/react y extiende JSX.IntrinsicElements para uui-text, uui-icon, etc.

Integración con frameworks

React:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import UUI from '@ushliypakostnik/uui-library';
import App from './App.tsx';

new UUI();

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <>
      <App />
    </>
  </StrictMode>,
);

Angular: Usa CUSTOM_ELEMENTS_SCHEMA en los componentes. Inicializa con isInitWC: true.

Vue3: Inicializa con isInitWC: true. En ESLint, agrega reglas de ignorar para slot en uui-text, uui-icon.

Guías y tokens

Los tokens se definen en src/models/models.ts:

• Tipografía: Fonts.elena y otros.
• Redondeo: Roundings.dancing.
• Opacidad: Opacities.waltz.
• Sombras: Shadows.antares.
• Colores: Colors.cat.

La constante DESIGN contiene puntos de quiebre y temas. Los atributos de Angular usan camelCase.

Atributos lógicos:

• Estáticos (por ejemplo, rounded): siempre activos.
• Dinámicos (por ejemplo, loading): reflejan estado sin importar el valor.

Ejemplo:

<!-- Estático: siempre redondeado -->
<input rounded>

<!-- Dinámico: muestra cargador -->
<input loading>

Componentes y personalización

UUI incluye elementos principales como uui-text, uui-icon y más. Personaliza prefijos (por ejemplo, ivanov-ivan-text). Los componentes usan slots para contenido.

Tokens no semánticos simplifican la migración y escalabilidad. Los diseñadores proporcionan directrices de tokens; los desarrolladores implementan componentes atómicos.

Beneficios para equipos:

• Lenguaje visual unificado independiente de marcos.
• Sin conflictos de especificidad CSS.
• Gestión centralizada de estilos.
• Integración sencilla en proyectos heredados.

Conclusiones clave

• Independencia de framework: Funciona con cualquier marco JS mediante componentes web.
• Minimalismo: Solo tokens y componentes esenciales para arranque rápido.
• Personalización: Cambia prefijos y tokens fácilmente sin reescribir código.
• Diseño atómico: Tokens de tipografía, color y sombra siguen estrictamente las guías.
• Soporte TypeScript: Definiciones de tipo completas y extensiones JSX.

— Editorial Team