Menulis Stories

Menulis Stories yang Baik

Story yang baik mendokumentasikan semua kemungkinan state dari sebuah komponen. Prinsipnya: satu story, satu state komponen.

Format Component Story Format (CSF3)

// src/components/Badge/Badge.stories.jsx
import Badge from "./Badge";

// Default export = metadata story
export default {
  title: "UI/Badge",
  component: Badge,
  // argTypes mendefinisikan kontrol di Storybook UI
  argTypes: {
    variant: {
      control: "select",
      options: ["success", "warning", "danger", "info"],
    },
  },
};

// Named export = satu story
export const Success = {
  args: { label: "Aktif", variant: "success" },
};
export const Warning = {
  args: { label: "Menunggu", variant: "warning" },
};
export const Danger = {
  args: { label: "Error", variant: "danger" },
};
export const LongLabel = {
  args: { label: "Label yang sangat panjang", variant: "info" },
};

Story dengan Interaction

import { fn } from "@storybook/test";

export default {
  title: "UI/Button",
  component: Button,
  args: { onClick: fn() }, // Mock function untuk tracking klik
};

export const Clickable = {
  args: {
    label: "Klik Aku",
    onClick: fn(),
  },
};

Tips Menulis Story

• Buat story untuk setiap variant/state penting komponen
• Sertakan story untuk edge case — text panjang, kosong, loading state
• Gunakan argTypes untuk mendefinisikan kontrol yang dapat diinteraksikan di UI