Pengenalan Storybook

Pengenalan Storybook

Storybook adalah tool open-source untuk mengembangkan, mendokumentasikan, dan menguji komponen UI secara terisolasi dari aplikasi utama. Dengan Storybook, kita bisa fokus membangun komponen tanpa harus menjalankan seluruh aplikasi.

Mengapa Menggunakan Storybook?

• Isolated development — Develop dan debug komponen tanpa ketergantungan pada halaman lain
• Living documentation — Dokumentasi komponen yang selalu up-to-date dan interaktif
• Visual testing — Deteksi perubahan visual yang tidak disengaja
• Design handoff — Designer bisa langsung melihat dan berinteraksi dengan komponen

Cara Kerja

Setiap komponen memiliki file stories yang mendefinisikan berbagai state/variant komponen tersebut. Story adalah representasi komponen dalam kondisi tertentu.

// Button.stories.jsx
export default {
  title: "UI/Button",
  component: Button,
};

// Setiap named export adalah satu Story
export const Primary = { args: { label: "Klik Saya", variant: "primary" } };
export const Disabled = { args: { label: "Tidak Bisa", disabled: true } };
export const Loading = { args: { label: "Loading...", loading: true } };

Storybook bukan hanya untuk perusahaan besar. Bahkan untuk proyek pribadi, Storybook sangat membantu dalam membangun design system yang konsisten.