Storybook ilə Komponent Library Qurmaq: Praktiki Bələdçi

Storybook ilə Komponent Library Qurmaq: Praktiki Bələdçi

Salam, developer dostlar! Bu gün Bakıda front-end müsahibələrdə getdikcə daha çox soruşulan bir mövzudan danışacağıq: Storybook ilə komponent library yaratmaq. Əgər ABB, Kapital Bank, PASHA Holding və ya digər yerli şirkətlərdə front-end developer kimi işləyirsinizsə (və ya işləmək istəyirsinizsə), bu skill sizin üçün ciddi üstünlükdür. Bakıda mid-level React developer maaşı 1500-3000 AZN arasında dəyişir, amma komponent library təcrübəsi olan birinin CV-si həmişə fərqlənir.

Storybook Nədir və Niyə Lazımdır?

Storybook — UI komponentlərinizi izolasiyada inkişaf etdirmək, test etmək və sənədləşdirmək üçün açıq mənbəli alətdir. 2025-ci ilin statistikasına görə, GitHub-da 85,000+ star toplayıb və Fortune 100 şirkətlərinin 70%-dən çoxu istifadə edir.

Gəlin sadə dillə deyək: Storybook sizin komponentləriniz üçün interaktiv kataloqdur. Dizayner "bu düyməni göstər" deyəndə, siz ona Storybook linkini göndərirsiniz. QA mühəndisi edge case-ləri yoxlamaq istəyəndə, Storybook-da hər vəziyyəti görə bilir. PM "bu komponent nə edir?" soruşanda, cavab artıq sənədləşdirilib.

Niyə Azərbaycan bazarında vacibdir?

• Bakıdakı startuplar kiçik komandalarla işləyir — sənədləşdirmə çox vaxt unudulur
• Outsource layihələrdə müştəriyə UI-ı göstərmək üçün ideal vasitədir
• Komandaya yeni developer gələndə onboarding vaxtını 40-60% azaldır

Layihəni Sıfırdan Quraq

İlk addım — React layihəsi yaradıb Storybook əlavə etmək:

bashKopyala
# Yeni React layihəsi yaradırıq
npx create-react-app bakustack-ui --template typescript
cd bakustack-ui

# Storybook əlavə edirik
npx storybook@latest init

# Storybook-u işə salırıq
npm run storybook

Bu əmrlərdən sonra http://localhost:6006 ünvanında Storybook interfeysi açılacaq. Artıq ilk komponentimizi yazmağa hazırıq.

İlk Komponent: Button

Hər komponent library-nin əsası Button komponentidir. Gəlin ciddi bir Button yaradaq:

tsxKopyala
// src/components/Button/Button.tsx
import React from 'react';
import './Button.css';

export interface ButtonProps {
  variant: 'primary' | 'secondary' | 'danger';
  size: 'sm' | 'md' | 'lg';
  label: string;
  disabled?: boolean;
  loading?: boolean;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  label,
  disabled = false,
  loading = false,
  onClick,
}) => {
  const classNames = [
    'baku-btn',
    `baku-btn--${variant}`,
    `baku-btn--${size}`,
    loading ? 'baku-btn--loading' : '',
  ].join(' ');

  return (
    <button
      className={classNames}
      disabled={disabled || loading}
      onClick={onClick}
    >
      {loading ? 'Yüklənir...' : label}
    </button>
  );
};

İndi bu komponentin story-sini yazaq — Storybook-un əsas konsepsiyası budur:

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

const meta: Meta<typeof Button> = {
  title: 'BakuStack UI/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger'],
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
    },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    label: 'Təsdiq et',
    size: 'md',
  },
};

export const Danger: Story = {
  args: {
    variant: 'danger',
    label: 'Sil',
    size: 'md',
  },
};

export const Loading: Story = {
  args: {
    variant: 'primary',
    label: 'Göndər',
    size: 'md',
    loading: true,
  },
};

export const AllSizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
      <Button variant="primary" size="sm" label="Kiçik" />
      <Button variant="primary" size="md" label="Orta" />
      <Button variant="primary" size="lg" label="Böyük" />
    </div>
  ),
};

tags: ['autodocs'] sayəsində Storybook avtomatik olaraq props cədvəli və istifadə nümunələri olan sənədləşdirmə səhifəsi yaradacaq. Bu, əl ilə README yazmaqdan 10x daha effektivdir.

Library Strukturunu Düzgün Qur

Ciddi komponent library-nin strukturu belə olmalıdır:

src/
├── components/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.stories.tsx
│   │   ├── Button.test.tsx
│   │   ├── Button.css
│   │   └── index.ts
│   ├── Input/
│   │   ├── Input.tsx
│   │   ├── Input.stories.tsx
│   │   └── index.ts
│   ├── Modal/
│   │   └── ...
│   └── Card/
│       └── ...
├── tokens/
│   ├── colors.ts
│   ├── spacing.ts
│   └── typography.ts
└── index.ts

tokens/ qovluğundakı design token-lər komponentlər arasında vizual konsistentliyi təmin edir. Məsələn:

tsKopyala
// src/tokens/colors.ts
export const colors = {
  primary: '#2563EB',
  secondary: '#64748B',
  danger: '#DC2626',
  success: '#16A34A',
  background: '#FFFFFF',
  text: '#1E293B',
} as const;

Chromatic ilə Visual Testing

Storybook-un ən güclü tərəflərindən biri Chromatic inteqrasiyasıdır — hər commit-də komponentlərinizin vizual screenshot-unu çəkir və dəyişiklikləri göstərir:

bashKopyala
npm install --save-dev chromatic
npx chromatic --project-token=YOUR_TOKEN

Bu, xüsusilə remote işləyən komandalarda əvəzsizdir. Bakıda bir çox developer artıq remote olaraq xarici şirkətlərə işləyir — Chromatic PR review prosesini kəskin sadələşdirir.

Deploy və Paylaşım

Storybook-u statik sayt kimi deploy etmək çox sadədir:

bashKopyala
# Statik build
npm run build-storybook

# Netlify və ya Vercel-ə deploy
# Və ya sadəcə GitHub Pages

Bu linki CV-nizə, LinkedIn profilinizə və müsahibələrdə paylaşın. Bakıda HR-lar və tech lead-lər canlı demo görəndə ciddi fərq yaranır.

Praktiki Tövsiyələr

1. Kiçik başla: Button, Input, Card — 3 komponentlə başla, sonra genişləndir
2. Accessibility (a11y) addon-u aktivləşdir — Storybook-da daxili a11y yoxlaması var
3. Design token-ləri ayrıca fayllarda saxla — dizayner dəyişiklik istəyəndə bir yerdən dəyişəsən
4. Interaction testing yaz — Storybook 8+ versiyasında play funksiyası ilə komponent davranışını test edə bilərsən
5. npm-ə publish et — npm publish ilə öz paketini yaradıb digər layihələrdə istifadə et

Son Söz

Storybook ilə komponent library qurmaq sadəcə texniki bacarıq deyil — bu, mühəndislik mədəniyyətidir. Bakıda front-end ekosistemi sürətlə böyüyür, şirkətlər design system-ə investisiya edir. Bu sahədə təcrübəniz varsa, istər yerli bazarda 2000-3500 AZN maaş aralığında, istərsə də remote pozisiyalarda ciddi şansınız olacaq.

Bu həftə bir Button komponenti yazın, story-sini qoşun, Storybook-u deploy edin. Bir addım atın — qalanı gələcək.

Suallarınız varsa, şərhlərdə gözləyirəm. Növbəti məqalədə Storybook + Figma inteqrasiyası haqqında yazacağıq. Görüşənədək! 🚀