@finedine/ui

Basis-Komponenten auf Radix, dazu der Rahmen jeder Fine-Dine-App.

import { AppShell, Button, DataTable, PageHeader, PermissionGate } from "@finedine/ui";
import { useMyApps, useUser } from "@finedine/auth";

function Frame({ children }) {
  const { profile } = useUser();
  const { apps } = useMyApps();

  return (
    <AppShell appId="meine_app" user={profile} apps={apps} nav={[...]}>
      {children}
    </AppShell>
  );
}

AppShell bringt Seitenleiste, AppSwitcher, ToastProvider und — der Punkt — die aktuellen Fine-Dine-Farben mit: die Komponente bindet cdn.app.fine-dine.de/v1/tokens.css selbst ein. Wer sie benutzt, kann optisch nicht wegdriften.

Enthalten

Button, Input, Textarea, Select, Card, Badge, Table, Dialog, Toast, Tabs, Skeleton, EmptyState, PageHeader, DataTable, AppShell, AppSwitcher, PermissionGate.

Bewusst wenige und stabile Komponenten: drei npm-Pakete sind Bibliotheksarbeit, und jede zusätzliche Komponente ist eine, die gepflegt werden muss.

Keine Farbwerte

Das Paket enthält keinen einzigen Hex-Wert und kein style={{...}} — ein Test (test/no-colors.test.ts) lässt den Build sonst scheitern. Alles läuft über Klassennamen, deren Werte zur Laufzeit kommen.

PermissionGate

<PermissionGate minRole="EDITOR">
  <Button>Speichern</Button>
</PermissionGate>

Blendet Bedienelemente aus. Das ist Kosmetik, kein Schutz — was jemand wirklich darf, entscheidet RLS in der Datenbank. Wer einen Button hier hineinlegt, muss die passende Policy trotzdem schreiben.

Tailwind

Die Klassennamen stehen im Paket, nicht in der App. Deshalb muss content das dist mitscannen:

content: ["./src/**/*.{ts,tsx}", "./node_modules/@finedine/ui/dist/**/*.js"];