React Academy · Pelajaran

Menulis Story CSF3

Ekspor objek meta bawaan dan story bernama menggunakan Component Story Format 3.

Menulis Story CSF3 adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Apa Itu CSF3?

Format Cerita Komponen 3 (CSF3) adalah format cerita Storybook saat ini. Cerita berupa objek JavaScript/TypeScript biasa—tidak diperlukan fungsi render untuk kasus sederhana.

Ekspor Meta

Setiap berkas cerita harus memiliki ekspor bawaan—objek Meta—yang menjelaskan komponen dan menetapkan konfigurasi cerita bersama.

import type { Meta } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'UI/Button',     // Storybook sidebar path
  component: Button,
  tags: ['autodocs'],     // enables auto-generated docs page
};

export default meta;

Ekspor Cerita Bernama

Setiap ekspor bernama dari berkas tersebut adalah sebuah cerita. Dalam CSF3, cerita berupa objek dengan properti args (properti komponen).

import type { StoryObj } from '@storybook/react';

type Story = StoryObj<typeof Button>;

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

export const Secondary: Story = {
  args: { label: 'Cancel', variant: 'secondary' },
};

export const Disabled: Story = {
  args: { label: 'Unavailable', disabled: true },
};

Pewarisan Cerita

Cerita mewarisi argumen dari objek meta. Tetapkan nilai bawaan bersama dalam meta.args dan timpa per cerita sesuai kebutuhan.

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    onClick: fn(), // from @storybook/test
    disabled: false,
  },
};

export const Large: Story = {
  args: { size: 'large', label: 'Large Button' }, // merges with meta args
};

Penggantian Fungsi Render

Sediakan fungsi render dalam sebuah cerita untuk kasus kompleks yang memerlukan pembungkusan JSX khusus atau beberapa instans.

export const WithIcon: Story = {
  render: (args) => (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button {...args} icon={<StarIcon />} />
      <Button {...args} icon={<HeartIcon />} />
    </div>
  ),
  args: { label: 'Action' },
};

Dekorator pada Cerita Individual

Tambahkan larik decorators ke sebuah cerita untuk membungkusnya dalam penyedia tambahan atau tata letak yang hanya berlaku untuk cerita tersebut.

export const InsideCard: Story = {
  decorators: [
    (Story) => (
      <div style={{ padding: 24, background: '#f5f5f5' }}>
        <Story />
      </div>
    ),
  ],
  args: { label: 'Card Button' },
};

Parameter pada Cerita

Gunakan parameters untuk mengonfigurasi add-on per cerita—misalnya, menetapkan latar atau area pandang untuk keadaan tertentu.

export const DarkMode: Story = {
  parameters: {
    backgrounds: { default: 'dark' },
  },
  args: { label: 'Dark Button', variant: 'primary' },
};

Tag Autodocs

Menambahkan tags: ['autodocs'] ke meta akan membuat halaman dokumentasi otomatis dengan tabel properti dan contoh langsung dari semua cerita bernama.

Cerita untuk Setiap Keadaan

Tulis sebuah cerita untuk setiap keadaan komponen yang bermakna: kosong, memuat, kesalahan, satu item, banyak item, tata letak RTL, dan sebagainya.

export const Loading: Story = { args: { isLoading: true } };
export const Error: Story = { args: { error: 'Failed to load' } };
export const Empty: Story = { args: { items: [] } };
export const WithData: Story = { args: { items: mockUsers } };

Konvensi Penamaan

Gunakan nama cerita PascalCase yang menjelaskan keadaannya. Hindari nama umum seperti Default—gunakan nama yang spesifik: PrimaryDisabled, SecondaryWithIcon.

Mengelompokkan Cerita dengan title

title dalam meta menggunakan notasi garis miring untuk membuat grup bertingkat di bilah sisi Storybook: 'Forms/Input' membuat grup Forms dengan subgrup Input.

const meta: Meta<typeof TextInput> = {
  title: 'Forms/TextInput',
  component: TextInput,
};
// Sidebar: Forms → TextInput → Primary, Error, Disabled...

Menggunakan Kembali Cerita dalam Pengujian

Cerita CSF3 adalah objek biasa, sehingga Anda dapat mengimpornya dan menyusunnya dalam pengujian unit atau cerita lainnya.

import { Primary } from './Button.stories';

test('renders primary button', () => {
  render(<Button {...Primary.args} />);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

Cek Singkat

Dalam CSF3, bagaimana Anda mendefinisikan properti atau keadaan sebuah cerita?

Ringkasan

Cerita CSF3 adalah objek bertipe dengan args. Tetapkan nilai bawaan bersama dalam meta.args, timpa per cerita, gunakan render untuk JSX khusus, dan tambahkan tags: ['autodocs'] untuk dokumentasi yang dibuat otomatis. Tulis sebuah cerita untuk setiap keadaan komponen yang bermakna.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menulis Story CSF3” gratis?

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

Apa yang akan aku pelajari di “Menulis Story CSF3”?

Ekspor objek meta bawaan dan story bernama menggunakan Component Story Format 3. Kamu berlatih React 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React 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 2 dari 4.

Berapa lama pelajaran “Menulis Story CSF3” 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 React Academy ini?

Ya. Setiap pelajaran React 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

← Kembali ke React Academy