Storybook nima va u nima uchun kerak?

Savol

Storybook nima va u komponentlarni ishlab chiqishda qanday muammolarni hal qiladi?

Qisqa javob

Storybook — UI-komponentlarni ilovaning qolgan qismidan izolyatsiya qilingan holda ishlab chiqish, hujjatlashtirish va vizual testlash vositasi: har bir komponent turli propslar bilan holatlar to'plami — "hikoyalar" (stories) — orqali tasvirlanadi va butun ilovaning backend hamda routingini ishga tushirishga hojat qoldirmasdan alohida brauzer muhitida ochiladi.

Batafsil javob

Storybook hal qiladigan muammo: tugmaning loading yoki disabled holatida qanday ko'rinishini shunchaki ko'rish uchun, odatda ilovadan uni ishlatadigan ekranni topish, ilovani kerakli holatga yetkazish (login qilish, backend'dan kerakli ma'lumotlarni kutish) va shundan keyingina komponentni ko'rish kerak bo'ladi. Bu sekin va mo'rt.

Storybook komponentga alohida sandbox beradi:

• Har bir komponent stories fayli — oldindan belgilangan holatlar/variantlar to'plami (propslar, slotlar, bo'sh ro'yxat yoki xato kabi edge case'lar) — orqali tasvirlanadi.
• Loyihaning barcha komponentlarining o'z UI-katalogiga ega alohida dev-server sifatida ochiladi — bu haqiqiy koddan chetlashmaydigan jonli style guidega aylanadi (ko'pincha eskirib qoladigan Figma/Confluence'dagi statik hujjatlardan farqli o'laroq).
• Komponent izolyatsiyada ishlab chiqiladi: routing, store, avtorizatsiya, haqiqiy API'larni ishga tushirish shart emas — story darhol kerakli propslar/moklarni uzatadi.
• Vizual QA beradi: dizayner yoki QA komponentning barcha holatlarini (xato, bo'sh holat, uzun matn kabi kam uchraydiganlarini ham) ilova bo'ylab quvmasdan bir joyda ko'ra oladi.
• Vizual regressiya testlash vositalari (Chromatic, Percy) bilan integratsiyalashadi — har bir PR'da barcha hikoyalarning skrinshotlari avtomatik olinadi va etalon bilan solishtiriladi, bu ataylab bo'lmagan vizual o'zgarishlarni ushlaydi.
• Addonlarni qo'llab-quvvatlaydi: a11y-tekshiruvlar, viewport-emulyatsiya (moslashuvchanlik), interaktiv controls (proplarni to'g'ridan-to'g'ri UI'da o'zgartirish), tiplar/JSDoc'dan hujjatlarni avtogeneratsiya qilish.

Storybook ayniqsa dizayn-tizimlari va UI-kutubxonalarida qimmatli, u yerda komponent ko'plab joyda qayta ishlatiladi va uning shartnomasini (propslar, holatlar) uni ishlatuvchi aniq sahifalardan mustaqil ravishda ochiq va testlangan holda saqlash muhim.

Misol

// Button.stories.js
import Button from './Button.vue'

export default {
  title: 'UI/Button',
  component: Button,
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary', 'danger'] },
  },
}

export const Primary = {
  args: { variant: 'primary', label: 'Saqlash' },
}

export const Loading = {
  args: { variant: 'primary', label: 'Saqlash', loading: true },
}

export const Disabled = {
  args: { variant: 'primary', label: 'Saqlash', disabled: true },
}

# lokal Storybook'ni ishga tushirish va deploy uchun statik versiyasini yig'ish
npx storybook dev -p 6006
npx storybook build

Qo'shimcha savollar

• Chromatic orqali vizual regressiya testlash oddiy unit/komponent testlarni qanday to'ldiradi?
• Storybook monorepozitoriyda turli jamoalar o'rtasida komponentlarni qayta ishlatishga qanday yordam beradi?
• Loyihada Storybook'ni qo'llab-quvvatlashning qanday kamchiliklari/qo'shimcha xarajatlari bor?