Component Stories
Menulis stories untuk default, variant, disabled, loading, dan edge case dengan args yang mencerminkan API nyata.
Tujuan belajar
- Memahami story sebagai rendered state component dengan args tertentu
- Menyusun meta dan named story exports yang typed
- Memilih stories dari variant, state, serta risk product
- Menggunakan args agar story mengikuti component API
Isi lesson
5 blok- 1.Story adalah bukti state yang dapat direviewBelum selesaiWajib
- 2.Stories typed untuk CourseButtonBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Story adalah bukti state yang dapat direview
WajibSatu story menangkap satu rendered state component dengan args tertentu. Default story memberi starting point, tetapi tidak cukup untuk component yang punya variant, disabled, loading, error, atau content panjang. Pilih story dari keputusan reviewer: apakah destructive Button tetap terbaca, apakah disabled action jelas, apakah FormField error dapat dipahami, atau apakah Card tanpa action masih utuh.
Story bukan screenshot marketing dan bukan daftar semua kombinasi props. Terlalu sedikit story menyembunyikan state penting; terlalu banyak story acak membuat sidebar sulit dipindai. Mulai dari default, variant yang didukung, state berisiko, dan satu edge case nyata. Args harus mengikuti component API agar controls serta type checking tetap berguna.
Bagian ini memengaruhi progres lesson.
Stories typed untuk CourseButton
Wajibimport type { Meta, StoryObj } from "@storybook/nextjs-vite";
import { CourseButton } from "./CourseButton";
const meta = { component: CourseButton } satisfies Meta<typeof CourseButton>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = { args: { variant: "primary", children: "Simpan perubahan" } };
export const Disabled: Story = { args: { variant: "primary", children: "Menyimpan...", disabled: true } };meta menghubungkan story file ke component, lalu StoryObj<typeof meta> menjaga args sesuai props CourseButton. Named exports memberi reviewer state yang dapat dibuka. Story tidak menjalankan workflow simpan sungguhan; ia mendokumentasikan UI state yang perlu dipakai serta diuji dalam product.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususWrite course button stories
Dokumentasikan CourseButton primary, destructive, dan disabled dengan typed meta serta args Storybook.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Story tambahan mana paling bernilai untuk CourseButton destructive?
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- Story mendokumentasikan rendered state component dengan args jelas.
- Mulai dari default, variant didukung, state berisiko, dan edge case nyata.
- Meta serta StoryObj menjaga story mengikuti component API.
- Story bukan pengganti workflow integration atau backend behavior.
- Berikutnya, story menjadi tempat menjalankan accessibility check dasar.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Story adalah bukti state yang dapat direview.