tobias
e1d570992e
Drei zusammengehörige Teile in einem Repository: - homeassistant/ Das fertige, im Einsatz befindliche Home-Assistant-Panel (panel_custom Custom Element + pyscript-Backend). Echte Fahrzeug- und Personendaten (fahrzeugprofil.json, fahrten.jsonl, tankvorgaenge.jsonl, Tankbelege) bleiben per .gitignore außen vor; die anonymisierte Vorlage fahrzeugprofil.example.json ist mit dabei. - design-system/ Eigenständige React-Komponentenbibliothek (@audi-dash/ui), die die visuelle Sprache des Panels nachbildet - ohne Audi-Markenzeichen und ohne die lizenzierte Hausschrift. Dient als Grundlage für Claude Design. War bis hierher ein eigenes Repository und ist in dieses eingeschmolzen worden. - companion-app/ Datenschicht der neuen App DataMetric360 (iOS/Android via Capacitor, zusätzlich als Iframe im HA-Dashboard). Noch ohne Oberfläche: REST- und WebSocket-Zugriff auf Home Assistant plus Warteschlange für Änderungen ohne Netz. Ersetzt das eingespritzte hass-Objekt, das nur innerhalb des HA-Frontends existiert. Dazu die Projektdokumentation: SPECIFICATION.md (Ist-Stand des Panels), COMPANION_APP_ARCHITECTURE.md (Architekturentscheidungen der neuen App), AUDIT_2026-08-10.md, DESIGN_BRIEF_DATAMETRIC360.md und der ursprüngliche Bauauftrag. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
67 lines
2.3 KiB
Markdown
67 lines
2.3 KiB
Markdown
# @audi-dash/ui
|
|
|
|
Generisches React-Komponenten-Set, das die visuelle Sprache des Audi-Dashboards (Kacheln,
|
|
Formularzeilen, Toggle, Segmented Control, Popups, Statusanzeigen, Fortschrittsanzeigen …)
|
|
nachbildet. Enthält **keine** Audi-Marken-Assets (Font "Audi Type", Ringe, Typenschild) - diese
|
|
sind laut Lizenzvereinbarung ausschließlich für die private Home-Assistant-Installation
|
|
freigegeben. Diese Bibliothek nutzt einen neutralen Fallback-Font-Stack (`Helvetica, Arial,
|
|
sans-serif`).
|
|
|
|
## Verwendung
|
|
|
|
Konsumierende Apps legen die `.ads-root`-Klasse um den Baum, der die Bibliothek nutzt, und setzen
|
|
`data-theme="nacht"` (Standard) oder `data-theme="tag"`:
|
|
|
|
```tsx
|
|
import { Tile, Feld, Switch } from "@audi-dash/ui";
|
|
import "@audi-dash/ui/styles.css";
|
|
|
|
function App() {
|
|
return (
|
|
<div className="ads-root" data-theme="nacht">
|
|
<Tile>
|
|
<Feld label="Beispiel">
|
|
<Switch checked={true} onChange={() => {}} />
|
|
</Feld>
|
|
</Tile>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Design-Tokens
|
|
|
|
Alle Farben/Radien/Abstände liegen als CSS-Custom-Properties in `src/tokens/tokens.css` vor -
|
|
Komponenten referenzieren ausschließlich `var(--token)`, nie Literal-Hex-Werte. Siehe die Datei
|
|
für die vollständige Liste (`--red`, `--canvas`, `--tile`, `--fg`/`--fg2`/`--fg3`, `--ok`/`--warn`/
|
|
`--bad`, `--r-tile`/`--r-pill`/`--r-func`, `--sp-1`…`--sp-5`).
|
|
|
|
## Typografie-Utility-Klassen
|
|
|
|
Reine Textstil-Hooks ohne eigene Komponentenstruktur (in `tokens.css` definiert) - direkt als
|
|
`className` anwenden:
|
|
|
|
| Klasse | Verwendung |
|
|
|---|---|
|
|
| `.ads-eyebrow` | Kleine Überschrift über einem Seitentitel (10px, uppercase, `--fg3`) |
|
|
| `.ads-title` | Seitentitel (23px, einzeilig, ellipsis) |
|
|
| `.ads-label` | Feld-/Kachel-Label (10px, uppercase, `--fg3`) |
|
|
| `.ads-sport` | Kursiver Akzenttext |
|
|
|
|
Die einzige Ausnahme mit echter interner Struktur ist die `Fig`-Komponente (großer Zahlenwert +
|
|
Einheit) - sie wird intern auch von `ProgressRing` und `StatGrid` genutzt.
|
|
|
|
## Komponenten
|
|
|
|
Pill, IconButton, Fig, StatusRow, ActionButton, Switch, Seg, RowList, LeafRow, Tile, Feld,
|
|
ProgressRing, ProgressBar, StatGrid, Accordion, SwipeRow, TabBar, Popup (+PopupMenuItem),
|
|
ImagePlaceholder. Props-Referenz: `.d.ts`-Dateien im Build bzw. die jeweilige `<Name>.tsx`.
|
|
|
|
## Build
|
|
|
|
```bash
|
|
npm install
|
|
npm run typecheck
|
|
npm run build
|
|
```
|