Addons & Decorators

Addons & Decorators

Storybook dapat diperluas dengan addons yang menambahkan fitur tambahan ke UI, dan decorators yang membungkus stories dengan context tambahan.

Addons Populer

• @storybook/addon-essentials — Bundle addon wajib: Docs, Controls, Actions, Viewport, Backgrounds
• @storybook/addon-a11y — Accessibility audit otomatis
• @storybook/addon-interactions — Testing interaksi user di stories

Decorators

Decorator adalah fungsi yang membungkus story dengan komponen tambahan — berguna untuk menyediakan context seperti theme provider, router, atau wrapper layout:

// Global decorator di .storybook/preview.js
import { ThemeProvider } from "./ThemeProvider";

const preview = {
  decorators: [
    (Story) => (
      <ThemeProvider>
        <div style={{ padding: "24px" }}>
          <Story />
        </div>
      </ThemeProvider>
    ),
  ],
};

Decorator Per Story

export const InDarkTheme = {
  args: { label: "Dark Button" },
  decorators: [
    (Story) => (
      <div className="dark bg-gray-900 p-8">
        <Story />
      </div>
    ),
  ],
};

Menggunakan Controls Addon

Controls memungkinkan pengguna Storybook mengubah props komponen secara langsung di UI tanpa perlu edit kode:

argTypes: {
  size: { control: "radio", options: ["sm", "md", "lg"] },
  color: { control: "color" },
  count: { control: { type: "range", min: 0, max: 100 } },
}