Package Structure Basics
Mengatur component, story, token, type, dan export surface kecil agar consumer tahu apa yang boleh diimpor tanpa package publishing.
Tujuan belajar
- Memisahkan component source, story, type, dan export public secara sederhana
- Membedakan file internal dari entry point yang didukung consumer
- Menggunakan barrel export dengan hemat pada public surface jelas
- Menghindari monorepo, publishing, serta versioning strategy sebelum dibutuhkan
Isi lesson
6 blok- 1.Beri consumer satu pintu masuk yang dapat dijelaskanBelum selesaiWajib
- 2.Surface export kecil untuk UI sharedBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan membangun package sebelum ada boundary nyataBelum selesaiOpsional
- 6.RingkasanBelum selesaiWajib
Beri consumer satu pintu masuk yang dapat dijelaskan
WajibComponent system kecil tidak membutuhkan monorepo atau package registry untuk punya structure baik. Source component berada dekat type serta story-nya, token memiliki lokasi jelas, dan public entry point hanya mengekspor component serta type yang memang didukung. Consumer tidak perlu mengimpor file internal hanya karena belum ada path konsisten.
Jangan menganggap setiap folder harus menjadi package. Component yang hanya dipakai satu feature dapat tetap dekat feature tersebut. Jika Button, FormField, token, dan shared type dipakai lintas feature, letakkan pada shared UI boundary yang dapat dimiliki serta didokumentasikan. Barrel export berguna untuk surface public kecil, tetapi jangan mengekspor semua helper internal lalu menjadikannya breaking contract tanpa sengaja.
Bagian ini memengaruhi progres lesson.
Surface export kecil untuk UI shared
Wajibsrc/components/ui/
CourseButton/CourseButton.tsx
CourseButton/CourseButton.stories.tsx
CourseButton/CourseButton.types.ts
FormField/FormField.tsx
FormField/FormField.stories.tsx
tokens.css
index.ts
export { CourseButton } from "./CourseButton/CourseButton";
export type { CourseButtonProps } from "./CourseButton/CourseButton.types";
export { FormField } from "./FormField/FormField";Story hidup dekat component agar state dan API dapat dibaca bersama. index.ts menjelaskan public surface. Helper internal, test fixture, atau CSS implementation detail tidak perlu diekspor hanya karena berada dalam folder sama.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususOrganize course UI package exports
Susun public index.ts untuk CourseButton, CourseButtonProps, dan FormField tanpa mengekspor helper internal.
Tujuan awal: Fokus di tab TS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Apa alasan utama menjaga public export surface kecil?
Progres lesson naik setelah jawaban benar.
Kesalahan umum
OpsionalJangan membangun package sebelum ada boundary nyata
Folder bernama design-system belum membuktikan component layak dipakai lintas aplikasi. Mulai dari component dengan consumer nyata, type jelas, story, serta public export kecil. Publishing, monorepo, semver strategy, dan release automation adalah pekerjaan berikutnya saat team serta distribusi memang membutuhkannya.
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- Source, story, type, token, dan public export perlu lokasi mudah ditemukan.
- Public entry point menjelaskan import yang didukung consumer.
- Feature-local component tidak perlu dipaksa menjadi shared UI package.
- Barrel export berguna bila surface kecil dan ownership jelas.
- Berikutnya, changelog note membuat perubahan component dapat dipahami consumer.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Beri consumer satu pintu masuk yang dapat dijelaskan.