שיעור 4: וריאנטים וקומפוזיציה — קומפוננטה אחת, הרבה צורות
יש לך `PrimaryButton`, `SecondaryButton`, `GhostButton` — שלוש קומפוננטות עם אותו markup מועתק. מנהל המוצר מבקש פינות מעוגלות לכולן, ואתה עורך שלושה קבצים. השיעור הזה מלמד אותך לבנות `Button` אחד עם prop של `variant` שממופה ל-classes מבוססי-טוקנים — קומפוזיציה במקום שכפול.
וריאנטים הם כמו תפריט קפה: יש מכונה אחת, ואתה בוחר גודל וסוג חלב. לא קונים מכונה נפרדת לכל משקה — מרכיבים את מה שצריך מאותם חלקים.
- וריאנט קומפוננטה
- צורה אחת מתוך כמה של אותה קומפוננטה — `primary`, `secondary`, `ghost` — שנבחרת דרך prop במקום קומפוננטה נפרדת לכל צורה.
- מפת וריאנטים
- אובייקט שממפה כל ערך של prop ל-classes שלו (לרוב עם `cva`) — מקור אמת אחד לכל הצורות של הקומפוננטה.
- קומפוזיציה
- בניית התנהגות מחלקים ניתנים להרכבה (props, וריאנטים) במקום שכפול קוד — הוספת צורה היא ערך חדש במפה, לא קובץ חדש.
- עיצוב מונחה-prop
- בחירת הסגנון לפי ערכי props (`variant`, `size`) שמתורגמים ל-classes — כך שה-API של הקומפוננטה מתאר כוונה, לא רשימת מחלקות.
