الشروع في العمل مع Storybook في React

هل سبق لك أن حاولت وضع جميع مكونات واجهة المستخدم الخاصة بك في مكان ما في React؟

إذا كنت جديدًا في عالم React ، فمن المحتمل أنك لن تفعل ذلك.

ما هو المقصود من ذلك؟

انظر رد فعل جميل dnd أمثلة.

ما رأيته في الأمثلة يسمى القصص. والأداة المستخدمة لإنشاء القصص تسمى Storybook.

الآن ، لقد فهمت ما سنتحدث عنه في هذه المقالة. بدون اللغط دعنا نستكشف.

ما هو Storybook؟

Storybook عبارة عن بيئة تطوير معزولة لواجهة مستخدم توفر ملعبًا لمكوناتك. يمكننا اللعب بمكوناتنا بطرق مختلفة دون تشغيل تطبيقنا الرئيسي. يمكننا تشغيل كتاب القصة في منفذه مع الإعداد.

لا يقتصر الأمر على React. يمكننا استخدام القصص القصيرة مع معظم أطر عمل الواجهة الأمامية مثل Vue و Angular و Mithril و Marko و Svelte وما إلى ذلك .. ،

يمكنك العثور على المزيد حول القصص القصيرة هنا.

ما هي القصة؟

تحدد القصة الحالة المعروضة لمكونك. إذا أخذنا مكونًا مشتركًا ، فيمكننا استخدامه بطرق مختلفة مع الدعائم. يمكننا كتابة قصة لكل من تلك الدول.

لنفترض أن لدينا مكون زر.

يمكن أن يوجد الزر في حالات مختلفة مثل معطل ، وتحميل ، وأساسي ، وثانوي ، وصغير ، وكبير ، ومتوسط ​​، وما إلى ذلك ، إذا قمنا بإدراج جميع الحالات ، فسيكون من الصعب جدًا المضي قدمًا في البرنامج التعليمي. أعتقد أنك تفهم ذلك. ستحصل عليه أكثر عند بدء العمل مع القصص القصيرة.

يمكنك مشاهدة قصص الزر في حالات مختلفة (كبير ، متوسط ​​، صغير).

إعداد Storybook في مشروع

سنقوم بإعداد كتاب قصة في مشروع رد الفعل.

لنذهب.

  • قم بإنشاء مشروع رد فعل باستخدام الأمر التالي. يمكنك تسمية ما تريد.
npx create-react-app storybook-demo
  • الآن ، قم بتثبيت Storybook في مشروعك باستخدام الأمر التالي.
npx sb init

لقد أكملنا الإعداد لكتاب القصة.

يوفر كتاب القصة خادمًا منفصلاً لنا.

كيف تبدأ؟

يضيف كتاب القصة تلقائيًا أمرًا في ملف البرنامج النصي الخاص بنا. يمكنك التحقق منه في ملف package.json داخل قسم البرامج النصية. في الوقت الحالي ، قم بتشغيل الأمر التالي لبدء خادم Storybook.

npm run storybook

سيبدأ Storybook خادمًا جديدًا مع المنفذ الوارد في قسم البرامج النصية في ملف package.json. سيفتح تلقائيًا كتاب القصة في متصفحنا الافتراضي (مثل خادم التفاعل).

سترى قصصًا مختلفة فيه بشكل افتراضي. يمكنك إزالتها إذا كنت لا تريدها أو الاحتفاظ بها كمرجع. كما ناقشنا في القسم السابق ، يمكن أن يكون للزر حالات متعددة ، يمكنك رؤيتها في كتاب القصة (لم يتم ذكر جميع الحالات). سنقوم بكتابة مجموعة كبيرة من القصص للزر في القسم الأخير من هذا البرنامج التعليمي.

استكشف أقسامًا مختلفة من القصص القصيرة وتعرّف على الأقسام المختلفة. سنقوم بتغطية القليل منهم في البرنامج التعليمي.

دعونا نكتب قصتنا الأولى.

اختبار القصص القصيرة

لقد رأينا كتاب القصص قيد التشغيل وبعض الأمثلة فيه.

  • قم بإنشاء مجلد يسمى Button داخل مجلد src.
  • قم بإنشاء ملفات تسمى Button.jsx و Button.css و constants.js
  • ضع الكود المعني من المقتطفات أدناه في الملفات.

Button.jsx

import React, { Component } from "react";
import PropTypes from "prop-types";

import "./Button.css";

import { buttonTypes, buttonVariants, buttonSizes } from "./constants";

class Button extends Component {
    static defaultProps = {
        isDisabled: false,
        type: "filled",
        variant: "oval",
        size: "medium",
        backgroundColor: "#1ea7fd",
        textColor: "#ffffff",
    };

    static buttonTypes = buttonTypes;
    static buttonVariants = buttonVariants;
    static buttonSizes = buttonSizes;

    renderButton = () => {
        const {
            text,
            isDisabled,
            type,
            variant,
            size,
            backgroundColor,
            textColor,
            onClick,
        } = this.props;
        return (
            <button
                onClick={onClick}
                className={`default ${variant} ${size} ${
                    isDisabled ? "disabled" : ""
                }`}
                style={
                    type === buttonTypes.outline
                        ? {
                              border: `1px solid ${backgroundColor}`,
                              color: "#000000",
                              backgroundColor: "transparent",
                          }
                        : {
                              backgroundColor: `${backgroundColor}`,
                              border: `1px solid ${backgroundColor}`,
                              color: textColor,
                          }
                }
                disabled={isDisabled}
            >
                {text}
            </button>
        );
    };

    render() {
        return this.renderButton();
    }
}

Button.propTypes = {
    text: PropTypes.string,
    isDisabled: PropTypes.bool,
    type: PropTypes.oneOf([buttonTypes.outline, buttonTypes.filled]),
    variant: PropTypes.oneOf([buttonVariants.oval, buttonVariants.rectangular]),
    size: PropTypes.oneOf([
        buttonSizes.small,
        buttonSizes.medium,
        buttonSizes.large,
    ]),
    backgroundColor: PropTypes.string,
    textColor: PropTypes.string,
    onClick: PropTypes.func,
};

export { Button };

Button.css

.default {
    border: none;
    cursor: pointer;
    background-color: transparent;
}

.default:focus {
    outline: none;
}

.disabled {
    opacity: 0.75; 
    cursor: not-allowed;
}
.small {
    font-size: 12px;
    padding: 4px 8px;
}

.medium {
    font-size: 14px;
    padding: 8px 12px;
}

.large {
    font-size: 16px;
    padding: 12px 16px;
}

.oval {
    border-radius: 4px;
}

.rectangular {
    border-radius: 0;
}

ثوابت

export const buttonTypes = {
    outline: "outline",
    filled: "filled",
};

export const buttonVariants = {
    oval: "oval",
    rectangular: "rectangular",
};

export const buttonSizes = {
    small: "small",
    medium: "medium",
    large: "large",
};

ما هذا الرمز؟

  كيفية إعداد واستخدام روتين "وقت النوم" من مساعد Google

لقد كتبنا مكونًا مشتركًا لـ Button يمكن استخدامه بطرق مختلفة. الآن ، لدينا مكون يمكن أن يكون له حالات مختلفة.

دعنا نكتب قصتنا الأولى باتباع الخطوات التالية.

  • قم بإنشاء ملف يسمى Button.stories.jsx
  • قم باستيراد React ومكون Button الخاص بنا إلى الملف.
  • الآن ، حدد عنوانًا أو مسارًا في قصصنا المكونة. سنقوم بتعريفه باستخدام الكود التالي.
export default {
   title: ‘common/Button’,
}

سيضع الكود أعلاه جميع القصص الموجودة في الملف الحالي داخل دليل / Button / مشترك.

  • قم بتصدير زر مع الدعائم الإلزامية على النحو التالي.
export const defaultButton = () => (
    <Button text=”Default Button” onClick={() => {}} />
);

لقد أكملنا قصتنا الأولى. قم بتشغيل كتاب القصة باستخدام الأمر التالي وشاهد الإخراج.

npm run storybook

سنكتب المزيد من القصص ، في النهاية ، لا تقلق.

كيف تكون مفيدة في تطوير الواجهة الأمامية؟

ما هي الميزة الرئيسية لاستخدام القصص القصيرة؟

لنفترض أننا نعمل في فريق من 10 أعضاء. ونحتاج إلى التحقق من المكونات المشتركة التي كتبها الجميع لمشروع العمل الحالي.

كيف يمكننا فعل ذلك؟

علينا أن نذهب إلى كل مكون مشترك للتحقق منها. لكنها تستغرق وقتًا طويلاً وليست طريقة مفضلة بالنسبة لنا. هنا يأتي لدينا كتاب قصة الضيف الجديد.

كيف نستخدمه للتغلب على مشكلتنا؟

يمكننا كتابة قصص للمكونات المشتركة (أي مكونات واجهة المستخدم) باستخدام كتاب القصص. وكلما أراد زميلك في الفريق التحقق من المكونات المشتركة للآخرين ، فعندئذٍ يقومون ببساطة بتشغيل خادم Storybook وسترى جميع مكونات واجهة المستخدم هناك كما رأينا أعلاه.

يمكننا أن نفعل الكثير مع المكونات المعروضة في القصة المصورة. يحتوي Storybook على مفهوم يسمى Addons يمنح قوى خارقة لقصصنا.

لنفترض أنه يتعين علينا التحقق من استجابة مكونات واجهة المستخدم في القصة المصورة نفسها ، يمكننا استخدام ملحق يسمى Viewport في القصة المصورة. سوف نتعلم المزيد عن الوظائف الإضافية في الأقسام القادمة.

العمل مع Storybook

في هذا القسم ، سنكتب قصصًا مختلفة تحدد الحالات المختلفة لزر المكون المشترك لدينا.

كتابة القصص ليست بهذه الصعوبة. القصة تحدد حالة المكون. إذا رأيت دعائم أحد المكونات ، فستفهم بسهولة حالات الاستخدام المختلفة للمكون.

دعنا نكتب بعض القصص من خلال تقديم الدعائم الاختيارية.

export const largeButton = () => (
    <Button text="Large Button" onClick={() => {}} size="large" />
);
export const outlineSmallButton = () => (
    <Button
        text="Outline Small Button"
        onClick={() => {}}
        size="small"
        type="outline"
    />
);
export const rectangularLargeButton = () => (
    <Button
        text="Rectangular Large Button"
        onClick={() => {}}
        size="large"
        variant="rectangular"
    />
);


export const disabledButton = () => (
    <Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);


export const warningButton = () => (
    <Button
        text="Warning Button"
        onClick={() => {}}
        backgroundColor="orange"
    />
);

تحدد القصص الثلاثة المذكورة أعلاه حالات استخدام مختلفة لزر المكون الخاص بنا. الآن ، حان دورك لإضافة بعض الحالات الأخرى للقصص لمكوننا المشترك. حاول أن تضيف DisamllRectangularButton، dangerButton، SuccessDisabledButton ، إلخ .. ،

  6 أفضل برامج نمذجة معلومات البناء للمصممين والبناة

لن أقدم رمزًا للحالات المذكورة أعلاه. عليك أن تكتبها بنفسك لتفهمها. يمكنك أن ترى رمز القصص الكامل الذي كتبناه حتى الآن.

import React from "react";

import { Button } from "./Button";

export default {
    title: "src/common/Button",
};

export const defaultButton = () => (
    <Button text="Default Button" onClick={() => {}} />
);

export const largeButton = () => (
    <Button text="Large Button" onClick={() => {}} size="large" />
);

export const outlineSmallButton = () => (
    <Button
        text="Outline Small Button"
        onClick={() => {}}
        size="small"
        type="outline"
    />
);

export const rectangularLargeButton = () => (
    <Button
        text="Rectangular Large Button"
        onClick={() => {}}
        size="large"
        variant="rectangular"
    />
);

export const disabledButton = () => (
    <Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);

export const warningButton = () => (
    <Button
        text="Disabled Button"
        onClick={() => {}}
        backgroundColor="orange"
    />
);

الآن ، لديك سيطرة كاملة على كتابة القصص لأحد المكونات.

دعنا ننتقل إلى القسم التالي حيث سنتعرف على الوظائف الإضافية وكيف تعزز قصصنا.

إضافات القصص القصيرة

سيكون لدينا العديد من الإضافات المتاحة افتراضيًا. في هذا القسم ، سوف نستكشف أكثر الإضافات فائدة لتطويرنا.

دعنا نعزز قصص Button الخاصة بنا.

ضوابط

تضيف عناصر التحكم ميزة لإعطاء دعامات مخصصة للمكون في كتاب القصة نفسه. بالنسبة لمكون الأزرار الخاص بنا ، يمكننا إضافة عناصر تحكم لتغيير العناصر المختلفة في القصة المصورة.

لنفترض أنه يتعين علينا معرفة أفضل لون للون خلفية الزر. سيستغرق الأمر وقتًا طويلاً إذا اختبرناه للتحقق من لون الخلفية من خلال إعطاء واحدًا تلو الآخر للمكون. بدلاً من ذلك ، يمكننا إضافة عنصر تحكم يسمح لنا باختيار اللون المختلف في كتاب القصة. يمكننا اختبار لون الخلفية في القصة المصورة نفسها.

دعونا نرى كيفية إضافة عناصر تحكم إلى قصص Button الخاصة بنا.

أولاً ، علينا تحديد جميع الدعائم الموجودة أسفل العنوان على النحو التالي.

export default {
    title: "src/common/Button",
    argTypes: {
        text: { control: "text" },
        backgroundColor: { control: "color" },
        isDisabled: { control: "boolean" },
        size: {
            control: { type: "select", options: ["small", "medium", "large"] },
        },
        type: {
            control: { type: "select", options: ["filled", "outline"] },
        },
        variant: {
            control: { type: "select", options: ["oval", "rectangular"] },
        },
    },
};

بعد ذلك ، افصل الخاصيات عن المكوِّن وامنحها على هيئة args كما يلي.

export const outlineSmallButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
    text: "Outline Small Button",
    size: "small",
    type: "outline",
};

يمكنك رؤية عناصر التحكم في الجزء السفلي من نافذة معاينة المكون.

يمكنك رؤية علامة تبويب عناصر التحكم في الجزء السفلي من نافذة معاينة المكون. العب حوله.

تحديث كل القصص على النحو الوارد أعلاه. هذا أشبه بمعرفة بناء جملة إضافات القصص القصيرة. في argTypes ، استخدمنا أنواعًا مختلفة من عناصر التحكم. يمكنك العثور على جميع عناصر التحكم الموجودة في كتاب القصة هنا.

ستبدو قصص الأزرار المحدثة على النحو التالي.

import React from "react";

import { Button } from "./Button";

export default {
    title: "src/common/Button",
    argTypes: {
        text: { control: "text" },
        backgroundColor: { control: "color" },
        isDisabled: { control: "boolean" },
        size: {
            control: { type: "select", options: ["small", "medium", "large"] },
        },
        type: {
            control: { type: "select", options: ["filled", "outline"] },
        },
        variant: {
            control: { type: "select", options: ["oval", "rectangular"] },
        },
    },
};

export const defaultButton = (args) => <Button {...args} onClick={() => {}} />;
defaultButton.args = {
    text: "Default Button",
};

export const largeButton = (args) => (
    <Button {...args} onClick={() => {}} size="large" />
);
largeButton.args = {
    text: "Large Button",
};

export const outlineSmallButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
    text: "Outline Small Button",
    size: "small",
    type: "outline",
};

export const rectangularLargeButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
rectangularLargeButton.args = {
    text: "Rectangular Large Button",
    size: "large",
    variant: "rectangular",
};

export const disabledButton = (args) => <Button {...args} onClick={() => {}} />;
disabledButton.args = {
    text: "Disabled Button",
    isDisabled: true,
};

export const warningButton = (args) => <Button {...args} onClick={() => {}} />;
warningButton.args = {
    text: "Warning Button",
    backgroundColor: "orange",
};

أجراءات

الإجراءات هي أحداث في JavaScript. يمكننا النقر فوق الزر الذي يمثل حدثًا في JavaScript. يمكننا القيام ببعض الإجراءات عند النقر فوق الزر باستخدام ملحق الإجراءات.

  نصائح لتوظيف مطور WordPress لعملك

من خلال الإجراءات ، يمكننا اختبار ما إذا كانت الأحداث تعمل بشكل صحيح أم لا. لا يمكن النقر فوق الزر معطل ويجب أن يكون الزر الممكّن قابلاً للنقر. يمكننا التأكد من ذلك باستخدام الإجراءات.

دعونا نرى كيفية إضافة إجراء إلى النقر فوق الزر.

لقد قدمنا ​​وظيفة مجهولة لعناصر onClick سابقًا. الآن ، علينا تحديثه.

  • قم باستيراد الإجراء من ملحق Storybook باستخدام العبارة التالية.
import { action } from "@storybook/addon-actions";
  • استبدل كل () => {} بالعبارة التالية.
action("Button is clicked!")

الآن ، انتقل إلى القصة المصورة وانقر فوق زر. سترى الرسالة مطبوعة تحت علامة تبويب الإجراءات الموجودة بجانب علامة تبويب عناصر التحكم. لن تتم طباعة الرسالة إذا قمت بالنقر فوق الزر معطل لأنه معطل.

يمكننا استخدام الإجراء لأحداث مختلفة مثل onChange و onMouseOver و onMouseOut وما إلى ذلك .. للتأكد من أنها تعمل بشكل صحيح. حاول تنفيذ الأمر نفسه مع onChange لعنصر إدخال.

انظر وثائق الإجراءات هنا.

خلفية

يمكننا تغيير خلفية نافذة المعاينة باستخدام ملحق الخلفية. ليس علينا كتابة أي كود. فقط قم بتغييره داخل كتاب القصة. تستطيع أن ترى الصورة المتحركة أدناه.

منفذ العرض

يمكننا أيضًا اختبار استجابة مكوناتنا في القصص القصيرة. انظر إلى gif أدناه للتعرف على خيارات منفذ العرض.

المستندات

يمكننا توثيق مكوناتنا في كتاب القصة باستخدام الملحق docs. إنها أكثر فائدة عندما نعمل في فريق. سوف يقرؤون المكون ويفهمونه مباشرة. يوفر الكثير من الوقت للمطورين.

في نافذة معاينة مكونات كتب القصص النصية ، يمكنك رؤية المستندات في الجزء العلوي الأيمن من علامة التبويب Canvas. سيحتوي على جميع المستندات لجميع قصص المكون. يتعين علينا استخدام Button.stories.mdx إذا أردنا توثيق المكون الذي يتضمن كلا من تخفيض السعر وعرض المكون. نكتب فقط بعض كود تخفيض السعر الإضافي بداخله مع القصص المكونة.

نحن نكتب وثيقة لقصصنا. يتضمن الكود تخفيض السعر وتقديم المكون. الأمر كله مجرد تعلم بناء الجملة. سوف تحصل عليه من النظرة الأولى.

دعونا نرى كود المستند Button.stories.mdx.

<!--- Button.stories.mdx -->

import {
    Meta,
    Story,
    Preview,
    ArgsTable
} from '@storybook/addon-docs/blocks';

import { Button } from './Button';

<Meta title="MDX/Button" component={Button} />

# Button Documentation

With `MDX` we can define a story for `Button` right in the middle of our
Markdown documentation.

<ArgsTable of={Button} />

export const Template = (args) => <Button {...args} />

## Default Button
We can write the documentation related to the Default Button
<Preview>
    <Story name="Default Button" args={{
        text: 'Default Button'
    }}>
    {Template.bind({})}
   </Story>
</Preview>

## Large Button
We are writing sample docs for two stories, you can write rest of them
<Preview>
    <Story name="Large Button" args={{
        text: "Large Button",
        }}>
        {Template.bind({})}
    </Story>
</Preview>

اكتشف المزيد حول مكونات التوثيق هنا.

يمكنك معرفة المزيد عن الوظائف الإضافية هنا.

استنتاج

آمل أن تكون قد استمتعت بالبرنامج التعليمي وتعرفت على قصة القصة. واستخدمه بشكل فعال في فريقك لجعل عملك مثمرًا.

جديد على رد الفعل؟ تحقق من هذه الموارد التعليمية.

ترميز سعيد 🙂