BEEQ

BEEQ, Inisiatif Perpustakaan Komponen Web

Repositori ini menyimpan kode sumber komponen web yang ada dalam sistem desain BEEQ.

Kemasan	Versi	Dokumentasi
@beeq/core		Readme
@beeq/angular		Readme
@beeq/react		Readme
@beeq/vue		Readme
@beeq/tailwindcss		Readme

️ Sebelum memulai ️

Struktur?

Proyek ini telah disusun sebagai monorepo NX:

 ├── ? packages
  ├── ? beeq
  ├── ? beeq-angular
  ├── ? beeq-react
  ├── ? beeq-vue
  ├── ...
  ├── ? beeq-tailwindcss
  ├── ...
├── ? tools
├── package.json
├── package-lock.json

Di mana:

• Paket/BEEQ: Perpustakaan Inti (sumber untuk semua elemen/komponen yang diterapkan)
• Paket/BEEQ-Angular: Pembungkus spesifik sudut untuk perpustakaan inti BeEQ
• Paket/BEEQ-React: React.js Pembungkus khusus untuk BeeQ Core Library
• Paket/BEEQ-VUE: Pembungkus khusus vue.js untuk BeeQ Core Library
• Paket/BEEQ-TAILWINDCSS: Konfigurasi TailwindCSS BEEQ

Dependensi?

Kami merekomendasikan penggunaan Volta untuk mengelola versi Node dan NPM. Proses instalasi cukup mudah, dan sebagaimana dirujuk di situs resmi mereka:

Dengan Volta, Anda dapat memilih mesin simpul sekali dan kemudian berhenti mengkhawatirkannya. Anda dapat beralih di antara proyek dan berhenti harus beralih secara manual di antara node.

Setelah Anda menginstal Volta, setiap kali Anda mengubah ke folder BEEQ secara lokal, itu akan beralih ke node kanan dan versi NPM yang disematkan di package.json :

  "volta" : {
    "node" : " 20.11.1 " ,
    "npm" : " 10.4.0 "
  }

Volta tidak wajib, Anda masih dapat menggunakan pengaturan Node/NPM apa pun yang paling cocok untuk Anda, ingatlah bahwa Anda akan membutuhkan:

• NodeJS v18.x atau lebih tinggi
• NPM V8 atau lebih tinggi

Penggunaan

Komponen BEEQ diterbitkan ke NPM Package Manager Registry. Anda dapat menggunakan @beeq/core atau salah satu pembungkus spesifik kerangka kerja ( @beeq/angular , @beeq/react ) tergantung pada tumpukan teknologi proyek Anda. Pastikan ikuti instruksi penggunaan untuk setiap paket:

• Cara menggunakan paket @beeq/core
• ? Cara menggunakan paket @beeq/angular
• Cara menggunakan paket @beeq/react
• ? Cara menggunakan paket @beeq/vue
• ? Cara menggunakan @beeq/tailwindcss preset

Jangan ragu untuk memeriksa buku cerita kami untuk melihat semua komponen BEEQ dirilis. Di sana Anda dapat menemukan semua API komponen (properti, peristiwa, dan metode yang terpapar) bersama dengan variasi yang diizinkan oleh masing -masing komponen.

Menjalankan proyek? ‍

Untuk mengembangkan/memperluas komponen pada sistem desain BEEQ, silakan garpu repo ini di GitHub dan klon secara lokal ke direktori baru:

git clone https://github.com/ < YOUR_GITHUB_USERNAME > /BEEQ.git BEEQ-Design-System
cd BEEQ-Design-System
git checkout main

Instalasi

Cukup jalankan:

npm ci
# Make sure to build first the project before starting it
npm run build
npm start

Mulai Coding?!

Membangun ?

Untuk pembangunan produksi, jalankan saja:

npm run build

Tes ?

BeeQ menggunakan Jest untuk tes unit dan lelucon dan dalang untuk tes ujung ke ujung.

Anda dapat menjalankan semua tes sekali, dengan mengeksekusi:

npm run test

Jika Anda mendapatkan kesalahan yang mirip dengan yang di bawah ini, cobalah untuk memeriksa secara lokal cabang main dan menjalankan tes lagi .

fatal: Not a valid object name main
fatal: No such ref: ' main '
nx affected

Menghasilkan komponen

BeeQ hadir dengan generator komponen yang menghemat waktu Anda saat membuat kerangka untuk komponen baru. Untuk menggunakan generator, Anda hanya perlu menjalankan perintah berikut dan mengikuti instruksi di CLI prompt Anda:

npm run g

Berkontribusi

? Jika Anda sedang dalam mood dan ingin membantu ?, Harap baca dengan cermat pedoman dan standar pengembangan yang berkontribusi dengan cermat.

❗️ Saat mengerjakan perbaikan bug, fitur baru, dll., Harap perhatikan bahwa kami mengikuti alur kerja GitFlow. Pastikan untuk mengikuti instruksi dari pedoman strategi percabangan yang berkontribusi tentang cara membuat cabang Anda saat mulai bekerja pada bug/pemasangan panas, fitur baru, dll.

Dokumentasi

Stensiljs

Butuh bantuan? Lihat dokumen Stensiljs di sini (https://stenciljs.com/).

Tailwind CSS

Kami menggunakan CSS Tailwind untuk gaya komponen, silakan lihat dokumentasi mereka di sini: (https://tailwindcss.com/docs/)

Terima kasih

Kami ingin mengucapkan terima kasih yang tulus kepada Chromatic karena menyediakan platform pengujian visual yang memungkinkan kami untuk meninjau perubahan UI dan mengidentifikasi regresi visual.

Terima kasih kepada tim NX karena telah membantu kami merampingkan proses CI kami dan mengelola monorepo kami secara efisien.