UUI : système de design pour Web Components

UUI : Construire un système de design universel pour le web avec des composants Web

Le système de design UUI fournit un ensemble minimal de composants Web pour accélérer le développement web. Il est indépendant des frameworks et s'appuie sur les principes du design atomique — en utilisant des jetons fondamentaux pour les couleurs, la typographie, les arrondis et les ombres. Les composants sont facilement personnalisables, ce qui permet une intégration fluide dans des projets React, Vue, Angular ou même en JavaScript pur. Cela résout le problème courant d'incohérence de l'interface entre équipes gérant plusieurs projets.

Le système se concentre uniquement sur la couche visuelle, parfaitement séparée de la logique métier. Les jetons sont définis sans signification sémantique ; les guides précisent les valeurs valides. Les attributs non valides déclenchent des avertissements dans la console et retombent sur les valeurs par défaut.

Installation et configuration

Installez le paquet via npm après avoir ajouté votre jeton à .npmrc :

npm install @ushliypakostnik/uui-library

Copiez les polices depuis node_modules/@ushliypakostnik/uui-library/public/fonts vers public/fonts. Ajoutez un script postinstall dans 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('Polices copiées vers',dest);}else{console.log('Polices non trouvées');}\""
  }
}

Initialisation

Importez et initialisez :

import UUI from 'uui';

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

Options :

• isInitWC: true — initialisation des composants Web (pour Vue3, Angular, JS pur).
• isAddNormalize: true — application de la normalisation CSS (recommandé pour les nouveaux projets).

TypeScript : ajoutez une déclaration de module dans *.d.ts :

declare module "@ushliypakostnik/uui-library";

Pour React, installez @types/react et étendez JSX.IntrinsicElements pour uui-text, uui-icon, etc.

Intégration aux 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 : utilisez CUSTOM_ELEMENTS_SCHEMA dans les composants. Initialisez avec isInitWC: true.

Vue3 : initialisez avec isInitWC: true. Dans ESLint, ajoutez des règles d'ignorance pour slot dans uui-text, uui-icon.

Guides et jetons

Les jetons sont définis dans src/models/models.ts :

• Typographie : Fonts.elena et autres.
• Arrondis : Roundings.dancing.
• Opacité : Opacities.waltz.
• Ombres : Shadows.antares.
• Couleurs : Colors.cat.

La constante DESIGN contient les points de rupture et les thèmes. Les attributs Angular utilisent la casse camel.

Attributs logiques :

• Statique (ex. rounded) : toujours actif.
• Dynamique (ex. loading) : reflète l'état indépendamment de sa valeur.

Exemple :

<!-- Statique : toujours arrondi -->
<input rounded>

<!-- Dynamique : affiche le chargeur -->
<input loading>

Composants et personnalisation

UUI inclut des éléments de base comme uui-text, uui-icon, et bien d'autres. Personnalisez les préfixes (ex. ivanov-ivan-text). Les composants utilisent des slots pour le contenu.

Les jetons non sémantiques simplifient la migration et l'évolution. Les designers fournissent les guides de jetons ; les développeurs implémentent les composants atomiques.

Avantages pour les équipes :

• Langage visuel unifié, indépendant des frameworks.
• Pas de conflits de spécificité CSS.
• Gestion centralisée des styles.
• Intégration facile dans les projets existants.

Points clés

• Indépendance des frameworks : fonctionne avec tout framework JS via les composants Web.
• Minimalisme : seulement les jetons et composants essentiels pour un démarrage rapide.
• Personnalisation : modification facile des préfixes et jetons sans réécriture de code.
• Design atomique : les jetons de typographie, couleur et ombre suivent strictement les guides.
• Prise en charge TypeScript : définitions de types complètes et extensions JSX.

— Editorial Team