46 lines
1.9 KiB
Markdown
46 lines
1.9 KiB
Markdown
# @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
|
|
|
|
```tsx
|
|
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):
|
|
|
|
```bash
|
|
npm install
|
|
npm test
|
|
npm run typecheck
|
|
```
|