react storybook addon chapters

⛔ [Teram] addon ini tidak lagi dipertahankan dan sekarang dianggap sudah tidak disamakan demi hierarki sarang dan komponen asli Storybook. Kami merekomendasikan buku cerita versi 6 sebagai gantinya.

React Storybook Chapters Addon

React Storybook Chapters Addon memungkinkan menampilkan banyak komponen dalam sebuah cerita dengan memecahnya menjadi kategori yang lebih kecil (bab) dan subkategori (bagian) untuk lebih banyak kebaikan organisasi.

Menggunakan addon, sebuah cerita dapat terdiri dari beberapa bab dan satu bab terdiri dari beberapa bagian. Setiap bagian dapat membuat blok kode, yang biasanya digunakan untuk menampilkan satu komponen atau keadaan tertentu dari suatu komponen.

Bab dapat digunakan untuk mengelompokkan komponen terkait bersama, atau menunjukkan berbagai keadaan komponen. Setiap bab dilengkapi dengan judul bab , subtitle bab , info bab dan daftar bagian . Cukup hilangkan salah satu dari mereka untuk menyembunyikan mereka dari rendering.

Setiap bagian dilengkapi dengan judul bagian , bagian subtitle , info bagian .

Addon ini dimodifikasi dari react-storybook-addon-info dan menggunakan beberapa kode komponen dari sana.

Penggunaan

Instal modul NPM berikut:

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

Kemudian atur addon di tempat Anda mengkonfigurasi buku cerita seperti ini:

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

setAddon ( chaptersAddon ) ;

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

Untuk mematikan gaya default, tambahkan:

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

Semua komponen yang diberikan memiliki kelas yang ditentukan. Dengan 'Usetheme' diatur ke False, Anda seharusnya tidak memiliki masalah menata bab Anda.

Kemudian buat cerita Anda dengan .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 ,
              } ,
            } ,
            ...
          ] ,
        } ,
        ...
      ]
    }
  ) ;

Lihatlah contoh cerita ini untuk mempelajari lebih lanjut tentang API addWithChapters .

Opsi Global

Untuk mengonfigurasi opsi default untuk semua bagian bab ( section.options ), gunakan setDefaults di .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 ) ; 

Format Konfigurasi

Cerita

Kunci	Keterangan	Jenis	Bawaan
subtitle	Subtitle cerita	Rangkaian	-
info	Informasi tambahan untuk ceritanya	String (markdown)	-
bab	Array objek bab	Array	-

Bab

Kunci	Keterangan	Jenis	Bawaan
judul	Judul Bab	Rangkaian	-
subtitle	Bab Subtitle	Rangkaian	-
info	Informasi tambahan untuk bab ini	String (markdown)	-
bagian	Array bagian objek	Array	-

Bagian

Kunci	Keterangan	Jenis	Bawaan
judul	Judul Bagian	Rangkaian	-
subtitle	Subtitle Bagian	Rangkaian	-
info	Informasi tambahan untuk bagian ini	String (markdown)	-
sectionfn	Fungsi yang mengembalikan komponen bereaksi yang akan ditampilkan	Fungsi	-
opsi	Objek konfigurasi untuk bagian ini. Lihat beberapa baris berikutnya untuk kunci	Obyek	-
opsi.showsource	Tampilkan sumber komponen	Boolean	BENAR
Options.allowsourcetoggling	Izinkan menunjukkan/menyembunyikan sumber komponen	Boolean	BENAR
Options.ShowPropTables	Tampilkan proptipe komponen	Boolean	PALSU
Options.AndPropTableStoggling	Izinkan menunjukkan/menyembunyikan proptypes komponen	Boolean	BENAR
opsi.decorator	Fungsi dekorator opsional yang akan digunakan untuk merender komponen di bagian	Fungsi	-

FAQ

Komponen kehilangan nama mereka pada build statis

Nama Komponen juga mendapat minified dengan kode JavaScript lainnya saat membangun untuk produksi. Saat membuat komponen, atur properti Statis displayName untuk menampilkan nama komponen yang benar pada bangunan statis.