neeto ui

Neetoui est la bibliothèque qui anime l'expérience dans tous les produits Neeto construits à Bigbinary.

Installation

 yarn add @bigbinary/neetoui

Cela installerait le package neetoui dans votre application. Démarrer 3.0.x , la feuille de style Neetoui a été séparée du bundle. Pour faire fonctionner les styles, veuillez importer la feuille de style Neetoui sur votre point d'entrée scss principal.

 @import " @bigbinary/neetoui " ;

Dépendances

Neetoui a quelques dépendances par les pairs qui sont nécessaires pour utiliser correctement Neetoui. Assurez-vous d'installer toutes les pairsdépendances mentionnées dans le package.json

react-toastify

Neetoui dépend de react-toastify pour les toasters, de sorte que les styles de grille-pain doivent être importés à votre point d'entrée scss principal.

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

Assurez-vous également d'inclure <ToastContainer /> dans votre application.

 import React from "react" ;

import { ToastContainer } from "react-toastify" ;

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

formik

Pour faciliter la gestion des formulaires avec Neetoui, nous fournissons une liaison Formik avec des composants Neetoui. Pour connaître Formik, reflétez la documentation officielle.

Usage

Neetoui exporte tout son composant tel que nommé exportations. Vous pouvez importer individuellement les composants nécessaires de la manière suivante:

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

Si vous avez besoin d'accéder à un objet qui contient des références à tous les composants, vous pouvez faire une importation générique. De cette façon, vous pouvez rendre des composants dynamiques de 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 exporte tous ses composants comme des exportations nommées. Vous pouvez importer individuellement les composants nécessaires de la manière suivante:

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

Composants disponibles dans Neetoui Formik:

• Saisir
• Radio
• Bouton
• Formulaire
• Verrouillage d'action
• Sélectionner
• Changer
• Textarea
• Cocher
• Blocknavigation
• Éventure en arbres
• Curseur

Vous pouvez référer le dossier FormIK pour vérifier les derniers composants Formik.

Afin d'utiliser les composants Neetoui Formik, vous devez envelopper votre formulaire avec le composant 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 > ;

Dans le cas, vous souhaitez ne pas passer children en fonction, vous pouvez utiliser la syntaxe suivante:

 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 > ;

Le composant Form accepte les accessoires suivants:

• formikProps : objet FormIK Props. Vous pouvez transmettre initialValues , validationSchema , onSubmit etc. comme accessoires au composant Form .
• children : Vous pouvez passer une fonction en tant children au composant Form . La fonction recevra l'objet FormIK Props comme argument. Ou vous pouvez transmettre directement les children à l'intérieur du composant Form .
• className : vous pouvez utiliser cet accessoire pour fournir une classe personnalisée au formulaire.
• formProps : formulaire Form Object. Vous pouvez passer className , style , etc. comme accessoires au composant Form .
• scrollToErrorField : Pour spécifier si le champ d'erreur de défilement en cliquant sur le bouton Soumettre est activé ou non. La valeur par défaut est fausse.

---

Développement

Installez toutes les dépendances en exécutant la commande suivante.

 yarn

Vous pouvez créer de nouveaux composants dans src/components et les exporter à partir de src/index.js .

L'exécution de la commande yarn storybook lance une application de livre de contes. Utilisez cette application pour tester les modifications et voir comment votre composant se comporte dans le livre de contes pour Neetoui

• Pour voir si les tests associés à vos composants passent yarn test de réalisation.

  Les tests échoueront s'il y a des avertissements ou des erreurs dans la console.

• Pour voir si Neetoui est construit et regroupé après les modifications exécutées yarn bundle .
• Pour voir si le livre de contes est construit Run yarn build .

Notez que rien dans le dossier stories ne sera regroupé de neetoui .

Construire et libérer.

Le package @bigbinary/neetoui est publié au NPM lorsque nous fusions un RP avec patch , un étiquette minor ou major dans la branche main . L'étiquette patch est utilisée pour les corrections de bogues, l'étiquette minor est utilisée pour les nouvelles fonctionnalités et une étiquette major est utilisée pour briser les modifications. Vous pouvez consulter la Create and publish releases de workflow dans GitHub Actions pour obtenir une mise à jour en direct.

Dans le cas où si vous manquiez pour ajouter l'étiquette, vous pouvez publier manuellement le package. Pour cela, vous devez d'abord créer un PR pour mettre à jour le numéro de version dans le fichier package.json et le fusionner dans la branche main . Après avoir fusionné le PR, vous devez créer une nouvelle version GitHub à partir de la branche principale. Chaque fois qu'une nouvelle version est créée avec un nouveau numéro de version, les actions GitHub publieront automatiquement le package construit sur NPM. Vous pouvez vérifier la Publish to npm Workflow dans GitHub Actions pour obtenir une mise à jour en direct.

Veuillez noter qu'avant de publier le package, vous devez vérifier les fonctionnalités dans certaines des applications Web Neeto localement à l'aide de yalc Package Manager. L'utilisation de YALC est expliquée dans cette vidéo: https://youtu.be/f4zzfnrntq8

Documentation

Lisez les documents ici

https://neeto-ui.neeto.com

Autres bibliothèques

• Neetoicons: Neetoicons est la bibliothèque officielle des icônes de Bigbinary.
• NeetoEditor: NeetoEditor est un éditeur de texte riche basé sur la prose-mirror utilisé chez Bigbinary.