react storybook addon chapters

⛔ [تم إهماله] لم يعد هذا الملحق يتم الحفاظ عليه ويعتبر الآن مستهجنًا لصالح التسلسل الهرمي والتسلسل الهرمي للمكونات القصيرة. نوصي بإصدار القصص 6 بدلاً من ذلك.

رد فعل فصول القصص القصيرة Addon

يتيح React Storybook Squarters Addon عرض مكونات متعددة داخل قصة من خلال تقسيمها إلى فئات أصغر (فصول) وفئات فرعية (أقسام) لمزيد من الخير التنظيمي.

باستخدام الملحق ، يمكن أن تتكون القصة من فصول متعددة ويتكون الفصل من أقسام متعددة. يمكن لكل قسم تقديم كتلة من التعليمات البرمجية ، والتي تستخدم عادة لعرض مكون واحد أو حالة معينة من المكون.

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

يأتي كل قسم مع عنوان قسم ، الترجمة الفرعية ، معلومات القسم .

تم تعديل هذا الملحق من React-Storybook-Addon-Info ويستخدم بعضًا من رمز المكون من هناك.

الاستخدام

قم بتثبيت وحدة NPM التالية:

npm install --save-dev react-storybook-addon-chapters

ثم اضبط الملحق في المكان الذي تقوم فيه بتكوين كتاب القصص مثل هذا:

 import React from 'react' ;
import { configure , setAddon } from '@storybook/react' ;
import chaptersAddon from 'react-storybook-addon-chapters' ;

setAddon ( chaptersAddon ) ;

configure ( function ( ) {
  ...
} , module ) ;

لإغلاق الأنماط الافتراضية إضافة:

 setDefaults ( { sectionOptions : { useTheme : false } } ) ;

جميع المكونات المقدمة لها فئة محددة. مع تعيين "UseTheme" على خطأ ، يجب ألا تواجه مشكلة في تصميم فصولك.

ثم قم بإنشاء قصصك مع .addWithChapters API.

 import React from 'react' ;
import Button from './Button' ;
import { storiesOf } from '@storybook/react' ;

storiesOf ( 'Addon Chapters' )
  . addWithChapters (
    'Story With Chapters' ,
    {
      subtitle : < Optional story subtitle > ,
      info: < Optional story info > ,
      chapters: [
        // List of chapters. Refer to Configuration Format section.
        {
          title : < Optional chapter title > ,
          subtitle : < Optional chapter subtitle > ,
          info : < Optional chapter info > ,
          sections : [
            // List of sections.
            {
              title : < Optional section title > ,
              subtitle: < Optional section subtitle > ,
              info: < Optional section info > ,
              sectionFn: () = > ( < Button label = "My Button" onClick = { ( ) => { alert ( 'Hello World!' ) ; } } /> ),
              options: {
                showSource : true ,
                allowSourceToggling : true ,
                showPropTables : true ,
                allowPropTablesToggling : true ,
              } ,
            } ,
            ...
          ] ,
        } ,
        ...
      ]
    }
  ) ;

إلقاء نظرة على هذا المثال القصص لمعرفة المزيد حول addWithChapters API.

الخيارات العالمية

لتكوين الخيارات الافتراضية لجميع أقسام الفصل ( section.options ) ، استخدم setDefaults في .storybook/config.js .

 import React from 'react' ;
import { configure , setAddon } from '@storybook/react' ;
import chaptersAddon , { setDefaults } from 'react-storybook-addon-chapters' ;

// optionally override defaults
setDefaults ( {
  sectionOptions : {
    showSource : true ,
    allowSourceToggling : true ,
    showPropTables : false ,
    allowPropTablesToggling : true ,
    decorator : story => ( < div > { story ( ) } </ div > ) ,
  }
} ) ;
setAddon ( chaptersAddon ) ;

configure ( function ( ) {
  ...
} , module ) ; 

تنسيق التكوين

قصة

مفتاح	وصف	يكتب	تقصير
الترجمة	قصة فرعية	خيط	-
معلومات	معلومات إضافية للقصة	سلسلة (تخفيض)	-
فصول	مجموعة من كائنات الفصل	صفيف	-

الفصل

مفتاح	وصف	يكتب	تقصير
عنوان	عنوان الفصل	خيط	-
الترجمة	الفصل الفرعي	خيط	-
معلومات	معلومات إضافية للفصل	سلسلة (تخفيض)	-
أقسام	مجموعة من كائنات القسم	صفيف	-

قسم

مفتاح	وصف	يكتب	تقصير
عنوان	عنوان القسم	خيط	-
الترجمة	الترجمة الفرعية	خيط	-
معلومات	معلومات إضافية للقسم	سلسلة (تخفيض)	-
القسم	وظيفة تُرجع مكون رد الفعل ليتم عرضه	وظيفة	-
خيارات	كائن التكوين لهذا القسم. الرجوع إلى الصفوف القليلة التالية للمفاتيح	هدف	-
Options.showsource	عرض مصدر المكون	منطقية	حقيقي
خيارات. allowsourcetoggling	السماح بإظهار/إخفاء مصدر المكون	منطقية	حقيقي
Options.ShowPropTables	عرض أنواع المكون	منطقية	خطأ شنيع
Options.allowPropTableStoggling	السماح بإظهار/إخفاء أنواع المكون	منطقية	حقيقي
الخيارات	وظيفة ديكور اختيارية سيتم استخدامها لتقديم المكون في القسم	وظيفة	-

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

تفقد المكونات أسمائها على البناء الثابت

كما يتم تحديد أسماء المكونات مع رمز JavaScript الآخر عند بناء للإنتاج. عند إنشاء مكونات ، قم بتعيين خاصية displayName Static لإظهار اسم المكون الصحيح على بنيات ثابتة.