neeto ui

Neetoui adalah perpustakaan yang mendorong pengalaman di semua produk Neeto yang dibangun di Bigbinary.

Instalasi

 yarn add @bigbinary/neetoui

Ini akan menginstal paket neetoui di dalam aplikasi Anda. Mulai 3.0.x , Neetoui Stylesheet telah dipisahkan dari bundel. Agar gaya berfungsi, silakan impor Neetoui Stylesheet ke titik masuk scss utama Anda.

 @import " @bigbinary/neetoui " ;

Dependensi

Neetoui memiliki sedikit dependensi teman sebaya yang diperlukan untuk menggunakan Neetoui dengan benar. Pastikan Anda menginstal semua Peerdependensi yang disebutkan dalam paket.json

react-toastify

Neetoui tergantung pada react-toastify untuk pemanggang roti, sehingga gaya untuk pemanggang harus diimpor ke titik masuk scss utama Anda.

 @import " react-toastify/dist/ReactToastify.min.css " ;

Pastikan juga untuk memasukkan <ToastContainer /> dalam aplikasi Anda.

 import React from "react" ;

import { ToastContainer } from "react-toastify" ;

const App = ( ) => {
  return (
    < >
      < ToastContainer />
      // Other children
    </ >
  ) ;
} ;

formik

Untuk membuat penanganan bentuk lebih mudah dengan Neetoui, kami memberikan ikatan formik dengan komponen Neetoui. Untuk mengetahui tentang formik, ref dokumentasi resmi.

Penggunaan

Ekspor Neetoui Semua komponennya sebagai ekspor bernama. Anda dapat mengimpor komponen yang diperlukan secara individual dengan cara berikut:

 import { Button , Tooltip } from "@bigbinary/neetoui" ;

Jika Anda memerlukan akses ke objek yang berisi referensi ke semua komponen, Anda dapat melakukan impor wildcard. Dengan cara ini, Anda dapat membuat komponen dinamis dari Neetoui.

 import React from "react" ;
import * as NeetoUI from "@bigbinary/neetoui" ;

export default function index ( ) {
  const Button = NeetoUI . Button ;

  // get a random component
  const componentName = Math . random ( ) > 0.5 ? "Badge" : "Avatar" ;
  const MyDynamicComponent = NeetoUI [ componentName ] ;

  return (
    < div >
      < Button />
      < MyDynamicComponent />
    </ div >
  ) ;
}

Formik

Neetoui Formik mengekspor semua komponennya sebagai ekspor bernama. Anda dapat mengimpor komponen yang diperlukan secara individual dengan cara berikut:

 import { Input } from "@bigbinary/neetoui/formik" ;

Komponen yang tersedia di Neetoui Formik:

• Masukan
• Radio
• Tombol
• Membentuk
• ActionBlock
• Memilih
• Mengalihkan
• TexTarea
• Kotak centang
• BlockNavigasi
• Treeselect
• Slider

Anda dapat merujuk folder formik untuk memeriksa komponen formik terbaru.

Untuk menggunakan komponen Neetoui Formik, Anda perlu membungkus formulir Anda dengan komponen Form .

 import * as Yup from "yup" ;
import { Form } from "@bigbinary/neetoui/formik" ;

< Form
  formikProps = { {
    initialValues : {
      name : "" ,
      email : "" ,
    } ,
    onSubmit : ( values , formikBag ) => {
      console . log ( values , formikBag ) ;
    } ,
    validationSchema : Yup . object ( {
      name : Yup . string ( ) . required ( "Name is required" ) ,
      email : Yup . string ( ) . email ( "Invalid email" ) . required ( "Email is required" ) ,
    } ) ,
  } }
  className = "w-full space-y-6"
>
  { props => {
    return (
      < >
        < Input { ... props } label = "Name" name = "name" />
        < Input { ... props } label = "Email" name = "email" />
        < Button label = "Submit" type = "submit" style = "primary" />
      </ >
    ) ;
  } }
</ Form > ;

Dalam hal ini, Anda ingin tidak meneruskan children sebagai suatu fungsi, Anda dapat menggunakan sintaks berikut:

 import * as Yup from "yup" ;
import { Form } from "@bigbinary/neetoui/formik" ;

< Form
  formikProps = { {
    initialValues : {
      name : "" ,
      email : "" ,
    } ,
    onSubmit : ( values , formikbag ) => {
      console . log ( values , formikbag ) ;
    } ,
    validationSchema : Yup . object ( {
      name : Yup . string ( ) . required ( "Name is required" ) ,
      email : Yup . string ( ) . email ( "Invalid email" ) . required ( "Email is required" ) ,
    } ) ,
  } }
  className = "w-full space-y-6"
>
  < >
    < Input { ... props } label = "Name" name = "name" />
    < Input { ... props } label = "Email" name = "email" />
    < Button label = "Submit" type = "submit" style = "primary" />
  </ >
</ Form > ;

Komponen Form menerima alat peraga berikut:

• formikProps : Objek Props Formik. Anda dapat melewati initialValues , validationSchema , onSubmit dll. Sebagai alat peraga untuk komponen Form .
• children : Anda dapat melewati fungsi sebagai children ke komponen Form . Fungsi akan menerima objek Formik Props sebagai argumen. Atau Anda dapat langsung melewati children di dalam komponen Form .
• className : Anda dapat menggunakan prop ini untuk menyediakan kelas khusus ke formulir.
• formProps : Form Object Props. Anda dapat melewati className , style dll sebagai alat peraga ke komponen Form .
• scrollToErrorField : Untuk menentukan apakah gulir ke bidang kesalahan saat mengklik tombol kirim diaktifkan atau tidak. Nilai default salah.

---

Perkembangan

Instal semua dependensi dengan mengeksekusi perintah berikut.

 yarn

Anda dapat membuat komponen baru di src/components dan mengekspornya dari src/index.js .

Menjalankan perintah yarn storybook memulai aplikasi buku cerita. Gunakan aplikasi ini untuk menguji perubahan dan melihat bagaimana komponen Anda berperilaku dalam buku cerita untuk Neetoui

• Untuk melihat apakah tes yang terkait dengan komponen Anda lulus yarn test .

  Tes akan gagal jika ada beberapa peringatan atau kesalahan di konsol.

• Untuk melihat apakah Neetoui dibangun dan dibundel setelah perubahan menjalankan yarn bundle .
• Untuk melihat apakah buku cerita dibangun, run yarn build .

Perhatikan bahwa tidak ada dalam folder stories yang akan dibundel dengan Neetoui .

Membangun dan melepaskan.

Paket @bigbinary/neetoui akan diterbitkan ke NPM ketika kami menggabungkan PR dengan patch , minor atau label major ke cabang main . Label patch digunakan untuk perbaikan bug, label minor digunakan untuk fitur baru dan label major digunakan untuk memecahkan perubahan. Anda dapat memeriksa alur kerja Create and publish releases dalam Tindakan GitHub untuk mendapatkan pembaruan langsung.

Jika Anda ketinggalan untuk menambahkan label, Anda dapat mempublikasikan paket secara manual. Untuk itu pertama -tama Anda perlu membuat PR untuk memperbarui nomor versi dalam file package.json dan menggabungkannya ke cabang main . Setelah menggabungkan PR, Anda perlu membuat rilis GitHub baru dari Cabang Utama. Setiap kali rilis baru dibuat dengan nomor versi baru, tindakan GitHub akan secara otomatis menerbitkan paket yang dibangun ke NPM. Anda dapat memeriksa Publish to npm dalam tindakan github untuk mendapatkan pembaruan langsung.

Harap dicatat bahwa sebelum menerbitkan paket, Anda perlu memverifikasi fungsionalitas di beberapa aplikasi web Neeto secara lokal menggunakan yalc Package Manager. Penggunaan yalc dijelaskan dalam video ini: https://youtu.be/f4zzfnrntq8

Dokumentasi

Baca dokumen di sini

https://neeto-ui.neeto.com

Perpustakaan lainnya

• Neetoicons: Neetoicons adalah perpustakaan ikon resmi dari Bigbinary.
• Neetoeditor: Neetoeditor adalah editor Rich-Text berbasis Prose-Mirror yang digunakan di Bigbinary.