Setup Awal
Buat Vite + React + TypeScript project. Install Tailwind CSS sesuai dokumentasi resmi. Install Storybook: npx storybook@latest init. Storybook auto-detect framework Anda.
Design Tokens dengan Tailwind
Definisikan color palette, typography scale, dan spacing di tailwind.config.ts. Gunakan CSS variables untuk dynamic theming (dark mode). Ini menjadi "source of truth" design system.
Struktur Component Library
- Atoms: Button, Input, Badge, Avatar
- Molecules: FormField, SearchBar, Card
- Organisms: Navbar, DataTable, Modal
Membuat Component dengan Story
Setiap component punya file .stories.tsx yang mendokumentasikan semua variant dan states. Gunakan Controls untuk interactive props, Actions untuk event logging.
Accessibility Testing
Install Storybook addon a11y. Setiap component harus pass accessibility audit: keyboard navigation, screen reader support, dan color contrast yang cukup.
Publishing
Deploy Storybook ke GitHub Pages atau Chromatic untuk shareable documentation. Publish component library sebagai npm package untuk konsumsi di berbagai project.