Haaremy Design System

Gemeinsame UI-Komponentenbibliothek des Haaremy-Oekosystems. Stellt einheitliche, theme-faehige React/Next.js-Komponenten bereit, die in allen Haaremy-Projekten verwendet werden.

Package-Namespace: de.haaremy.design

Komponenten

| Komponente | Datei | Beschreibung | |---|---|---| | Button | button.tsx | Button mit Varianten: primary, secondary, warn, danger, navigation, switch | | CLink | link.tsx | Gestylter Next.js-Link (primary, warn, danger) | | Main | main.tsx | Seiten-Wrapper mit Theme-Hintergrund | | TextInput | textInput.tsx | Gestyltes Text-Eingabefeld | | TextArea | textarea.tsx | Gestyltes mehrzeiliges Eingabefeld | | SelectField | select.tsx | Gestyltes Select-Dropdown | | Checkbox | checkbox.tsx | Gestylte Checkbox mit optionalem Label | | Card | card.tsx | Container mit Varianten: default, flat, outlined | | Badge | badge.tsx | Status-Badge: primary, success, warn, danger, neutral | | Spinner | spinner.tsx | Lade-Indikator in drei Groessen | | Modal | modal.tsx | Overlay-Dialog mit Keyboard- und Backdrop-Close |

Alle Komponenten werden ueber cooperateDesign/index.ts exportiert.

Farbkonzept (Themes)

| Theme | Hintergrund | Buttons / Akzente | Text | |---|---|---|---| | Light | bg-pink-100 | bg-blue-300 | text-gray-900 | | Dark | bg-gray-900 | bg-pink-500 | text-white | | True Dark | bg-black | border-white | text-white |

Die Themes werden ueber Tailwind-CSS-Klassen (dark:, truedark:) gesteuert.

Installation

Das Repo als Git-Submodule oder per Path-Alias einbinden:

// tsconfig.json
{
  paths: {
    @cooperateDesign: [./cooperateDesign/index.ts],
    @cooperateDesign/*: [./cooperateDesign/*]
  }
}

Abhaengigkeiten: react, clsx, next (nur fuer CLink)

Verwendung

import { Button, Card, Badge, Modal, Spinner, TextArea, Checkbox } from @cooperateDesign;

// Card mit Badge
<Card variant=outlined padding=md>
  <Badge variant=success>Aktiv</Badge>
  <p>Inhalt der Karte</p>
</Card>

// Modal
const [open, setOpen] = React.useState(false);
<Button onClick={() => setOpen(true)}>Oeffnen</Button>
<Modal open={open} onClose={() => setOpen(false)} title=Titel>
  <p>Modal-Inhalt</p>
</Modal>

// Ladeindikator
<Spinner size=md />

// Formular
<TextArea placeholder=Nachricht... rows={4} />
<Checkbox label=Zustimmen />