Rivki Dev Logo
Mengenal Storybook Framework untuk Mengembangkan dan Menguji Komponen UI

Mengenal Storybook Framework untuk Mengembangkan dan Menguji Komponen UI

Written on • 3 min read

Apa itu Storybook Mengapa menggunakan Storybook Instalasi Storybook di repository frontend Menambahkan komponen UI ke dalam Storybook Menjalankan Storybook Kelebihan menggunakan Storybook dalam repository frontend Kesimpulan

Apa itu Storybook

Storybook adalah sebuah framework open source yang digunakan untuk mengembangkan dan menguji komponen-komponen UI secara terpisah dari aplikasi utama. Dengan menggunakan Storybook, kita dapat dengan mudah mengembangkan, menguji, dan menampilkan komponen-komponen UI tanpa harus menjalankan aplikasi utama.

Storybook dapat digunakan bersama dengan berbagai teknologi frontend seperti React, Vue, Angular, dll. Selain itu, Storybook juga mendukung beberapa fitur unggulan seperti:

  • Dokumentasi komponen-komponen UI secara otomatis
  • Preview komponen-komponen UI di berbagai device dan ukuran layar
  • Integrasi dengan berbagai tools seperti Jest, Enzyme, dll.
  • Dukungan untuk berbagai addons yang dapat menambah fitur-fitur baru pada Storybook.

Storybook sangat berguna bagi tim pengembang frontend dalam mengembangkan dan menguji komponen-komponen UI secara efektif dan terstruktur.

Mengapa menggunakan Storybook

Ada beberapa alasan mengapa menggunakan Storybook dalam pengembangan aplikasi frontend, diantaranya:

  1. Memisahkan pengembangan dan pengujian komponen UI dari aplikasi utama. Dengan menggunakan Storybook, kita dapat mengembangkan dan menguji komponen-komponen UI secara terpisah dari aplikasi utama. Ini sangat berguna untuk mengurangi ketergantungan antar bagian dalam aplikasi dan mempercepat proses pengembangan.

  2. Dokumentasi komponen-komponen UI secara otomatis. Storybook menyediakan fitur untuk menampilkan dokumentasi komponen-komponen UI secara otomatis. Anda dapat menambahkan deskripsi, contoh penggunaan, dan lain-lain di dalam file .stories.tsx yang akan ditampilkan di halaman dokumentasi Storybook.

  3. Preview komponen-komponen UI di berbagai device dan ukuran layar. Dengan menggunakan Storybook, Anda dapat melakukan preview komponen-komponen UI di berbagai device dan ukuran layar. Ini sangat berguna untuk memastikan komponen-komponen UI yang dikembangkan dapat ditampilkan dengan baik di berbagai device dan ukuran layar.

Instalasi Storybook di repository frontend

Untuk menginstal Storybook di repository frontend, pertama-tama Anda perlu menjalankan perintah berikut:

npx storybook init

Perintah tersebut akan menginstal semua dependensi yang dibutuhkan, serta mengenerate file-file yang dibutuhkan untuk menjalankan Storybook.

Selanjutnya, Anda dapat menambahkan komponen-komponen UI ke dalam Storybook dengan menambahkan file-file .stories.tsx ke dalam folder stories yang telah dibuat oleh perintah init tadi. Setiap file .stories.tsx akan menjadi sebuah cerita yang menampilkan komponen UI yang ada di dalamnya.

Contoh file .stories.tsx sebagai berikut:

import React from "react";
import { Button } from "./Button";

export default {
  title: "Button",
  component: Button,
};

export const Text = () => <Button>Hello Button</Button>;
export const Emoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

Setelah menambahkan komponen-komponen UI ke dalam Storybook, Anda dapat menjalankan Storybook dengan mengetikkan perintah npm run storybook atau yarn storybook di terminal. Storybook akan menjalankan server di localhost dan menampilkan halaman default Storybook di browser.

Menambahkan komponen UI ke dalam Storybook

GithubLinkedInYouTubeInstagramTwitterEmail