Storybook Cheat Sheet

# Init di project yang udah ada (React, Vue, Svelte, Angular, dll)
npx storybook@latest init
 
# Install manual
npm install storybook @storybook/react @storybook/react-vite --dev
npx storybook init

.storybook/
  main.ts          # Konfigurasi Storybook
  preview.ts       # Global decorators dan parameters
src/stories/        # Contoh stories

# Dev mode (hot reload)
npm run storybook
 
# Build static storybook (untuk deploy)
npm run build-storybook
 
# Dengan custom port
npx storybook dev -p 6007
 
# CI mode (tanpa auto-open browser)
npx storybook dev --ci -p 6007

// src/components/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
 
const

export const Template: Story = {
  render: (args) => ({
    component: Button,
    props: args,
  }),
};
 
// Story dengan custom render
export

export const Playground: Story = {
  args: {
    variant: 'primary',
    size: 'md',
    children: 'Playground',
    disabled: false,
    loading: false,
  },

const meta = {
  argTypes: {
    // Text input
    label: { control: 'text' },
 
    // Number input
    count: { control: 'number'

// Global decorator untuk semua stories
const meta = {
  decorators: [
    (Story) => (
      <div style={{ padding: '20px', background: '#f0f0f0' }}>
        <

// .storybook/preview.ts
import type { Preview } from '@storybook/react';
 
const preview: Preview = {
  decorators: [
    (Story) => (
      <

// Per-story parameters
export const Canvas: Story = {
  parameters: {
    layout: 'fullscreen',
    backgrounds: { default: 'dark' },
    viewport: { defaultViewport: 'mobile1' },
  },
};
 

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';
 
const config: StorybookConfig = {
  stories: [
    '../src/**/*.mdx',

// Actions (event logging)
import type { Meta } from '@storybook/react';
 
const meta: Meta = {

import { expect } from '@storybook/test';
import { within, userEvent } from '@storybook/test';
 
export const LoginForm: Story = {

# Install
npm install @storybook/test-runner --dev
 
# Run tests (headless browser)
npm run test-storybook
 
# Dengan specific stories
npx test-storybook --url "http://localhost:6007" \
  --storyFilter "Components/Button/*"
 
# Watch mode
npx test-storybook --watch

// Import story sebagai test case
import { composeStories } from '@storybook/react';
import { render, screen } from '@testing-library/react';
import * as stories from './Button.stories';
 
const

// Title format dengan / untuk grouping
const meta = {
  title: 'Design System/Forms/Input',    // Group > Subgroup > Component
  component: Input,
};
 
// Atau dot notation
const meta = {
  title: 'Components.Input',  // Flat hierarchy dengan dot separator
  component: Input,
};

// Group related components
export default {
  title: 'Components/Form Controls',
} as Meta;
 
export const TextInput = {
  render: () => <TextInput />,
};
 
export const

export default {
  title: 'Pages/Login',
  component: LoginPage,
  parameters: {
    layout: 'fullscreen',
    viewport: { defaultViewport: 'desktop' },
  },
} as Meta<typeof LoginPage>;
 
export const

// .storybook/main.ts
// Combine multiple Storybooks dari berbagai repo
const config = {
  refs: {
    designSystem: {
      title: 'Design System',
      url: 'https://design-system.example.com/storybook',
    },
    adminPanel: {
      title: 'Admin Panel',
      url: 'https://admin.example.com/storybook'

# Build static files
npm run build-storybook
# Output: ./storybook-static/
 
# Deploy ke Vercel
npx vercel ./storybook-static --prod
 
# Deploy ke Netlify
npx netlify deploy --dir=./storybook-static --prod
 
# Deploy ke Chromatic (visual regression)
npx chromatic --project-token=YOUR_TOKEN

# Install
npm install chromatic --dev
 
# Publish storybook + run visual tests
npx chromatic
 
# CI integration
# GitHub Actions:
# - name: Publish to Chromatic
#   run: npx chromatic --project-token=${{ secrets.CHROMATIC_TOKEN }}