Vue Academy · درس

كتابة قصص المكوّنات

تنسيق CSF3، والتصدير الافتراضي (title وcomponent)، والتصديرات المسماة كقصص، وargs

كتابة قصص المكوّنات درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

تصف القصص حالات المكوّن

تلتقط القصة حالة واحدة من حالات المكوّن — أي مجموعة محددة من الخصائص والمحتوى. وقد يحتوي الزر على قصص Primary وSecondary وDisabled. يعرض Storybook كل قصة بوصفها مثالًا منفصلًا يمكن تصفحه.

CSF3: التنسيق الحديث

يستخدم Storybook تنسيق Component Story Format 3 (CSF3). يحتوي الملف على تصدير افتراضي واحد يصف المكوّن، وتصديرات مسماة لكل قصة. وهذه مجرد كائنات JavaScript/TypeScript، مع أقل قدر من التعليمات المتكررة.

التصدير الافتراضي (Meta)

التصدير الافتراضي هو كائن meta. ويحتوي، في الحد الأدنى، على title (مسار الشريط الجانبي) وعلى المكوّن الذي يجري توثيقه في component.

import Button from "./Button.vue"

export default {
  title: "Components/Button",
  component: Button,
}

ينظّم title الشريط الجانبي

يستخدم title الشرطات المائلة لإنشاء تسلسل هرمي للمجلدات في الشريط الجانبي لـ Storybook. ويضع "Forms/Inputs/TextField" العناصر في ثلاثة مستويات متداخلة.

export default {
  title: "Forms/Inputs/TextField",
  component: TextField,
}

التصديرات المسماة هي القصص

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

export const Primary = {}
export const Secondary = {}
export const Disabled = {}

كائن args

يوفّر كائن args الخاص بالقصة قيم الخصائص. ويمررها Storybook إلى المكوّن، بينما تتيح لكم لوحة Controls تعديلها مباشرة.

export const Primary = {
  args: {
    label: "Click me",
    variant: "primary",
  },
}

صيغ متعددة عبر args

أعيدوا استخدام المكوّن نفسه في قصص متعددة بتغيير args فقط. إذ يعرض كل تصدير المكوّن بخصائص مختلفة.

export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }

قيم args الافتراضية في Meta

ضعوا قيم args المشتركة في كائن meta، بحيث تتجاوز القصص الفردية القيم المختلفة فقط. وهذا يحافظ على مبدأ DRY في القصص.

export default {
  component: Button,
  args: { label: "Button" }, // default for all stories
}

export const Disabled = { args: { disabled: true } }

قصص تستخدم Slots عبر render

بالنسبة إلى المحتوى الموضوع داخل slots، وفّروا دالة render تعيد قالبًا يستخدم المكوّن. ويغطي ذلك الحالات التي لا يمكن لـ args وحدها التعبير عنها.

export const WithIcon = {
  render: (args) => ({
    components: { Button },
    setup() { return { args } },
    template: '<Button v-bind="args">⭐ Star</Button>',
  }),
}

مستندات تُنشأ تلقائيًا باستخدام tags

أضيفوا tags: ["autodocs"] إلى meta لكي ينشئ Storybook تلقائيًا صفحة توثيق للمكوّن اعتمادًا على خصائصه وقصصه.

export default {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
}

ما الذي ينشئه autodocs؟

تعرض صفحة autodocs خصائص المكوّن (الاسم، والنوع، والقيمة الافتراضية)، وتعرض كل قصة بوصفها مثالًا تفاعليًا، وتعرض أي تعليقات وصفية — لتصبح مواصفة حيّة من دون ملفات إضافية.

تحقق سريع

تحققوا من فهمكم لكتابة القصص.

مراجعة

لقد تعلمتم كتابة قصص المكونات:

تلتقط القصة حالة واحدة من حالات المكوّن؛ ويستخدم CSF3 تصديرات للكائنات.
التصدير الافتراضي هو meta، ويحتوي على title (مسار الشريط الجانبي) وcomponent.
كل تصدير مسمى هو صيغة مختلفة لقصة؛ ويوفّر args قيم خصائصها.
توضع قيم args المشتركة في meta، وتتجاوز القصص القيم الأخرى. استخدموا render مع slots.
ينشئ tags: ["autodocs"] صفحة توثيق تلقائيًا.

الأسئلة الشائعة

هل درس «كتابة قصص المكوّنات» مجاني؟

نعم — نص درس «كتابة قصص المكوّنات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «كتابة قصص المكوّنات»؟

تنسيق CSF3، والتصدير الافتراضي (title وcomponent)، والتصديرات المسماة كقصص، وargs تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «كتابة قصص المكوّنات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy