nexarch/web/shl/README.md

@nexarch/shl — UI-Shell & Design-System (Core SHL-01)

Gemeinsames Paket für alle NEXARCH-Modul-Frontends (Core, DMS, Mail, Archive, Workflow, AI, Connect). Ein Modul-Frontend importiert ausschließlich über index.ts, kopiert keine Komponenten oder Tokens lokal.

Enthält

• Design-Tokens (tokens/tokens.ts) — Farbe (Hell/Dunkel), Abstand, Typografie. Kontrastwerte gegen WCAG 2.1 AA geprüft (siehe __tests__/tokens.test.ts).
• Theming (theme/ThemeProvider.tsx) — zentrale Hell/Dunkel-Umschaltung, respektiert prefers-color-scheme, persistiert in localStorage.
• i18n-Rahmen (i18n/i18n.tsx) — Umschaltmechanismus Deutsch/Englisch. Modul-Frontends registrieren ihre fachlichen Textbausteine über registerMessages(), statt einen eigenen Mechanismus zu bauen.
• Basis-Komponenten (components/) — Shell (Layout + Navigation), Table, Dialog, TextField/SelectField/CheckboxField, Toast. Alle mit WCAG-2.1-AA-Grundlage (Tastaturbedienung, ARIA-Attribute, Fokus-Management).

Verwendung in einem Modul-Frontend

import { ThemeProvider, I18nProvider, ToastProvider, Shell } from "@nexarch/shl";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider>
      <I18nProvider initialLocale="de">
        <ToastProvider>
          <Shell modules={[]} tenantLabel="Mandant XY">
            {children}
          </Shell>
        </ToastProvider>
      </I18nProvider>
    </ThemeProvider>
  );
}

Bekannter offener Punkt

Die vier bereits gebauten Core-Frontends (TEN-05, LIC-04, AUD-04, OPS-02) sind vor diesem Paket entstanden und binden es noch nicht ein — Retrofit ist der nächste Schritt, siehe nexarch-state.json.

Tests

Ausführung auf dem Test-Host (nicht lokal, siehe Projekt-Testinfrastruktur):

npm install
npm test
npm run typecheck