أهلاً بيك يا صديقي المبرمج في مقال جديد من سلسلة شروحات تطوير الويب (Web Development). لو بتشتغل في مشروع كبير مع فريق، غالباً قابلتك المشكلة اللطيفة دي: بتلاقي نفسك بتكتب نفس زرار (Button) أو صندوق إدخال (Input) للمرة المليون في أماكن مختلفة، وكل مرة بشوية تعديلات شكلية. النتيجة؟ كود مكرر، وتصميمات مش متناسقة، وصداع في الصيانة!

الحل السحري للمشكلة دي هو إنك تبني مكتبة مكونات واجهة المستخدم الخاصة بك (UI Components Library) وتعمل لنفسك نظام تصميم (Design System) خاص بيك أو بشركتك. وعشان تعمل ده باحترافية، مفيش أدوات أحسن من رياكت (React) لإنشاء المكونات، وستوري بوك (Storybook) لتوثيقها وعرضها بعيداً عن بيئة المشروع الرئيسي.

في المقال ده، هناخد رحلة خطوة بخطوة عشان نفهم إزاي نبني مكتبة مكونات قوية، قابلة لإعادة الاستخدام (Reusable Components)، ونتعلم إزاي نوثقها صح.

إيه هي مكتبة المكونات وليه محتاجين Storybook؟ (Design Systems & Storybook)

زمان، لما كنا بنحب نعمل موقع، كنا بنكتب الكود كله حتة واحدة. مع تطور هندسة البرمجيات وتحديداً مع ظهور رياكت (React)، بقينا نعتمد على فكرة المكونات (Components). لكن لما المشروع بيكبر، بنحتاج مكان مركزي نجمع فيه المكونات دي ونشوفها وهي شغالة في كل حالاتها (States)، زي مثلاً: وهي شغالة عادي، وهي مقفولة (Disabled)، وهي في حالة تحميل (Loading).

هنا بيجي دور ستوري بوك (Storybook). الأدوات دي بتعتبر بيئة عزل (Isolated Environment) بتخليك تطور المكون لوحده تماماً برة المشروع الأساسي. بتقدر تشوف كل "قصة" (Story) للمكون وتجربه بنفسك، وده بيسهل جداً التواصل بينك وبين مصممي واجهات المستخدم (UI/UX Designers) وفريق الإدارة.

الخطوة الأولى: تجهيز بيئة العمل وبناء الهيكل (Project Setup)

عشان نبتدي صح، محتاجين نعمل إعداد للمشروع بتاعنا. هنفترض إنك هتبدأ مشروع رياكت جديد (React Project) باستخدام فيت (Vite) عشان السرعة، وبعدين هنركب عليه ستوري بوك.

افتح التيرمينال (Terminal) عندك واكتب الأوامر دي عشان تنشئ المشروع وتسطب ستوري بوك:

npm create vite@latest my-ui-lib -- --template react-ts
cd my-ui-lib
npm install
npx storybook init

الأمر الأخير بتاع ستوري بوك ده سحري؛ هو لوحده بيفهم إنك شغال برياكت وبيضيف الإعدادات والملفات المبدئية وبيعمل مجلد اسمه .storybook، وبيحطلك أمثلة لمكونات زي الزرار (Button) عشان تفهم الفكرة.

الخطوة الثانية: كتابة أول مكون قابل لإعادة الاستخدام (Building a Reusable Button)

تعالوا نعمل مكون بسيط بس أساسي جداً في أي مكتبة: زرار (Button Component) بيدعم أكتر من شكل (Variants) وأكتر من حجم (Sizes) باستخدام تايب سكريبت (TypeScript).

اعمل ملف جديد باسم Button.tsx جوه مجلد المكونات (Components) واكتب فيه الكود ده:

import React from 'react';
import './button.css';

interface ButtonProps {
  primary?: boolean;
  backgroundColor?: string;
  size?: 'small' | 'medium' | 'large';
  label: string;
  onClick?: () => void;
}

export const Button = ({
  primary = false,
  size = 'medium',
  backgroundColor,
  label,
  ...props
}: ButtonProps) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={{ backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

الخطوة الثالثة: توثيق المكون في ستوري بوك (Writing Stories)

الخطوة الجاية هي إننا نعمل ملف "قصة" (Story File) عشان ستوري بوك يعرض المكون ده ويخلينا نتحكم فيه من الواجهة الرسومية. اعمل ملف جنب الزرار باسم Button.stories.ts:

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

const meta = {
  title: 'Example/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} satisfies Meta<typeof Button>;

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

export const Primary: Story = {
  args: {
    primary: true,
    label: 'زرار أساسي',
  },
};

export const Secondary: Story = {
  args: {
    label: 'زرار فرعي',
  },
};

export const Large: Story = {
  args: {
    size: 'large',
    label: 'زرار كبير',
  },
};

دلوقتي لو شغلت ستوري بوك بالأمر npm run storybook، هيفتحلك متصفح على لوحة تحكم عظيمة تقدر من خلالها تشوف كل حالات الزرار وتجرب تغير الألوان والحجم بنفسك!

الخطوة الرابعة: نشر المكتبة واستخدامها في مشاريعك (Publishing your Library)

بعد ما تخلص بناء وتوثيق كل المكونات بتاعتك (زي الآقسام، النوافذ المنبثقة Modals، الحقول Inputs)، بيجي الوقت إنك تنشر المكتبة دي عشان تقدر تستخدمها في مشاريعك التانية.

قدامك حل من اتنين:

• النشر العلني: إنك ترفع المكتبة على موقع (NPM) وتخليها مفتوحة المصدر (Open Source).
• النشر الخاص: استخدام (GitHub Packages) أو (NPM Private Registry) لو المكتبة خاصة بشغل الشركة ومش عايز حد برة يشوفها.

قبل النشر، تأكد إنك عامل إعدادات package.json صح، وبتعمل بناء (Build) للملفات باستخدام أدوات زي (Vite Library Mode) عشان تطلع كود نظيف ومضغوط جاهز للاستيراد.

نصيحة من أخ

يا صاحبي، بناء مكتبة واجهة مستخدم في الأول بياخد وقت وجهد كبير، وممكن تحس في البداية إنه استهلاك وقت على الفاضي مقارنة بكتابة الكود جوه المشروع مباشرة. لكن استثمارك في الخطوة دي هيوفر عليك وعلى فريقك مئات ساعات الشغل قدام، وهيخلي شكل التطبيقات بتاعتك احترافي وموحد. ابدأ بالمكونات البسيطة زي الأزرار والنصوص، وكبر المكتبة خطوة بخطوة مع كل مشروع جديد بتدخله. بالتوفيق!