@hoodiepartners/hoodiepartners-ui

Hoodie Partnersin yhtiöiden (Sadex, Wisol, ...) jaettu design system: token-pohjainen primitiivikirjasto Tailwind v4:lle ja React 19:lle. Rakennettu suoraan radix-ui-primitiivien, lucide-react-ikonien ja class-variance-authority-varianttien päälle — ei shadcn/ui-portaus, vaan oma kirjasto, joka käyttää samoja patterneja (forwardRef, asChild Radix Slotin kautta, CVA-variantit).

Sisältö

• theme.css — rakenteelliset tokenit (radius, shadow, surface-hierarkia, motion, semanttinen state-paletti)
• themes/sadex.css, themes/wisol.css — yhtiökohtaiset brand-tokenit
• lib/ — cn (clsx + tailwind-merge), Slot (radix-ui), cva, composeRefs
• primitives/ — 60+ komponenttia 13 kategoriassa:
  • typography: Heading, Text, Lead, Kbd, Code, Link
  • layout: Stack, Cluster, Grid, Container, Divider, Spacer
  • section: Section (heading-level-context), SectionHeader, Subsection
  • action: Button, IconButton, ButtonGroup
  • surface: Card, Panel, Hero, Banner, Callout, Alert, EmptyState
  • feedback: Badge, StatusBadge, StatusLight, StatusDot, Skeleton, Spinner, Progress, Stat
  • form: FormField + Input, Textarea, Select, Checkbox, RadioGroup, Switch, SegmentedControl, FileInput, OptionRating, RichTextField
  • disclosure: Accordion, Tabs, Collapsible, ShowMore
  • navigation: Breadcrumbs, NavList, Pagination, Stepper, TopBar, Sidebar
  • data: DefinitionList, KeyValue, DataTable, Timeline
  • overlay: Dialog, Drawer, Popover, Tooltip, Lightbox
  • media: Image, Gallery, MediaCard, VideoEmbed, AudioPlayer
  • domain: Avatar, CommentThread, AnnotationMarker

Periaatteet

• Komponentit käyttävät vain teematokeneita — ei kovakoodattuja värejä.
• Kaikki primitiivit forwardRef:llä, asChild Radix Slotin kautta siellä missä järkevää.
• Button välittää yksittäisen lapsen Slotille asChild:n kanssa kaatumisen välttämiseksi.
• Komponentit ovat domeenineutraaleja: ei kovakoodattuja labeleita, ei tarkastusspesifejä tilamääreitä. Kuluttaja antaa labelit, käyttäjäkohtainen semantiikka tulee teemasta.

Käyttö

// index.css
@import "tailwindcss";
@import "@hoodiepartners/hoodiepartners-ui/theme.css";
@import "@hoodiepartners/hoodiepartners-ui/themes/sadex.css";    /* tai themes/wisol.css */

import { Button, Card, Stack, cn } from '@hoodiepartners/hoodiepartners-ui';

<Card>
  <Stack>
    <Button variant="primary">Tallenna</Button>
  </Stack>
</Card>

Tailwind v4 -huomio

@hoodiepartners/hoodiepartners-ui sisältää Tailwind-luokkia komponenttien className-stringeissä. Tailwind v4 -auto-detection ei skannaa workspace-paketteja, joten kuluttaja-app:n globaalin CSS:n on syytä sisältää @source "../../node_modules/@hoodiepartners/hoodiepartners-ui/src/**/*.{ts,tsx}" -direktiivi, jotta luokat eivät tree-shakeudu pois.

Asennus

Paketti on julkinen npm-rekisterissä — ei tokenia eikä .npmrc:tä:

npm install @hoodiepartners/hoodiepartners-ui

Storybook

npm run storybook

Storybook sisältää tarinat per primitiivi sekä sovellettuja esimerkkejä (esim. kattotarkastusraportti), joissa primitiivit on koottu konkreettisiksi näkymiksi.