Frontend Academy · Pelajaran

Storybook: Story, Kontrol, dan Dokumentasi

Tulis story untuk setiap state komponen, gunakan Controls untuk mengubah props secara interaktif, dan buat halaman Docs dari JSDoc serta argTypes.

Storybook: Story, Kontrol, dan Dokumentasi adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Storybook?

Storybook adalah ruang kerja untuk komponen UI yang terisolasi dari aplikasi Anda. Anda menulis 'cerita' — contoh penggunaan setiap komponen dalam berbagai keadaan — lalu menjelajahinya di server pengembangan. Sangat penting untuk sistem desain.

Mengapa Menggunakan Storybook?

1) Kembangkan komponen secara terisolasi tanpa menyiapkan konteks aplikasi. 2) Tinjau semua keadaan secara visual (Loading, galat, Empty). 3) Desainer dan manajer produk dapat menjelajahi katalog. 4) Hasilkan dokumentasi. 5) Otomatiskan pengujian regresi visual.

Memasang Storybook

Gunakan penginisialisasi resmi — alat ini mendeteksi kerangka kerja Anda dan mengonfigurasi semuanya.

npx storybook@latest init

# Adds:
#  .storybook/        config
#  src/stories/       example stories
#  scripts: 'storybook' and 'build-storybook'

npm run storybook   # opens http://localhost:6006

Menulis Cerita (CSF 3.0)

Component Story Format 3: ekspor bawaan = metadata, ekspor bernama = cerita.

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

const meta: Meta<typeof Button> = {
  title: 'Atoms/Button',
  component: Button,
  tags: ['autodocs']
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' }
};

export const Disabled: Story = {
  args: { label: 'Save', variant: 'primary', disabled: true }
};

Beberapa Cerita untuk Setiap Komponen

Satu cerita untuk setiap keadaan penting: bawaan, saat kursor diarahkan, Loading, galat, Empty, dan Populated. Peninjau dapat mengekliknya satu per satu dan melihat setiap variasi secara sekilas.

export const Loading: Story = { args: { state: 'loading' } };
export const Error: Story    = { args: { state: 'error', message: 'Network failed' } };
export const Empty: Story    = { args: { items: [] } };
export const Populated: Story = { args: { items: mockItems } };

Kontrol (Tabel Args)

Pengaya Controls milik Storybook mengubah objek args menjadi kontrol formulir interaktif. Ubah nilai properti secara langsung di UI untuk menguji kasus ekstrem.

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger']
    },
    onClick: { action: 'clicked' }
  }
};

Pengaya Actions

Gunakan action() untuk mencatat pemanggilan penangan peristiwa di panel Actions. Sangat berguna untuk menguji panggilan balik tanpa menghubungkan status nyata.

argTypes: {
  onClick: { action: 'clicked' },
  onChange: { action: 'changed' }
}

Autodocs — Dokumentasi yang Dibuat Otomatis

Tambahkan tags: ['autodocs'] ke metadata; Storybook menghasilkan halaman Docs yang berisi tabel properti komponen, deskripsi, dan contoh yang dapat ditampilkan.

MDX untuk Dokumentasi yang Kaya

Tulis dokumentasi komponen dalam MDX — Markdown dengan JSX yang disematkan. Padukan uraian dengan contoh komponen langsung.

{/* Button.mdx */}
import { Meta, Story, Canvas } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

The primary action element.

## Variants
<Canvas of={ButtonStories.Primary} />
<Canvas of={ButtonStories.Secondary} />

Dekorator — Membungkus Cerita dengan Konteks

Bungkus cerita dalam penyedia (Theme, Router, Redux) menggunakan decorators.

export const decorators = [
  (Story) => (
    <ThemeProvider theme={lightTheme}>
      <Story />
    </ThemeProvider>
  )
];

Pengujian Regresi Visual

Chromatic (oleh tim Storybook) mengambil tangkapan layar setiap cerita pada setiap commit, lalu membandingkannya dengan garis dasar. Regresi visual terdeteksi secara otomatis.

Menerapkan Storybook

npm run build-storybook menghasilkan situs statis di storybook-static/. Terapkan ke Netlify, Vercel, atau GitHub Pages — ini memberi nonpengembang katalog komponen yang dapat dijelajahi.

Pemeriksaan Singkat

Apa yang dilakukan dengan menambahkan tags: ['autodocs'] ke metadata Storybook komponen?

Ringkasan: Storybook

Ruang kerja terisolasi untuk komponen UI. CSF 3.0: ekspor bawaan = meta, ekspor bernama = cerita. argTypes untuk Controls. action() untuk pencatatan panggilan balik. tags: ['autodocs'] untuk dokumentasi yang dibuat otomatis. MDX untuk uraian kaya + JSX. Decorators menyuntikkan penyedia. Chromatic untuk regresi visual. Build-storybook untuk penyajian statis.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Storybook: Story, Kontrol, dan Dokumentasi” gratis?

Ya — teks lengkap “Storybook: Story, Kontrol, dan Dokumentasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Storybook: Story, Kontrol, dan Dokumentasi”?

Tulis story untuk setiap state komponen, gunakan Controls untuk mengubah props secara interaktif, dan buat halaman Docs dari JSDoc serta argTypes. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Storybook: Story, Kontrol, dan Dokumentasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Storybook: Story, Kontrol, dan Dokumentasi
Token Desain dengan Style Dictionary
Pemberian Versi dan Publikasi ke npm
Menggunakan Sistem Desain

← Kembali ke Frontend Academy