precise ui

Perpustakaan komponen React Oporated Oporated dengan dependensi minimal yang ditenagai oleh Zeiss.

Perpustakaan komponen UI berisi keduanya, elemen desain tingkat rendah serta elemen desain tingkat tinggi yang digabungkan. Secara umum, maksud perpustakaan adalah untuk menyederhanakan pengembangan dengan mengekspos komponen yang memenuhi spesifikasi desain dan memberikan kemudahan pemrograman. Oleh karena itu, desain UI yang dapat diulang seharusnya hanya memakan waktu beberapa menit, bukan jam.

Lihat https://precise-ui.io untuk wastafel dapur kami (yaitu, halaman demo yang menggambarkan semua komponen termasuk dokumentasi mereka).

Memulai

Pada dasarnya, penggunaan umum harus implisit sementara fleksibilitas disediakan oleh pernyataan eksplisit. Karena itu, kami bertujuan untuk kesederhanaan (opini), sambil mampu menyesuaikan sebanyak mungkin. Meskipun desain standar cukup banyak ditetapkan untuk target utama kami sendiri, kami ingin mencapai kebebasan penuh di bidang itu. Untuk alasan ini kami terus meningkatkan cara kami melakukan tema dan bagaimana mengekspos komponen untuk memungkinkan segala jenis kustomisasi yang mungkin diinginkan.

UI yang tepat dapat dengan mudah diintegrasikan dalam proyek frontend Anda dengan menggunakan NPM atau benang. Untuk mulai menggunakannya, silakan ikuti instruksi di bawah ini:

Instalasi

1. Pertama, Anda harus menginstalnya:

npm i precise-ui

atau sebagai alternatif, menggunakan benang

yarn add precise-ui

2. Kemudian, pastikan bahwa Anda juga memiliki semua dependensi rekan yang terpasang:

npm i react styled-components

Penggunaan

Semuanya siap, sekarang Anda dapat mulai mengimpor ComponEnets UI Precise-UI.

 import { TextField } from 'precise-ui' ;

< TextField label = "Label" />

Anda dapat melihat daftar semua komponen yang tersedia di situs web kami.

Berkontribusi

Setiap orang dipersilakan untuk memberikan kontribusi apa pun di UI yang tepat. Namun, sebelum Anda mulai, pastikan Anda membaca instruksi kontribusi kami.

Jika Anda merasa tidak yakin apakah Anda harus berkontribusi atau tidak mungkin kode perilaku kami dapat membantu Anda.

Masalah & Dukungan

Jika Anda memiliki pertanyaan dan pertanyaan umum, Anda dipersilakan untuk mengajukan pertanyaan tentang Stack Overflow menggunakan tag precise-ui , dan Anda akan menerima bantuan sesegera mungkin.

Juga, saat membuat masalah baru di sini, silakan gunakan salah satu templat yang disediakan:

• Laporan Bug
• Proposal fitur

Perkembangan

Bagian berikut memandu Anda melalui proses pengembangan UI yang tepat.

Instalasi

Untuk pengembangan Anda akan membutuhkan NPM dan Node.js 8+. Setelah mengkloning pemasangan repositori semua dependensi melalui

npm install

Berikut adalah contoh singkat untuk membantu Anda memulai. Yang Anda butuhkan hanyalah menjalankan:

npm start

Akibatnya ini akan memulai server pengembangan yang menjalankan wastafel dapur (aplikasi demo kami), yang berjalan secara lokal dan dapat dicapai melalui localhost: 6060. Catatan: Port ini dapat diubah. Halaman yang tersedia berisi semua komponen yang disertakan dan beberapa dokumentasi yang diharapkan bermanfaat untuk ini.

Versi

Menambah versi dapat dilakukan melalui npm juga.

npm version

Ini akan menampilkan versi saat ini dan meminta versi baru. Akibatnya informasi dalam paket.json diperbarui. Selain itu, tag GIT dibuat dengan informasi (secara otomatis diawali menggunakan "V"). Prosesnya juga bisa otomatis, misalnya, dengan menentukan versi baru secara langsung. Jadi, misalnya jika versi baru kami adalah "1.2.3" kami hanya menggunakan perintah berikut:

npm version --new-version 1.2.3

Konvensi

Kami tidak menggunakan ekspor default. Sebaliknya, setiap ekspor harus dinamai dengan benar. Untuk komponen, nama ekspor sama dengan nama file atau foldernya.

Folder

Setiap komponen utama yang terbuka harus ditempatkan di foldernya sendiri di bawah components . Komponen yang ditempatkan di file *.part.tsx dianggap komponen internal hanya dibuat untuk menyediakan beberapa struktur internal (yang diperlukan).

Setiap komponen helper desain yang terbuka harus ditempatkan dalam file di folder quarks . Desain pembantu mulai dengan awalan Styled , seperti halnya komponen bergaya polos seharusnya.

Komponen orde tinggi (HOC) apa pun harus ditempatkan di folder hoc . Konvensi penamaan adalah untuk mengekspos hoc dengan A with awalan.

Komponen terkait konteks terletak di folder contexts .

Utilitas fungsional polos harus ditempatkan di folder utils . Meskipun untuk kenyamanan semua konten util diekspor, modul mereka harus direferensikan langsung dari komponen apa pun. Utilitas harus cukup mandiri, yaitu, merujuk komponen kembali dilarang.

Penamaan

Sementara komponen tanpa kewarganegaraan harus dibuat sebagai komponen const , statefull harus dibuat sebagai class . Dalam kasus sebelumnya hanya antarmuka dengan nama komponen yang sufiks dengan Props harus dibuat (untuk mendeklarasikan pengetikan alat peraga). Dalam kasus terakhir antarmuka tambahan dengan nama komponen yang sufiks dengan State juga harus dibuat. Antarmuka ini membawa informasi jenis untuk keadaan internal komponen.

Komponen bidang input harus selalu sufiks dengan Field . Alat peraga mereka harus memperluas antarmuka InputProps .

Alat peraga acara harus diawali dengan on dan mereka harus memiliki satu argumen saja. Argumen ini harus menjadi objek yang mengikuti antarmuka, yang memiliki nama yang memadai untuk acara tersebut, biasanya terdiri dari nama komponen, tipe acara, dan suffixed dengan Event , misalnya, untuk onChange dari sebuah TextField yang kami miliki TextFieldChangeEvent .

Kami memiliki berbagai kelas komponen yang berbeda. Kita harus dapat dengan mudah membedakan antara berbagai kelas komponen dengan melihat akhiran komponen. Kami memiliki:

• *Control , komponen fungsional stateful
• *Panel , tata letak yang akan digunakan
• *Field , bidang input

Pengecualian untuk konvensi ini dapat terjadi karena berbagai alasan (historis, estetika, ...), tetapi harus selalu beralasan dan dibahas dengan benar.

Pemformatan kode

Tidak banyak yang bisa ditulis. Kami menggunakan lebih cantik dan cek build kami jika kode telah dipretifikasi dengan benar. Jalankan saja

npm run prettier

Jika Anda ragu bahwa perubahan kode Anda sesuai dengan pemformatan yang kami inginkan.

Tes unit

Perubahan apa pun harus dilakukan di perusahaan dengan tes unit masing -masing. Untuk menjalankan tes, kami menggunakan perintah berikut:

npm run test

Ini juga akan menjalankan linter. Tes unit mandiri tersedia melalui test:unit . Demikian juga, kami juga dapat dengan mudah melaporkan cakupan kode:

npm run test:unit --coverage

Untuk tes unit kami menggunakan Jest. Kami merekomendasikan menggunakan tes snapshot (yang dilakukan melalui enzim dan beberapa serializer snapshot JSON).

Pengujian visual

Snapshot visual terletak di /integration/__image_snapshots__ .

Ketika pengujian menjalankannya membuat komponen dari [componentName]/Example.md , membuat tangkapan layar dan membandingkannya dengan tangkapan layar versi sebelumnya.

Untuk menjalankan pengujian Docker lokal harus dipasang.

npm run test:visual

Setelah komponen diubah, ditambahkan atau dihapus maka snapshot harus diperbarui. Untuk memperbarui snapshot:

npm run test:visual -- -u

Dalam beberapa kasus (yaitu komponen dengan animasi) diperlukan untuk melewatkan tes. Ini dapat dilakukan dengan cara selanjutnya: Perbarui file example.md:

 ```js { "props": { "data-skip": true } }

<Component />

Dalam beberapa kasus perlu memberi tahu tes visual untuk menunggu sebelum melakukan snapshot. Ini dapat dilakukan dengan cara selanjutnya: Perbarui file example.md:

 ```js { "props": { "data-wait": 500 } }

<Component />

Menambahkan ikon baru

Daftar semua ikon yang diimpor adalah di /tools/icongen.config . Setelah memodifikasi daftar, Anda harus menjalankan npm run icongen atau akan dijalankan di Prepush.

Membuat rilis

Semua kode yang dapat dirilis dikumpulkan di cabang develop . Untuk membuat rilis cukup buat rilis github (biasanya menyalin entri saat ini dari file CHANGELOG.md ).

Alur kerja standar dengan demikian terlihat seperti:

1. Klon Repositori
2. Buat cabang
3. Lakukan pekerjaan itu
4. Dorong perubahan Anda
5. Buat PR dari garpu / cabang Anda untuk develop
6. Setelah "cukup" fitur yang dikumpulkan dalam develop membuat rilis github
7. Untuk perubahan berikutnya yang dapat develop pastikan untuk mengubah / menambah nomor versi

Untuk mengetahui tentang versi yang saat ini dirilis, Anda memiliki dua opsi. Entah Anda pergi ke halaman NPM atau Anda menggunakan rilis GitHub. Keduanya ditautkan di atas readme.md juga.

Lisensi

UI yang tepat dirilis menggunakan lisensi MIT. Untuk informasi lebih lanjut, lihat file lisensi.

Kami menggunakan beberapa ikon dari ikon material UI. Kode dan desain mereka dicakup oleh lisensi masing -masing dari material UI (MIT).