neeto ui
v3.4.0 ✨
Neetoui ist die Bibliothek, die die Erfahrung in allen Neeto -Produkten, die bei BigBinary gebaut wurden, antreibt.
yarn add @bigbinary/neetoui
Dies würde das neetoui -Paket in Ihrer Anwendung installieren. Ab 3.0.x wurde Neetoui Stylesheet vom Bundle getrennt. Um die Stile zum Laufen zu bringen, importieren Sie bitte das Neetoui Stylesheet in Ihren scss .
@import " @bigbinary/neetoui " ;Neetoui hat nur wenige Peer -Abhängigkeiten, die Neetoui ordnungsgemäß verwenden müssen. Stellen Sie sicher, dass Sie alle im Paket genannten PeerDependenzen installieren.json
react-toastify Neetoui ist auf react-toastify für Toaster abhängig, daher müssen die Stile für Toaster in Ihren Haupteintrittspunkt scss importiert werden.
@import " react-toastify/dist/ReactToastify.min.css " ; Stellen Sie außerdem sicher, dass Sie <ToastContainer /> in Ihre Bewerbung einbeziehen.
import React from "react" ;
import { ToastContainer } from "react-toastify" ;
const App = ( ) => {
return (
< >
< ToastContainer />
// Other children
</ >
) ;
} ;formikUm mit Neetoui die Form des Formulars zu erleichtern, bieten wir die Formik -Bindung mit Neetoui -Komponenten. Um über Formik zu wissen, ref der offiziellen Dokumentation.
Neetoui exportiert alle Komponenten als genannte Exporte. Sie können die erforderlichen Komponenten auf folgende Weise individuell importieren:
import { Button , Tooltip } from "@bigbinary/neetoui" ;Wenn Sie Zugriff auf ein Objekt benötigen, das Verweise auf alle Komponenten enthält, können Sie einen Wildcard -Import durchführen. Auf diese Weise können Sie dynamische Komponenten von Neetoui rendern.
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 >
) ;
}Neetoui Formik exportiert alle Komponenten als genannte Exporte. Sie können die erforderlichen Komponenten auf folgende Weise individuell importieren:
import { Input } from "@bigbinary/neetoui/formik" ;Verfügbare Komponenten in Neetoui Formik:
Sie können den Formikordner verweisen, um nach den neuesten Formik -Komponenten zu suchen.
Um die Neetoui -Formikkomponenten zu verwenden, müssen Sie Ihr Formular mit der Form einwickeln.
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 > ; Falls Sie children nicht als Funktion übergeben möchten, können Sie die folgende Syntax verwenden:
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 > ; Die Form akzeptiert die folgenden Requisiten:
formikProps : Formik Props -Objekt. Sie können initialValues , validationSchema , onSubmit usw. als Requisiten an die Form übergeben.children : Sie können eine Funktion als children an die Form übergeben. Die Funktion empfängt das Formik -Props -Objekt als Argument. Oder Sie können die children direkt innerhalb der Form übergeben.className : Sie können diese Requisite verwenden, um dem Formular eine benutzerdefinierte Klasse bereitzustellen.formProps : Formen Sie Requisitenobjekte. Sie können className , style usw. als Requisiten an die Form übergeben.scrollToErrorField : Um festzulegen, ob das Feld "Scrollen to Irrtum bei der Klicken Sie auf die Schaltfläche Senden" aktiviert sind oder nicht. Der Standardwert ist falsch. Installieren Sie alle Abhängigkeiten, indem Sie den folgenden Befehl ausführen.
yarn
Sie können neue Komponenten in src/components erstellen und aus src/index.js exportieren.
Das Ausführen des Befehls yarn storybook startet eine Storybook -App. Verwenden Sie diese Anwendung, um Änderungen zu testen und zu sehen, wie sich Ihre Komponente im Storybook für Neetoui verhält
yarn test .Tests scheitern, wenn einige Warnungen oder Fehler in der Konsole vorhanden sind.
yarn bundle .yarn build wird. Beachten Sie, dass nichts im stories mit Neetoui gebündelt wird.
Das @bigbinary/neetoui -Paket wird an NPM veröffentlicht, wenn wir einen PR mit patch , minor oder major Label in die main verschmelzen. Das patch -Etikett wird für Fehlerbehebungen verwendet, minor -Label wird für neue Funktionen verwendet und für die Bruchänderung wird ein major Label verwendet. Sie können den Workflow Create and publish releases in GitHub -Aktionen auschecken und veröffentlichen, um ein Live -Update zu erhalten.
Falls Sie das Etikett hinzufügen, können Sie das Paket manuell veröffentlichen. Zuerst müssen Sie eine PR erstellen, um die Versionsnummer in der package.json -Datei zu aktualisieren und in die main zusammenzuführen. Nach dem Zusammenführen der PR müssen Sie eine neue Github -Veröffentlichung aus dem Hauptzweig erstellen. Immer wenn eine neue Version mit einer neuen Versionsnummer erstellt wird, veröffentlichen die GitHub -Aktionen das erstellte Paket automatisch auf NPM. Sie können die Publish to npm -Workflow in GitHub -Aktionen überprüfen, um ein Live -Update zu erhalten.
Bitte beachten Sie, dass Sie vor der Veröffentlichung des Pakets die Funktionalität in einigen der NEETO-Web-Apps lokal mit yalc Paketmanager überprüfen müssen. Die Verwendung von Yalc wird in diesem Video erklärt: https://youtu.be/f4zzfnrntq8
Lesen Sie die Dokumente hier
https://neeto-ui.neeto.com
