Storybook

הוא רץ על השרת המקומי שלכם בכתובת localhost:6006 ומציג רכיבי ממשק משתמש בבידוד מוחלט מהאפליקציה עצמה. במקום להרים שרת בקאנד מלא, להתחבר למסד נתונים, לעבור מסכי כניסה וללחוץ על חמישה כפתורים רק כדי לראות איך נראה כפתור מסוים במצב שגיאה, אתם מרנדרים אותו לבד. המטרה היא לתלוש את ה-UI מהלוגיקה העסקית, מנתונים אמיתיים ומ-APIs מורכבים. אתם כותבים סיפור שמגדיר את המצבים השונים של הרכיב, ומקבלים קטלוג חזותי שבו אפשר לשנות תכונות ולראות את השינויים מיד מול העיניים.

סביבת העבודה הזו מגיעה עם מעל 400 אינטגרציות, כולל חיבורים לספריות רינדור כמו React או Vue, לצד כלי בנייה מובילים כמו Vite. אתם שומרים את מקרי הקצה כסיפורים ומריצים עליהם בדיקות ישירות בדפדפן בלי תלות בשרתים. ברגע שקבעתם את המצבים התקינים של כפתור, שדה טקסט או כרטיס מוצר, הוא בודק שינויים חזותיים ברמת הפיקסל ומונע שבירה של מבנה ה-DOM. הוא גם מריץ בדיקות נגישות לפי תקני WCAG ו-ARIA, מדמה לחיצות משתמש בעזרת ספריות כמו Cypress, ומפיק דוחות כיסוי קוד לפרונטאנד.

הוא מיועד למפתחי צד לקוח.

למי זה באמת מועיל

חברות ישראליות כמו Monday.com וענקיות טכנולוגיה כמו Shopify מפתחות בעזרתו ספריות רכיבים ומערכות עיצוב שלמות. אם יש לכם צוות שמנהל ספריית רכיבים משותפת, ההפרדה הזו חוסכת שעות של סנכרון ותקלות הדדיות בין מפתחים שונים. הכלי מייצר תיעוד אוטומטי מקובצי Markdown, מאפשר חיפוש מהיר של כל רכיב ומסך בקטלוג, ומשמש כמקור אמת מרכזי של כל רכיבי הממשק בארגון שלכם. אפשר לבדוק בו גם עמודים שלמים כמו לוח בקרה או מסך התחברות, ולעקוב אחרי היסטוריית הגרסאות של כל רכיב כדי לאתר באגים.

לא הייתי משתמש בזה לפרויקט קטן.

אם אתם בונים דף נחיתה פשוט, אתר תדמית מהיר או אפליקציה קטנה של מסך יחיד, מדובר בבזבוז זמן מוחלט. התחזוקה דורשת לכתוב ולעדכן קובץ סיפור נפרד לכל כפתור, שדה קלט וכרטיס, ולהגדיר ידנית מצבי קיצון ופרמטרים בלוח הבקרה. בצוותים קטנים או בפרויקטים של פרילנסר בודד, התקורה הזו מאטה את קצב הפיתוח במקום לקדם אותו. בנוסף, האתר אינו מציין תמיכה מובנית בשפות שנכתבות מימין לשמאל או בעברית, כך שתצטרכו להגדיר תמיכת RTL בעצמכם בעזרת קובצי הגדרות והתאמות CSS ידניות.

הקוד פתוח לחלוטין ואין נעילת ספק.

כסף ורישוי של המוצר

התוכנה עצמה חינמית לגמרי ברישיון קוד פתוח, עם מעל 2282 תורמי קוד לגרסאות המוצר השונות. ההתקנה מתבצעת ישירות דרך npm עם הפקודה npm create storybook@latest, כשהיא רושמת מעל 84.75 מיליון התקנות בחודש ו-35 מיליון הורדות בשבוע. כל הקוד והסיפורים שלכם נשמרים כקבצים מקומיים בתוך ה-repository שלכם ב-GitHub לצד שאר חלקי המערכת, כך שאם תחליטו להפסיק לעבוד איתו, לא תאבדו שום נכס או מידע. קיים גם מסלול enterprise לחברות ענק, אך האתר אינו מפרסם עבורו מחיר ומחייב פנייה ישירה למכירות. החשבון הממשי מופיע רק אם בוחרים לחבר שירותי ענן חיצוניים לאירוח ובדיקות כמו Chromatic, שאינם חלק מליבת הכלי החינמי.

הם לא מפרסמים מחיר לחברות.

כל עובדה בעמוד נקראה מהאתר של Storybook בתאריך שרשום למעלה. מחירים ומגבלות משתנים; לפני שמשלמים, בודקים בעמוד המחירון שלהם. מצאתם טעות? כתבו.