Mulakan dengan memasang buku cerita menggunakan NPX Storybook@init terkini untuk menubuhkan kebergantungan, konfigurasi, dan cerita sampel. 2. Mengatur komponen dalam folder terpencil dengan cerita, ujian, dan fail indeks untuk berskala. 3. Tulis cerita komprehensif yang meliputi pelbagai negeri (memuatkan, dilumpuhkan, dll.), Menggunakan ARG dan kawalan untuk manipulasi prop interaktif. 4. Membolehkan Addon-Essentials untuk menjana tab DOCS, kawalan visual, tindakan, dan Viewport bertukar-tukar untuk panduan gaya hidup. 5. Ikuti Amalan Terbaik: Gunakan penamaan yang konsisten (misalnya, komponen/butang), menyimpan cerita yang dikemas kini, mengadopsi typescript, dan komponen eksport dengan bersih. 6. Meningkatkan dengan ujian A11Y, kromatik untuk regresi visual, dan menerbitkan dalam talian untuk akses pasukan. 7. Rawat perpustakaan sebagai sistem yang berkembang -mula kecil dengan komponen teras dan tambah dokumen, ujian, dan token reka bentuknya untuk membina bahasa UI yang dikongsi bersama di seluruh pasukan.

Jadi anda berfikir tentang membina perpustakaan komponen - langkah besar. Sekiranya anda bekerja dalam satu pasukan atau merentasi pelbagai projek, perpustakaan komponen pepejal memastikan UI anda konsisten, mempercepatkan pembangunan, dan menjadikan ujian lebih mudah. Salah satu alat terbaik untuk membantu anda membina dan mempamerkan perpustakaan itu? Buku cerita.

Inilah caranya untuk memulakan dan apa yang sebenarnya penting ketika menetapkannya.

Mengapa menggunakan buku cerita untuk perpustakaan komponen?

Buku cerita memberi anda kotak pasir untuk membangunkan komponen UI secara berasingan. Ini bermakna tidak perlu memutar aplikasi penuh anda hanya untuk tweak butang. Anda menulis cerita untuk setiap komponen, yang pada dasarnya berbeza negeri atau menggunakan kes (seperti butang pemuatan, butang kurang upaya, dan lain -lain).

Ia bukan hanya untuk pemaju - pereka, QA, dan produk produk boleh menggunakannya untuk melihat apa yang ada dan bagaimana keadaan berkelakuan. Plus, ia disepadukan dengan alat ujian, dokumen, dan sistem reka bentuk.

Menyediakan buku cerita

Jika anda mula segar (atau menambah kepada projek React, Vue, atau Projek Frontend yang sedia ada), cara paling mudah adalah menggunakan CLI automatik:

 NPX Storybook@terbaru init

Ini akan:

• Pasang kebergantungan buku cerita
• Konfigurasikan Tetapan Asas ( main.js , preview.js )
• Tambah cerita sampel
• Sediakan skrip untuk menjalankannya secara tempatan

Selepas persediaan, jalankan:

 NPM Run Storybook

Dan anda akan melihat UI lalai dengan komponen contoh.

Mengatur Perpustakaan Komponen Anda

Struktur perkara. Persediaan folder yang bersih menjadikan perpustakaan anda berskala.

Inilah corak praktikal:

 src/
├── Komponen/
│ ├── butang/
│ │ ├── butang.jsx
│ │ ├── butang.story.js
│ │ ├── butang.test.js
│ │ └── index.js
│ ├── Modal/
│ │ ├── modal.jsx
│ │ ├── modal.stories.js
│ │ └── index.js
│ └── index.js (mengeksport semua komponen)

Setiap komponen mempunyai folder sendiri, dengan fail cerita di sebelahnya. Lokasi bersama ini menjadikannya mudah untuk mencari dan mengemas kini cerita apabila komponen berkembang.

Dalam fail .stories.js anda:

 // Button.stories.js
Eksport Lalai {
  Tajuk: 'Komponen/Butang',
  Komponen: Butang,
};

Eksport const primary = {
  args: {
    Label: 'klik saya',
    Utama: Benar,
  },
};

Export const dilumpuhkan = {
  args: {
    Label: 'dilumpuhkan',
    Kurang Upaya: Benar,
  },
};

Sekarang anda akan melihat "butang" di bawah "komponen" di bar sisi cerita, dengan dua negeri.

Menulis cerita berguna

Jangan hanya menunjukkan jalan gembira. Fikirkan:

• Prop yang berbeza
• Memuatkan negeri
• Syarat ralat
• Tingkah laku responsif (jika berkenaan)

Gunakan ARGS dan kawalan supaya bukan devs boleh tweak prop di UI:

 Eksport Lalai {
  Tajuk: 'Komponen/Input',
  Komponen: Input,
  ArgTypes: {
    Varian: {
      Kawalan: 'Pilih',
      Pilihan: ['digariskan', 'dipenuhi', 'standard'],
    },
  },
};

Export const default = {
  args: {
    Label: 'Nama',
    Pemegang tempat: 'Masukkan nama anda',
  },
};

Sekarang anda mendapat dropdown dalam panel Kawalan Buku Story untuk menukar varian secara langsung.

Menambah dokumen dan kawalan

Storybook secara automatik menjana tab "Dokumen" untuk setiap komponen menggunakan MDX atau Generasi DOC terbina dalam.

Dayakannya di main.js :

 // .storybook/main.js
modul.exports = {
  Cerita: ['../src/components/**/*.stories.@(JS|JSX|TsYSX)'],
  Addons: [
    '@Storybook/Addon-Essentials', // Termasuk kawalan, dokumen, tindakan, dll.
  ],
};

Dengan @storybook/addon-essentials , anda mendapat:

• Kawalan visual untuk alat peraga
• Dokumen yang dihasilkan secara automatik
• Panel Tindakan untuk melihat acara
• Switching Viewport (mudah alih/desktop)
• Latar belakang

Ini menjadikan buku cerita anda menjadi panduan gaya hidup.

Amalan terbaik untuk mengekalkannya

• Nama Cerita secara konsisten - Gunakan hierarki yang jelas seperti Components/Button atau Forms/Input
• Gunakan nama cerita deskriptif - "dengan ikon" lebih baik daripada "Contoh 2"
• Simpan cerita selaras dengan kod - cerita yang sudah lapuk menyesatkan pengguna
• Gunakan TypeScript - Meningkatkan Autocomplete dan Mengurangkan Kesalahan dalam Cerita
• Komponen Eksport Bersih - Memudahkannya diimport dari perpustakaan anda di tempat lain

Juga, pertimbangkan:

• Menambah Ujian Kebolehcapaian dengan @storybook/addon-a11y
• Mengintegrasikan dengan kromatik untuk ujian regresi visual
• Menerbitkan buku cerita anda dalam talian (halaman github, vercel, dll) untuk akses pasukan

Pemikiran terakhir

Membina perpustakaan komponen dengan buku cerita bukan hanya memamerkan butang. Ini mengenai mewujudkan bahasa bersama untuk pasukan anda. Apabila semua orang dapat melihat apa yang ada dan bagaimana ia berfungsi, anda mengurangkan pertindihan dan meningkatkan kualiti.

Mula Kecil - Beberapa komponen teras dengan cerita yang baik. Berulang. Tambah dokumen, ujian, dan token reka bentuk dari masa ke masa.

Dan ingat: perpustakaan komponen tidak pernah "dilakukan." Tetapi dengan buku cerita, anda mempunyai alat yang tepat untuk mengembangkannya secara lestari.

Pada asasnya, hanya mula membina - selebihnya berikut.

Atas ialah kandungan terperinci Membina perpustakaan komponen dengan buku cerita. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!