React Academy · درس

Args وControls وإضافة Actions

استخدم args لجعل القصص تفاعلية وإضافة actions لتسجيل أحداث المكوّنات.

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

ما هي Args؟

Args هي مدخلات القصة، أي خصائصها (props). يستخدم Storybook كائن args لعرض المكوّن وتشغيل لوحة Controls، وهي محرر حي للخصائص في واجهة Storybook.

تعريف Args

اضبط args في كائن القصة. يستنتج Storybook نوع عنصر التحكم من نوع الخاصية في TypeScript.

export const Primary: Story = {
  args: {
    label: 'Click me',
    variant: 'primary',
    size: 'medium',
    disabled: false,
  },
};

لوحة Controls

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

ArgTypes لتخصيص عناصر التحكم

استخدم argTypes في meta لتخصيص طريقة ظهور خاصية في Controls، بما في ذلك النوع والخيارات والوصف والقيمة الافتراضية.

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger'],
      description: 'Visual style of the button',
    },
    size: {
      control: { type: 'radio' },
      options: ['small', 'medium', 'large'],
    },
    disabled: { control: 'boolean' },
    label: { control: 'text' },
  },
};

إخفاء Args من Controls

اضبط control: false في argTypes لإخفاء خاصية من لوحة Controls، وهو مفيد للخصائص الداخلية أو الدوال.

argTypes: {
  onClick: { control: false },
  className: { table: { disable: true } },
},

إضافة Actions

تسجّل إضافة Actions، وهي جزء من addon-essentials، استدعاءات دوال الخصائص في لوحة Actions. استخدم fn() من @storybook/test لإنشاء دوال spy تظهر في اللوحة.

import { fn } from '@storybook/test';

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    onClick: fn(),     // click events appear in Actions panel
    onHover: fn(),
  },
};

الربط التلقائي للإجراءات باستخدام argTypes

استخدم argTypes: { onClick: { action: 'clicked' } } لإنشاء معالج إجراء تلقائيًا من دون استيراد fn().

const meta: Meta<typeof Select> = {
  component: Select,
  argTypes: {
    onChange: { action: 'changed' },
    onBlur: { action: 'blurred' },
  },
};

Args العامة

اضبط args في preview.ts لتطبيقها على جميع القصص بشكل عام، وهو مفيد لإعدادات السمة أو اللغة المحلية أو إطار العرض التي تؤثر في كل مكوّن.

// .storybook/preview.ts
export const globalTypes = {
  locale: {
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: {
      icon: 'globe',
      items: ['en', 'fr', 'de'],
    },
  },
};

شريط أدوات Storybook

تظهر Args العامة التي تحتوي على تهيئة toolbar كأزرار في شريط أدوات Storybook، مما يتيح لك تبديل السمات أو اللغات المحلية أو نقاط التوقف بشكل عام.

تركيب Args

انشر args من قصة أخرى للبناء عليها. يقلل ذلك التكرار عند إنشاء قصص بديلة.

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' },
};

export const PrimaryLoading: Story = {
  args: { ...Primary.args, loading: true },
};

export const PrimaryDisabled: Story = {
  args: { ...Primary.args, disabled: true },
};

تعيين قيم عناصر التحكم

استخدم mapping في argTypes لتعيين خيارات عناصر التحكم سهلة القراءة إلى قيم الخصائص الفعلية، مثل الأيقونات أو المكوّنات.

argTypes: {
  icon: {
    options: ['Star', 'Heart', 'None'],
    mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
    control: { type: 'select' },
  },
},

تحقّق سريع

ماذا تفعل الدالة fn() من @storybook/test عند استخدامها كوسيط للقصة؟

مراجعة

تُشغّل Args كلاً من لوحة Controls (محرّر الخصائص المباشر) وإضافة Actions (مسجّل الأحداث). عرّفوا أنواع الوسائط باستخدام argTypes للحصول على عناصر تحكم أكثر ثراءً، واستخدموا fn() من @storybook/test لتسجيل الإجراءات، وركّبوا الوسائط بين القصص لتقليل التكرار.

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

هل درس «Args وControls وإضافة Actions» مجاني؟

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

ماذا ستتعلم في «Args وControls وإضافة Actions»؟

استخدم args لجعل القصص تفاعلية وإضافة actions لتسجيل أحداث المكوّنات. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «Args وControls وإضافة Actions»؟

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

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

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

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

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