UUI: Designsystem für Web Components

UUI: Ein universelles Design-System für das Web mit Web Components

Das UUI-Design-System bietet eine minimale Menge an Web Components, um die Webentwicklung zu beschleunigen. Es ist framework-unabhängig und basiert auf den Prinzipien des atomaren Designs – mit grundlegenden Tokens für Farben, Typografie, Rundungen und Schatten. Die Komponenten sind leicht anpassbar und lassen sich nahtlos in React-, Vue-, Angular- oder reine JavaScript-Projekte integrieren. Damit wird das häufige Problem der inkonsistenten Benutzeroberflächen bei Teams, die mehrere Projekte betreuen, gelöst.

Das System konzentriert sich ausschließlich auf die visuelle Ebene und ist klar von der Geschäftslogik getrennt. Tokens werden ohne semantische Bedeutung definiert; die Richtlinien legen gültige Werte fest. Ungültige Attribute lösen Warnungen im Console-Log aus und fallen auf Standardwerte zurück.

Installation und Einrichtung

Installieren Sie das Paket über npm, nachdem Sie Ihren Token in .npmrc hinzugefügt haben:

npm install @ushliypakostnik/uui-library

Kopieren Sie die Schriften aus node_modules/@ushliypakostnik/uui-library/public/fonts nach public/fonts. Fügen Sie ein postinstall-Skript in package.json hinzu:

{
  "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('Schriften kopiert nach',dest);}else{console.log('Schriften nicht gefunden');}\""
  }
}

Initialisierung

Importieren und initialisieren:

import UUI from 'uui';

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

Optionen:

• isInitWC: true — initialisiert Web Components (für Vue3, Angular, reine JS).
• isAddNormalize: true — wendet CSS-Normalisierung an (empfohlen für neue Projekte).

TypeScript: Fügen Sie eine Moduldeklaration in *.d.ts hinzu:

declare module "@ushliypakostnik/uui-library";

Für React installieren Sie @types/react und erweitern JSX.IntrinsicElements für uui-text, uui-icon usw.

Framework-Integration

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: Verwenden Sie CUSTOM_ELEMENTS_SCHEMA in Komponenten. Initialisieren Sie mit isInitWC: true.

Vue3: Initialisieren Sie mit isInitWC: true. In ESLint fügen Sie Ignorierregeln für slot in uui-text, uui-icon hinzu.

Richtlinien und Tokens

Tokens sind in src/models/models.ts definiert:

• Typografie: Fonts.elena und andere.
• Rundungen: Roundings.dancing.
• Deckkraft: Opacities.waltz.
• Schatten: Shadows.antares.
• Farben: Colors.cat.

Die Konstante DESIGN enthält Breakpoints und Themen. Angular-Attribute verwenden camelCase.

Logische Attribute:

• Statisch (z. B. rounded): Immer aktiv.
• Dynamisch (z. B. loading): Spiegelt den Zustand unabhängig vom Wert wider.

Beispiel:

<!-- Statisch: immer abgerundet -->
<input rounded>

<!-- Dynamisch: zeigt Ladeindikator -->
<input loading>

Komponenten und Anpassung

UUI beinhaltet Kernkomponenten wie uui-text, uui-icon und weitere. Passen Sie Präfixe (z. B. ivanov-ivan-text) an. Komponenten nutzen Slots für Inhalte.

Nicht-semantische Tokens vereinfachen Migration und Skalierung. Designer liefern Token-Richtlinien; Entwickler implementieren atomare Komponenten.

Vorteile für Teams:

• Einheitliche visuelle Sprache unabhängig von Frameworks.
• Keine Konflikte durch CSS-Spezifität.
• Zentralisierte Styling-Verwaltung.
• Einfache Integration in Legacy-Projekte.

Wichtige Erkenntnisse

• Framework-Unabhängigkeit: Funktioniert mit jedem JS-Framework über Web Components.
• Minimalismus: Nur essentielle Tokens und Komponenten für schnellen Start.
• Anpassbarkeit: Präfixe und Tokens einfach ändern, ohne Code neu schreiben zu müssen.
• Atomares Design: Typografie, Farbe, Schatten folgen streng den Richtlinien.
• TypeScript-Unterstützung: Vollständige Typdefinitionen und JSX-Erweiterungen.

— Editorial Team