שיעור 7: Storybook — מקור האמת החזותי

כדי לבדוק את ה-‎`Button`‎ במצב ‎`ghost`‎ עם שגיאה, צריך להתחבר לאפליקציה, לפתוח טופס, להזין נתונים שגויים, ולחכות. וכל זה כדי לראות קומפוננטה אחת. השיעור הזה מלמד ‎`Storybook`‎: קובץ stories שמרנדר כל וריאנט במבודד, בעמוד אחד — מקור אמת חזותי שלא דורש לנווט את כל האפליקציה.

Storybook הוא כמו חדר תצוגה של חייט: כל וריאנט של בגד על בובה משלו, מסודרים בשורה, כדי שתבחן כל אחד בנפרד — בלי להלביש אדם שלם ולשלוח אותו להסתובב בחנות.

Storybook: כלי שמרנדר קומפוננטות במבודד מחוץ לאפליקציה, כל אחת עם הווריאנטים שלה בעמוד אחד — מקור אמת חזותי לפיתוח, סקירה ותיעוד של מערכת העיצוב.
story: מצב יחיד של קומפוננטה שמיוצא מקובץ ‎`*.stories.tsx`‎ — לרוב וריאנט אחד עם ה-args שלו (‎`export const Ghost = { args: { variant: 'ghost' } }`‎).
פיתוח מבודד: בנייה ובדיקה של קומפוננטה בנפרד מהאפליקציה, בלי צורך לנווט אליה דרך מסכים, התחברות ונתונים — מקצר את לולאת המשוב.
רגרסיה חזותית: שינוי חזותי לא-מכוון שנכנס בטעות (קומפוננטה ש'נשברה' מבחינה ויזואלית). Storybook מקל לתפוס אותו כי כל הווריאנטים גלויים יחד.