Setup & Konfigurasi

Setup & Konfigurasi Storybook

Menginstal dan mengkonfigurasi Storybook di project React sangat mudah. Storybook bisa dideteksi secara otomatis menggunakan storybook init.

Instalasi Otomatis

# Dari root project (Vite + React yang sudah ada)
npx storybook@latest init

Perintah ini akan secara otomatis mendeteksi framework yang digunakan dan menginstall semua dependensi yang diperlukan.

Struktur yang Dibuat

project/
├── .storybook/
│   ├── main.js          # Konfigurasi utama Storybook
│   └── preview.js       # Global decorators & parameters
└── src/
    └── stories/         # Contoh stories bawaan

File .storybook/main.js

const config = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
  },
};
export default config;

Menjalankan Storybook

npm run storybook
# Storybook berjalan di http://localhost:6006

Mengintegrasikan Global Styles

// .storybook/preview.js — import Tailwind atau CSS global
import "../src/index.css";

const preview = {
  parameters: {
    backgrounds: {
      default: "light",
    },
  },
};
export default preview;