الدرس 4: المتغيّرات والتركيب — مكوّن واحد، أشكال متعددة
لديك `PrimaryButton` و`SecondaryButton` و`GhostButton` — ثلاثة مكوّنات بنفس الـ markup المنسوخ. يطلب مدير المنتج زوايا مستديرة لها جميعًا، فتُحرّر ثلاثة ملفات. يعلّمك هذا الدرس بناء `Button` واحد مع خاصية `variant` تُربَط بأصناف مبنية على tokens — تركيب بدلًا من تكرار.
المتغيّرات أشبه بقائمة قهوة: هناك آلة واحدة، وأنت تختار الحجم ونوع الحليب. لا تشتري آلة منفصلة لكل مشروب — بل تُركّب ما تحتاجه من الأجزاء نفسها.
- متغيّر المكوّن
- أحد عدة أشكال للمكوّن نفسه — `primary` و`secondary` و`ghost` — يُختار عبر خاصية بدلًا من مكوّن منفصل لكل شكل.
- خريطة المتغيّرات
- كائن يربط كل قيمة خاصية بأصنافها (غالبًا عبر `cva`) — مصدر حقيقة واحد لكل أشكال المكوّن.
- التركيب
- بناء السلوك من أجزاء قابلة للتركيب (خصائص، متغيّرات) بدلًا من تكرار الشيفرة — إضافة شكل هي مُدخل جديد في الخريطة، لا ملف جديد.
- تنسيق موجَّه بالخصائص
- اختيار التنسيق من قيم الخصائص (`variant` و`size`) المترجَمة إلى أصناف — بحيث تصف واجهة المكوّن البرمجية القصد، لا قائمة أصناف.
