ما هو StoryBook؟

بحسب الموقع الرسمي، يسوّق StoryBook لنفسه على أنه أرضيّة أو ملعب لمكونات واجهة المستخدم (UI Components)، ويرتكز بشكل أساسي على كتابة القصص (Stories).

ويمكننا القول أن StoryBook يستخدم مفهوم القصص لتوثيق كل ما يتعلق بحالات المكوّن (Component States)، وبالتالي فإن يفرز جميع الحالات الخاصة بالمكون في صورة قصص متتالية، إنه شكل من أشكال الاختبار البصري (Visual Testing).

ومن اﻷشياء الرائعة هو أن StoryBook يعمل مع كثير من إطارات العمل المشهورة مثل React وAngular وVueJS وغيرهم…

تنصيب وإعداد StoryBook

  1. داخل مجلد تطبيق React خاصتك نفذ اﻷمر التالي:
    npx -p @storybook/cli sb init
  2. اﻷمر أعلاه سوف يكتشف نوع إطار العمل الذي تستخدمه، في حال فشل اﻷمر السابق أو أنك كنت تريد استخدام StoryBook مع HTML فاستعمل اﻷمر التالي:
    npx -p @storybook/cli sb init --type html | <other-type>
  3. بمجرد الانتهاء، قم بتشغيل StoryBook عبر اﻷمر:
    npm run storybook

    سوف يعمل StoryBook على الرابط كما في الصورة التالية:

  4. سنقوم اﻵن بإضافة StoryBook كـ development dependency ضمن مشروعنا، بوسعنا تنفيذ اﻷمر التالي:
    npm install @storybook/react --save-dev
  5. إضافة لذلك هنالك بعض الاعتماديات التي نحتاج إلى تثبيتها:
    npm install react react-dom --save 
    npm install babel-loader @babel/core --save-dev
  6. في ملف package.json قم بإضافة السكربت التالي، وذلك لكي نستطيع تشغيل StoryBook بشكل أسهل:
    {
      "scripts": {
        "storybook": "start-storybook"
      }
    }
  7. واﻵن، فلننشئ ملف الضبط والتكوين config الذي سيخبر StoryBook في أيّ مكان سنكتب قصصنا؟ إذا لم يكن الملف موجودًا من قبل، فقم بإنشاء الملف config.js داخل المجلد storybook/.

حسنًا، حان وقت التوثيق!

  1. تأكد أن بيئة العمل مُشغّلة عبر اﻷمر npm run storybook
  2. لنقم اﻵن بالتخلص من اللوحة المرجعية (boilerplate) داخل src/stories/index.js، وسيبدو الملف هكذا:
    import { configure } from "@storybook/react";
    
    function loadStories() {
    require("../src/stories");
    }
    
    configure(loadStories, module);
  3. لنقم اﻵن باستيراد مكوننا، فمثلا أنا سأقوم باستيراد المكون Button الموجود في المجلد src.
    import Button from '../Button';
  4.  أنا استعمل القوائم المرقمة (enums) لوصف أنواع اﻷزرار خاصتي، فلذلك سأقوم باستيرادهم كذلك:
    import { ButtonTypes } from "../buttonTypes";
  5. سأقوم الآن بكتابة أول storiesOf للزرّ خاصتي، سنبدأ أولًا مع حالات ثلاث: primary, secondary, tertiary. سنحتاج إلى الدالة add لإضافة كل حالة، وهي تأخذ 2 Aurgments اﻷول اسم الحالة المراد إضافتها والثاني دالة تُرجع المكوّن.
    import React from "react";
    
    import { storiesOf } from "@storybook/react";
    import { action } from "@storybook/addon-actions";
    
    import Button from "../Button";
    import { ButtonTypes } from "../buttonTypes";
    
    storiesOf("Button", module)
    .add("primary", () => (
    <Button
    type={ButtonTypes.PRIMARY}
    onClick={action("clicked")}
    label="Primary"
    />
    ))
    .add("secondary", () => (
    <Button
    type={ButtonTypes.SECONDARY}
    onClick={action("clicked")}
    label="Secondary"
    />
    ))
    .add("tertiary", () => (
    <Button
    type={ButtonTypes.TERTIARY}
    onClick={action("clicked")}
    label="Tertiary"
    />
    ))
  6.  بمجرد الانتهاء، سنجد أن StoryBook قد قام بإضافة قصة في ثناياها Button ويتمتع بثلاث حالات؛ كما في الصورة:

[devto]