@ipulsehq/ui

Gedeeld iPulse design system: één set React UI-componenten (Button, Badge, Input, Card, Alert, ...) voor alle Pulse-apps en interne tools, zodat knoppen en inputs overal identiek zijn. Zie taak #311.

Repository: https://github.com/iPulseHQ/iPulse

Waarom

Vandaag heeft elke app een eigen button.tsx, badge.tsx, enzovoort (PulseGuard met Radix + cva, iPulse en PulseFiles met losse varianten). Dit package centraliseert die primitives, zodat een wijziging aan bijvoorbeeld de button op één plek gebeurt.

Hoe het werkt

• Componenten dragen genaamde CSS-klassen (ipui-btn, ipui-card, ...) die gedefinieerd zijn in één stylesheet: @ipulsehq/ui/styles.css.
• Die stylesheet is gebouwd op de gedeelde design-tokens (--color-primary, --color-border, --radius-md, ...). Apps die deze tokens al exposen (PulseGuard, iPulse, PulseFiles) krijgen automatisch hun thema, accentkleur en dark mode. Tools zonder die tokens vallen terug op nette neutrale defaults, dus componenten zijn nooit ongestyled.
• Geen Tailwind-, Radix- of icon-library-dependency. Werkt in Vite, Next en losse interne tools.

Installatie

npm install @ipulsehq/ui          # of: bun add @ipulsehq/ui

In de monorepo (iPulse zelf) via de workspace:

// package.json
"dependencies": { "@ipulsehq/ui": "workspace:*" }

Gebruik

Importeer de stylesheet één keer in de app-root (naast je eigen globals):

import '@ipulsehq/ui/styles.css';

Daarna overal:

import { Button, Card, CardHeader, CardTitle, Input, Label } from '@ipulsehq/ui';

<Button variant="primary" size="md" loading={saving}>Opslaan</Button>
<Button variant="outline" asChild><a href="/docs">Docs</a></Button>

<Card>
  <CardHeader>
    <CardTitle>Profiel</CardTitle>
  </CardHeader>
</Card>

Elk component accepteert className voor overrides en spreidt de native DOM-props door. In Tailwind-apps kun je dus gewoon utility-classes meegeven.

Componenten

| Component | Varianten | Maten | | --- | --- | --- | | Button | primary, secondary, outline, ghost, destructive, link | sm, md, lg, icon, icon-sm, icon-lg | | Badge | primary, secondary, outline, destructive, success | — | | Input | — | — | | Textarea | — | — | | Label | — | — | | Card (+ CardHeader/Title/Description/Content/Footer) | — | — | | Alert (+ AlertTitle/Description) | default, destructive | — | | Skeleton | — | — | | Spinner | — | size (px) | | Separator | — | orientation | | Switch | — | — | | Checkbox | — | — | | Avatar (+ AvatarImage/AvatarFallback) | — | size | | Progress | — | — | | Tabs (+ TabsList/TabsTrigger/TabsContent) | — | — | | VisuallyHidden | — | — |

Plus utilities: Slot (voor asChild), cn en getInitials.

Interactieve componenten met portals/positionering (Dialog, Dropdown, Select, Tooltip, Popover, ...) staan bewust nog niet in v0.x: die vragen een positioning-dependency en komen in een aparte fase.

Een component toevoegen

1. Voeg de stijl toe in styles.css met een ipui--prefix, gebouwd op de gedeelde tokens (met fallback).
2. Maak src/components/<naam>.tsx (forwardRef, className mergen via cn).
3. Exporteer component + props-type in src/index.ts.
4. Werk de tabel hierboven bij.

Bouwen & publiceren

cd packages/ipulse-ui
npm run build          # tsc --build -> dist/
npm publish            # public op registry.npmjs.org

Verhoog de version in package.json volgens semver bij elke publish.