الدرس 7: Storybook — مصدر الحقيقة المرئي

لفحص الـ ‎`Button`‎ في حالته ‎`ghost`‎ مع وجود خطأ، عليك تسجيل الدخول إلى التطبيق وفتح نموذج وإدخال بيانات خاطئة والانتظار. كل ذلك لرؤية مكوّن واحد. يعلّمك هذا الدرس ‎`Storybook`‎: ملف stories يعرض كل متغيّر بمعزل عن غيره، في صفحة واحدة — مصدر حقيقة مرئي لا يتطلّب التنقّل عبر التطبيق بأكمله.

Storybook أشبه بصالة عرض خيّاط: كل متغيّر من قطعة ملابس على مجسّم خاص به، مصفوفة في صفّ، لتفحص كل واحدة على حدة — دون أن تُلبس شخصاً كاملاً وترسله ليتجوّل في المتجر.

Storybook: أداة تعرض المكوّنات بمعزل عن التطبيق، كل مكوّن مع متغيّراته في صفحة واحدة — مصدر حقيقة مرئي لتطوير نظام التصميم ومراجعته وتوثيقه.
story: حالة واحدة لمكوّن يتم تصديرها من ملف ‎`*.stories.tsx`‎ — عادةً متغيّر واحد مع الـ args الخاصة به (‎`export const Ghost = { args: { variant: 'ghost' } }`‎).
التطوير المعزول: بناء مكوّن واختباره بمعزل عن التطبيق، دون الحاجة إلى الوصول إليه عبر الشاشات وتسجيل الدخول والبيانات — يقصّر حلقة التغذية الراجعة.
الانحدار المرئي: تغيير مرئي غير مقصود يتسلّل عن طريق الخطأ (مكوّن 'انكسر' بصرياً). يسهّل Storybook اكتشافه لأن جميع المتغيّرات ظاهرة معاً.