Uji Kompetensi Storybook and Package Basics
Membuktikan kesiapan mendokumentasikan component, state, accessibility expectation, export surface, dan change note tanpa publishing package.
Yang dicek
- Menyusun typed story file untuk reusable FormField dengan states yang perlu direview
- Menetapkan a11y test behavior serta mencatat manual QA
- Menjelaskan public export dan scope internal component system kecil
- Menulis usage serta changelog note yang membantu consumer
Isi lesson
6 blok- 1.Checkpoint: dokumentasikan CourseTextField lintas featureBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Gunakan docs untuk menjaga story dan quality contract nyataBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: dokumentasikan CourseTextField lintas feature
WajibCourseTextField dipakai profile settings dan invite member. Versi awal hanya memiliki story Default, props error/disabled tidak terlihat, a11y check dimatikan global, dan consumer mengimpor component dari path internal berbeda. Saat default hint berubah, tidak ada note yang memberi tahu feature owner state mana yang perlu direview.
Pada checkpoint ini, buat story contract yang dapat dibaca: meta typed, stories Default, WithHint, Error, dan Disabled, args sesuai API, a11y behavior error untuk stories yang siap dijaga, serta public export jelas. Storybook tidak menggantikan submit flow atau server validation; ia membuat state component mudah ditemukan sebelum integration QA.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Storybook and Package Basics
Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.
Target lulus
70/100
Skor terbaik
0/100
Status
Belum dikerjakan
Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.
Pertanyaan 1 dari 7
Target lulus: 70
Tujuan utama Storybook pada component system adalah
Coding practice
WajibDibuka di workspace khususDocument course text field Storybook checkpoint
Dokumentasikan CourseTextField melalui default, hint, error, dan disabled stories dengan typed meta serta a11y test behavior.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Writing practice
WajibLatihan menulis
Pilih satu reusable component local atau CourseTextField checkpoint. Tulis documentation note: purpose/consumer, public props/states, stories yang harus ada dan alasan, a11y check/manual QA, public export path, usage example, breaking atau potentially breaking change, dan scope yang ditunda. Bila Storybook belum dapat berjalan, tulis blocker serta docs yang akan dibaca; jangan mengklaim check berhasil.
Tulis draft dulu sebelum menandai writing practice selesai.
0/900 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibGunakan docs untuk menjaga story dan quality contract nyata
Dokumentasi resmi menjelaskan setup, Component Story Format, args, dan a11y parameter. Gunakan docs bersama component API serta manual QA; jangan menyalin konfigurasi lintas project tanpa memahami framework, dependency, dan state yang didokumentasikan.
Storybook
Install Storybook
Fokus baca
- Command setup dari root project.
- Script dan configuration yang ditambahkan CLI.
- Menjalankan Storybook lokal.
Abaikan dulu
- Advanced configuration, visual regression service, dan publishing workflow.
Storybook
How to write stories
Fokus baca
- meta, named story export, dan StoryObj typed.
- Args sebagai representasi props.
- Story dekat component source.
Abaikan dulu
- Decorator, loader, play function, serta page composition yang belum dibutuhkan.
Storybook
Args
Fokus baca
- Mengubah state component melalui args.
- Mereuse args tanpa menyembunyikan API.
- Membedakan args component dari global setting.
Abaikan dulu
- Interactive useArgs bila static story sudah cukup.
Storybook
Accessibility tests
Fokus baca
- parameters.a11y.test dengan error, todo, dan off.
- Result sebagai signal awal pada stories.
- Manual QA keyboard serta focus.
Abaikan dulu
- Mematikan check global demi menghapus warning tanpa memperbaiki component.
npm
package.json
Fokus baca
- Scripts dan metadata setelah tooling ditambahkan.
- Membedakan dependency project dari export surface.
- Menjaga package.json dapat dijelaskan di pull request.
Abaikan dulu
- Menerbitkan package, registry configuration, dan release automation.
Aksi setelah membaca
Pada local project, jalankan Storybook untuk satu primitive dan satu product component. Tambahkan default, variant/state, serta edge-case stories; jalankan a11y check dasar; periksa keyboard behavior; rapikan public export; lalu tulis changelog-style note tentang change, consumer impact, QA, dan debt yang ditunda.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Storybook membuat component state, variant, dan edge case dapat ditemukan di luar route product.
- Stories mengikuti component API melalui typed meta dan args yang dapat dibaca consumer.
- A11y check adalah quality signal; keyboard, focus, copy, serta integration QA tetap diperlukan.
- Public exports dan changelog menjaga component system kecil berkembang tanpa caller mengimpor detail internal.
- Level 17 selesai: lanjut ke Level 18 untuk memahami API, auth boundary, dan data integration.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: dokumentasikan CourseTextField lintas feature.