Storybook: Hikâyeler, Denetimler ve Belgeler
Her bileşen durumu için hikâyeler yazmayı, özellikleri etkileşimli biçimde değiştirmek için Controls kullanmayı ve JSDoc ile argTypes üzerinden Docs sayfaları oluşturmayı öğrenin.
Storybook: Hikâyeler, Denetimler ve Belgeler, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Storybook Nedir
Storybook, uygulamanızdan yalıtılmış bir kullanıcı arayüzü bileşeni atölyesidir. Her bileşenin çeşitli durumlardaki örnek kullanımlarını 'öyküler' olarak yazıp bir geliştirme sunucusunda tararsınız. Tasarım sistemleri için vazgeçilmezdir.
Storybook Neden Kullanılır
1) Uygulama bağlamı kurmadan bileşenleri yalıtılmış hâlde geliştirin. 2) Tüm durumları (yükleniyor, hata, boş) görsel olarak inceleyin. 3) Tasarımcılar ve ürün yöneticileri kataloğa göz atabilir. 4) Belgelendirme oluşturur. 5) Görsel gerileme testlerini otomatikleştirir.
Storybook'u Kurma
Resmî başlatıcıyı kullanın — çatınızı algılar ve her şeyi yapılandırır.
npx storybook@latest init
# Adds:
# .storybook/ config
# src/stories/ example stories
# scripts: 'storybook' and 'build-storybook'
npm run storybook # opens http://localhost:6006Öykü Yazma (CSF 3.0)
Bileşen Öykü Biçimi 3: varsayılan dışa aktarma = üstveri, adlandırılmış dışa aktarmalar = öyküler.
// 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 }
};Bileşen Başına Birden Çok Öykü
Her önemli durum için bir öykü oluşturun: varsayılan, üzerine gelme, yükleniyor, hata, boş, doldurulmuş. İnceleyenler tıklayarak tüm çeşitleri bir bakışta görebilir.
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 } };Denetimler (Args Tablosu)
Storybook'un Controls eklentisi, args nesnesini etkileşimli form denetimlerine dönüştürür. Sınır durumlarını test etmek için özellik değerlerini kullanıcı arayüzünde anında değiştirin.
const meta: Meta<typeof Button> = {
component: Button,
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary', 'danger']
},
onClick: { action: 'clicked' }
}
};Actions Eklentisi
Olay işleyicisi çağrılarını Actions paneline günlüğe kaydetmek için action() kullanın. Gerçek bir durum bağlamadan geri çağrıları test etmek için idealdir.
argTypes: {
onClick: { action: 'clicked' },
onChange: { action: 'changed' }
}Autodocs — Otomatik Oluşturulan Belgeler
Üstveriye tags: ['autodocs'] ekleyin; Storybook, bileşenin özellik tablosunu, açıklamalarını ve görüntülenebilir örneklerini içeren bir Docs sayfası oluşturur.
Zengin Belgeler İçin MDX
Bileşen belgelerini MDX ile yazın — gömülü JSX içeren Markdown. Açıklama metnini canlı bileşen örnekleriyle birleştirin.
{/* 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} />Dekoratörler — Öyküleri Bağlamla Sarma
Öyküleri decorators kullanarak sağlayıcılarla (Theme, Router, Redux) sarın.
export const decorators = [
(Story) => (
<ThemeProvider theme={lightTheme}>
<Story />
</ThemeProvider>
)
];Görsel Gerileme Testleri
Storybook ekibinin geliştirdiği Chromatic, her gönderimde her öykünün ekran görüntüsünü alır ve temel görüntüyle karşılaştırır. Görsel gerilemeleri otomatik olarak yakalar.
Storybook'u Dağıtma
npm run build-storybook, storybook-static/ içinde statik bir site oluşturur. Netlify, Vercel veya GitHub Pages'e dağıtın — geliştirici olmayan kişilerin bileşen kataloğuna göz atmasını sağlar.
Hızlı Kontrol
Bir bileşenin Storybook üstverisine tags: ['autodocs'] eklemek ne yapar?
Özet: Storybook
Kullanıcı arayüzü bileşenleri için yalıtılmış atölye. CSF 3.0: varsayılan dışa aktarma = meta, adlandırılmış dışa aktarmalar = öyküler. Controls için argTypes. Geri çağrıları günlüğe kaydetmek için action(). Otomatik oluşturulan belgeler için tags: ['autodocs']. Zengin açıklama metni + JSX için MDX. Dekoratörler sağlayıcıları ekler. Görsel gerileme için Chromatic. Statik barındırma için build-storybook.
Sıkça Sorulan Sorular
“Storybook: Hikâyeler, Denetimler ve Belgeler” dersi ücretsiz mi?
Evet — “Storybook: Hikâyeler, Denetimler ve Belgeler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Storybook: Hikâyeler, Denetimler ve Belgeler” dersinde ne öğreneceğim?
Her bileşen durumu için hikâyeler yazmayı, özellikleri etkileşimli biçimde değiştirmek için Controls kullanmayı ve JSDoc ile argTypes üzerinden Docs sayfaları oluşturmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Storybook: Hikâyeler, Denetimler ve Belgeler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Storybook: Hikâyeler, Denetimler ve Belgeler
- Style Dictionary ile Tasarım Belirteçleri
- npm'ye Sürümleme ve Yayınlama
- Tasarım Sistemini Kullanma