UUI: designový systém pro Web Components

UUI: vytvoření univerzální designové systému pro web pomocí Web Components

Designový systém UUI nabízí minimální sadu Web Components pro rychlý start vývoje. Je nezávislý na frameworku a využívá atomární design: základní tokeny pro barvy, typografii, zaoblení a stíny. Komponenty lze snadno přizpůsobit, což umožňuje jejich integraci do projektů s Reactem, Vue, Angularem nebo čistým JavaScriptem. Řeší tak problém nesouladného UI v týmech s více projekty.

Systém se zaměřuje na vizuální vrstvu oddělenou od obchodní logiky. Tokeny jsou definovány bez semantiky, pravidla určují povolené hodnoty. Při chybných atributech se zobrazí varování v konzoli s fallbackem na výchozí hodnoty.

Instalace a nastavení

Nainstalujte balíček prostřednictvím npm po přidání tokenu do .npmrc:

npm install @ushliypakostnik/uui-library

Zkopírujte písma z node_modules/@ushliypakostnik/uui-library/public/fonts do public/fonts. Přidejte skript postinstall do 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('Fonts copied to',dest);}else{console.log('Fonts not found');}\""
  }
}

Inicializace

Importujte a spusťte:

import UUI from 'uui';

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

Možnosti:

• isInitWC: true — inicializuje Web Components (pro Vue3, Angular, čistý JS).
• isAddNormalize: true — aplikuje CSS-normalizaci (pro nové projekty).

TypeScript: přidejte deklaraci modulu do *.d.ts:

declare module "@ushliypakostnik/uui-library";

Pro React nainstalujte @types/react a rozšiřte JSX.IntrinsicElements pro uui-text, uui-icon atd.

Integrace podle frameworků

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: Použijte CUSTOM_ELEMENTS_SCHEMA v komponentách. Inicializujte s isInitWC: true.

Vue3: Inicializujte s isInitWC: true. V ESLint přidejte ignorování slot pro uui-text, uui-icon.

Pravidla a tokeny

Tokeny v src/models/models.ts:

• Typografie: Fonts.elena a další.
• Zaoblení: Roundings.dancing.
• Průhlednost: Opacities.waltz.
• Stíny: Shadows.antares.
• Barvy: Colors.cat.

Konstanta DESIGN uchovává breakpointy a temy. Atributy v Angularu jsou ve stylu camelCase.

Logické atributy:

• Statické (např. rounded): vždy aktivní.
• Dynamické (např. loading): zobrazují stav bez ohledu na hodnotu.

Příklad:

<!-- Statický: vždy zaoblený -->
<input rounded>

<!-- Dynamický: zobrazí loader -->
<input loading>

Komponenty a přizpůsobení

UUI obsahuje základní prvky: uui-text, uui-icon atd. Přizpůsobte si předpony (např. ivanov-ivan-text). Komponenty využívají sloty pro obsah.

Nesemantické tokeny usnadňují migraci a škálování. Designéři poskytují pravidla s tokeny, vývojáři implementují atomy.

Výhody pro týmy:

• Jednotný vizuální jazyk bez závislosti na frameworku.
• Žádné konflikty specifičnosti CSS.
• Centrální správa stylů.
• Snadná integrace do legacy projektů.

Co je důležité

• Nezávislost: Funguje s jakýmkoli JS frameworkem prostřednictvím Web Components.
• Minimalismus: Pouze základní tokeny a komponenty pro rychlý start.
• Přizpůsobení: Snadná změna předpon a tokenů bez přepsání kódu.
• Atomární design: Tokeny pro typografii, barvy, stíny – striktně podle pravidel.
• Podpora TypeScriptu: Plné typy a rozšíření JSX.

— Editorial Team