chayns UI

chayns UI ist ein modulares UI-System auf Basis von React und TypeScript für chayns-Anwendungen. Es liefert konsistente, barrierefreie Core-Komponenten auf Grundlage zentraler Design Tokens – ohne Business-Logik und ohne Laufzeit-Magie.

• Storybook (Live): https://tobitsoftware.github.io/chayns-ui/
• Design-System-Referenz: https://tappqa.tobit.com/Bodywork/DesignSystem/
• Mitwirken & Releases: CONTRIBUTING.md

Ziele

• konsistente, wiederverwendbare UI-Komponenten,
• klare Trennung von UI und Business-Logik,
• zentrale Design Tokens und CSS-Variablen,
• Accessibility (WCAG 2.2 AA) von Beginn an,
• perfektes Tree-Shaking dank granularer, seiteneffektfreier Exports,
• eindeutige, maschinenlesbare Regeln für Komponenten und deren Einsatz.

Aktueller Projektstatus

Das Projekt ist gate-gesteuert. Der aktuelle Core umfasst unter anderem Buttons, Card, List, Accordion, Avatar, Badge, Banner, ComboBox, Popup und native Form Controls. Layout enthält AppLayout und Tabs. Jede Komponente besitzt eine dokumentierte Specification und Readiness-Bewertung unter docs/.

Pakete

Paket	Inhalt
@chayns-ui/core	React-Core-Komponenten (ESM-only, explizite CSS-Exports)
@chayns-ui/tokens	generierte Baseline- und Patch-CSS ohne JS-Runtime

In einem Projekt verwenden

pnpm add @chayns-ui/core @chayns-ui/tokens react

import { Button, IconButton, SplitButton } from '@chayns-ui/core';

// Einmal pro App die Token-Basis laden:
import '@chayns-ui/tokens/baseline.css';
import '@chayns-ui/tokens/patch.css';

// Pro genutzter Komponente das zugehörige CSS importieren:
import '@chayns-ui/core/button.css';

export function Example() {
  return (
    <>
      <Button icon="fa-floppy-disk" variant="primary">
        Speichern
      </Button>
      <IconButton aria-label="Optionen" icon="fa-ellipsis" variant="ghost" />
      <SplitButton
        items={[{ icon: 'fa-clock', text: 'Später senden', onClick: () => undefined }]}
        variant="primary"
      >
        Senden
      </SplitButton>
    </>
  );
}

Komponenten- und Token-CSS werden ausdrücklich importiert. Die Bibliothek lädt keine Fonts, injiziert kein CSS und kalibriert keine Accent-Farbe zur Laufzeit. Dadurch landet nur das im Bundle, was tatsächlich genutzt wird.

Verfügbare CSS-Exports von @chayns-ui/core umfassen button.css, card.css, avatar.css, list.css, accordion.css, badge.css, banner.css, combo-box.css, popup.css, split-button.css und die Form-Control-Dateien; alternativ steht gebündelt styles.css zur Verfügung.

Lokal entwickeln

Voraussetzungen: Node 24.19.0 und das über packageManager gepinnte pnpm 11.22.0.

corepack enable
corepack pnpm install --frozen-lockfile
corepack pnpm storybook   # Storybook unter http://localhost:6006
corepack pnpm verify      # komplette Qualitätskette

Anpassungen am Package, Namenskonventionen und der Release-Ablauf sind in CONTRIBUTING.md beschrieben.

Logische Bereiche

• Core UI
• Business Components
• Layout Components
• Design Tokens / CSS
• Documentation & AI Specifications