Storybook

TL;DR: Storybook adalah perkakas open source untuk membangun, menguji, dan mendokumentasikan komponen antarmuka satu per satu, terpisah dari aplikasi utama. Hasilnya adalah katalog visual yang bisa dibuka tim desain, developer, dan marketer, sehingga semua orang melihat komponen yang sama sebelum masuk ke halaman produksi.

Apa itu Storybook?

Storybook menjalankan setiap komponen antarmuka (tombol, kartu harga, form, badge) di lingkungan terisolasi. Setiap variasi komponen ditulis sebagai satu story: tombol utama, tombol nonaktif, tombol sedang memuat. Semua story ini terkumpul dalam satu halaman katalog yang bisa dijelajahi tanpa perlu membuka aplikasi lengkap.

Analoginya adalah ruang pamer bahan bangunan. Sebelum rumah dibangun, Anda bisa memeriksa ubin, gagang pintu, dan cat satu per satu, di bawah pencahayaan yang jelas. Storybook memberi perlakuan sama pada komponen web. Praktik ini sejalan dengan pendekatan Atomic Design, yang memecah antarmuka menjadi unit terkecil sebelum menyusunnya menjadi halaman.

Apa yang Diselesaikan Storybook?

• Perbedaan persepsi antar tim. Desainer, developer, dan marketer sering membayangkan komponen yang berbeda saat menyebut nama yang sama. Katalog visual menghapus ambiguitas itu.
• Komponen kembar. Tanpa katalog, tim mudah membuat tombol kelima yang mirip dengan empat tombol yang sudah ada. Ini persoalan klasik yang dicegah design system yang terdokumentasi.
• Pengujian kondisi langka. Keadaan seperti error, data kosong, atau teks sangat panjang sulit dipicu di aplikasi nyata, tapi mudah disimulasikan sebagai story.
• Onboarding anggota baru. Developer baru bisa memahami inventaris komponen tanpa membaca seluruh basis kode.

Kenapa Penting?

Bagi tim kecil di Indonesia yang sering merangkap peran, Storybook memindahkan diskusi desain dari rapat ke artefak yang bisa dilihat bersama. Dalam beberapa proyek yang saya kerjakan dengan struktur atomic design, katalog komponen membuat permintaan revisi dari klien jadi lebih spesifik: alih-alih "tombolnya kurang enak dilihat", diskusi berpindah ke varian komponen tertentu yang jelas rujukannya.

Biayanya jujur: Storybook menambah satu artefak yang harus dirawat. Kalau katalognya usang, nilainya hilang. Untuk website satu halaman, perkakas ini biasanya berlebihan. Panduan instalasi dan konsep story tersedia di dokumentasi resmi Storybook.

Pertanyaan Umum

Apakah Storybook sama dengan design system?

Tidak. Design system adalah kumpulan aturan, token, dan komponen. Storybook adalah perkakas yang menampilkan dan mendokumentasikan komponen itu. Satu adalah isinya, satu lagi adalah etalasenya.

Apakah Storybook memperlambat website produksi?

Tidak. Storybook berjalan sebagai aplikasi terpisah saat pengembangan dan tidak ikut dikirim ke pengunjung website, kecuali Anda sengaja mempublikasikannya sebagai dokumentasi.

Kapan sebuah proyek belum butuh Storybook?

Saat jumlah komponen masih sedikit dan hanya satu orang yang menyentuh kode. Nilai Storybook tumbuh seiring jumlah komponen dan jumlah orang yang terlibat.