UI: Migrate from DaisyUI to Customable UI-Kit

jack commented

2026-03-02 12:30:19 +00:00

Owner

Problem

Das UI verwendet aktuell DaisyUI statt des Customable UI-Kits → inkonsistentes Design über Projekte hinweg.

Current Stack:

{
  "dependencies": {
    "daisyui": "^5.5.14",
    "tailwindcss": "^4.1.18"
  }
}

Gewünschte Änderung

Migration auf Customable UI-Kit:

{
  "dependencies": {
    "@customable/ui-kit": "^1.x.x"
  }
}

Vorteile

✅ Konsistentes Design über alle Customable-Projekte
✅ Gemeinsame Komponenten (weniger Duplikation)
✅ Type-Safety aus einem zentralen Paket
✅ Automatische Updates bei UI-Kit-Verbesserungen

Betroffene Komponenten

Existierende Komponenten (ersetzen)

Sidebar.tsx → UI-Kit Sidebar/Navigation
StatusBar.tsx → UI-Kit Status/Notification
SpawnWorkerModal.tsx → UI-Kit Modal
TokenCreateModal.tsx → UI-Kit Modal
Console.tsx → UI-Kit Console/Terminal (falls vorhanden)
CodeSnippets.tsx → UI-Kit Code Block

Primitive Komponenten (UI-Kit verwenden)

Buttons (aktuell DaisyUI btn)
Inputs/Forms
Cards
Tables
Badges/Tags
Loading Indicators

Fehlende UI-Kit Komponenten

Falls diese Komponenten noch nicht im UI-Kit existieren, bitte separate Issues in customable/ui-kit erstellen:

Chart Component (claude-mem nutzt Chart.js/react-chartjs-2) — Existiert als CLineChart, CBarChart, CPieChart (ui-kit#455)
Console/Terminal Component (für Live-Logs) — Existiert als CConsole (ui-kit#456)
Sidebar/Navigation Component — Existiert als CSidebar
Status Bar Component — App-spezifisch, kein generisches UI-Kit-Feature

Migration-Strategie

Phase 1: Setup

# UI-Kit installieren
pnpm add @customable/ui-kit --filter @claude-mem/ui

# DaisyUI entfernen
pnpm remove daisyui --filter @claude-mem/ui

Phase 2: Tailwind Config

// packages/ui/tailwind.config.ts
import { uiKitPreset } from '@customable/ui-kit/tailwind';

export default {
  presets: [uiKitPreset],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@customable/ui-kit/**/*.{js,jsx,ts,tsx}'
  ]
};

Phase 3: Komponenten migrieren

- import { Button } from 'daisyui';
+ import { Button } from '@customable/ui-kit';

Phase 4: Styles bereinigen

DaisyUI-Klassen entfernen (btn, card, badge, etc.)
UI-Kit-Klassen verwenden

Acceptance Criteria

@customable/ui-kit installiert
DaisyUI entfernt
Alle Komponenten verwenden UI-Kit
Tailwind Config nutzt UI-Kit Preset
Build funktioniert (pnpm build:ui)
Visuell identisch oder besser
Keine DaisyUI-Klassen mehr im Code

Priorität

Medium - Wichtig für Konsistenz, aber nicht dringend.

Siehe auch: Fehlende UI-Kit Komponenten (separate Issues)

## Problem Das UI verwendet aktuell **DaisyUI** statt des Customable UI-Kits → inkonsistentes Design über Projekte hinweg. **Current Stack:** ```json { "dependencies": { "daisyui": "^5.5.14", "tailwindcss": "^4.1.18" } } ``` ## Gewünschte Änderung **Migration auf Customable UI-Kit:** ```json { "dependencies": { "@customable/ui-kit": "^1.x.x" } } ``` ## Vorteile - ✅ **Konsistentes Design** über alle Customable-Projekte - ✅ **Gemeinsame Komponenten** (weniger Duplikation) - ✅ **Type-Safety** aus einem zentralen Paket - ✅ **Automatische Updates** bei UI-Kit-Verbesserungen ## Betroffene Komponenten ### Existierende Komponenten (ersetzen) - `Sidebar.tsx` → UI-Kit Sidebar/Navigation - `StatusBar.tsx` → UI-Kit Status/Notification - `SpawnWorkerModal.tsx` → UI-Kit Modal - `TokenCreateModal.tsx` → UI-Kit Modal - `Console.tsx` → UI-Kit Console/Terminal (falls vorhanden) - `CodeSnippets.tsx` → UI-Kit Code Block ### Primitive Komponenten (UI-Kit verwenden) - Buttons (aktuell DaisyUI `btn`) - Inputs/Forms - Cards - Tables - Badges/Tags - Loading Indicators ## Fehlende UI-Kit Komponenten Falls diese Komponenten **noch nicht im UI-Kit existieren**, bitte separate Issues in `customable/ui-kit` erstellen: - [x] **Chart Component** (claude-mem nutzt Chart.js/react-chartjs-2) — Existiert als CLineChart, CBarChart, CPieChart (ui-kit#455) - [x] **Console/Terminal Component** (für Live-Logs) — Existiert als CConsole (ui-kit#456) - [x] **Sidebar/Navigation Component** — Existiert als CSidebar - [x] **Status Bar Component** — App-spezifisch, kein generisches UI-Kit-Feature ## Migration-Strategie ### Phase 1: Setup ```bash # UI-Kit installieren pnpm add @customable/ui-kit --filter @claude-mem/ui # DaisyUI entfernen pnpm remove daisyui --filter @claude-mem/ui ``` ### Phase 2: Tailwind Config ```typescript // packages/ui/tailwind.config.ts import { uiKitPreset } from '@customable/ui-kit/tailwind'; export default { presets: [uiKitPreset], content: [ './src/**/*.{ts,tsx}', './node_modules/@customable/ui-kit/**/*.{js,jsx,ts,tsx}' ] }; ``` ### Phase 3: Komponenten migrieren ```diff - import { Button } from 'daisyui'; + import { Button } from '@customable/ui-kit'; ``` ### Phase 4: Styles bereinigen - DaisyUI-Klassen entfernen (`btn`, `card`, `badge`, etc.) - UI-Kit-Klassen verwenden ## Acceptance Criteria - [x] `@customable/ui-kit` installiert - [x] DaisyUI entfernt - [x] Alle Komponenten verwenden UI-Kit - [x] Tailwind Config nutzt UI-Kit Preset - [x] Build funktioniert (`pnpm build:ui`) - [x] Visuell identisch oder besser - [x] Keine DaisyUI-Klassen mehr im Code ## Priorität **Medium** - Wichtig für Konsistenz, aber nicht dringend. ## Related Siehe auch: Fehlende UI-Kit Komponenten (separate Issues)