neeto ui

Neetoui es la biblioteca que impulsa la experiencia en todos los productos de Neeto construidos en Bigbinary.

Instalación

 yarn add @bigbinary/neetoui

Esto instalaría el paquete neetoui dentro de su aplicación. A partir de 3.0.x , la hoja de estilo Neetoui se ha separado del paquete. Para que los estilos funcionen, importe la hoja de estilo Neetoui a su punto de entrada principal scss .

 @import " @bigbinary/neetoui " ;

Dependencias

Neetoui tiene pocas dependencias de pares que se requieren para usar Neetoui correctamente. Asegúrese de instalar todas las Peerdependencias mencionadas en el paquete.json

react-toastify

Neetoui depende de react-toastify para los tostadores, por lo que los estilos para la tostadora deben importarse a su punto de entrada scss principal.

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

También asegúrese de incluir <ToastContainer /> en su aplicación.

 import React from "react" ;

import { ToastContainer } from "react-toastify" ;

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

formik

Para facilitar el manejo de la forma con Neetoui, proporcionamos la unión de Formik con los componentes de Neetoui. Para saber sobre Formik, ref la documentación oficial.

Uso

Neetoui exporta todo su componente como exportaciones nombradas. Puede importar individualmente los componentes necesarios de la siguiente manera:

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

Si necesita acceso a un objeto que contenga referencias a todos los componentes, puede hacer una importación comodín. De esta manera, puede representar componentes dinámicos 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 exporta todos sus componentes como exportaciones nombradas. Puede importar individualmente los componentes necesarios de la siguiente manera:

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

Componentes disponibles en Neetoui Formik:

• Aporte
• Radio
• Botón
• Forma
• Bloque de Action
• Seleccionar
• Cambiar
• Textea
• Caja
• Bloqueo
• Selecto de árboles
• Control deslizante

Puede consultar la carpeta Formik para verificar los últimos componentes de Formik.

Para usar los componentes Neetoui Formik, debe envolver su formulario con el componente 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 > ;

En caso de que no desee pasar children en función, puede usar la siguiente sintaxis:

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

El componente Form acepta los siguientes accesorios:

• formikProps : Objeto de Props Formik. Puede pasar initialValues , validationSchema , onSubmit , etc. como accesorios para el componente Form .
• children : puede pasar una función como children al componente Form . La función recibirá el objeto Formik Props como argumento. O puede pasar directamente a los children dentro del componente Form .
• className : puede usar este accesorio para proporcionar una clase personalizada al formulario.
• formProps : Formo Props Object. Puede pasar className , style , etc. como accesorios para el componente Form .
• scrollToErrorField : para especificar si el desplazamiento al campo de error al hacer clic en el botón Enviar está habilitado o no. El valor predeterminado es falso.

---

Desarrollo

Instale todas las dependencias ejecutando el siguiente comando.

 yarn

Puede crear nuevos componentes en src/components y exportarlos desde src/index.js .

Ejecutar el comando yarn storybook comienza una aplicación de libro de cuentos. Use esta aplicación para probar los cambios y ver cómo se comporta su componente en el libro de cuentos para Neetoui

• Para ver si las pruebas asociadas con sus componentes pasan yarn test .

  Las pruebas fallarán si hay algunas advertencias o errores en la consola.

• Para ver si Neetoui se construye y se agrupa después de los cambios, ejecute yarn bundle .
• Para ver si el libro de cuentos se construye, ejecute yarn build .

Tenga en cuenta que nada en la carpeta stories se incluirá con Neetoui .

Construyendo y liberando.

El paquete @bigbinary/neetoui se publica a NPM cuando fusionamos un PR con patch , una etiqueta minor o major a la rama main . La etiqueta patch se usa para correcciones de errores, la etiqueta minor se usa para nuevas características y la etiqueta major se usa para romper los cambios. Puede consultar el flujo de trabajo Create and publish releases en las acciones de GitHub para obtener una actualización en vivo.

En caso de que se haya perdido para agregar la etiqueta, puede publicar manualmente el paquete. Para eso primero debe crear un PR para actualizar el número de versión en el archivo package.json y fusionarlo en la rama main . Después de fusionar el PR, debe crear un nuevo lanzamiento de GitHub desde la rama principal. Cada vez que se crea una nueva versión con un nuevo número de versión, las acciones de GitHub publicarán automáticamente el paquete creado a NPM. Puede consultar el flujo de trabajo Publish to npm en acciones de GitHub para obtener una actualización en vivo.

Tenga en cuenta que antes de publicar el paquete, debe verificar la funcionalidad en algunas de las aplicaciones web Neeto localmente utilizando el Administrador de paquetes yalc . El uso de YALC se explica en este video: https://youtu.be/f4zzfnrntq8

Documentación

Lea los documentos aquí

https://neeto-ui.neeto.com

Otras bibliotecas

• Neetoicons: Neetoicons es la biblioteca oficial de íconos de Bigbinary.
• NeetoEditor: Neetoeditor es un editor de texto rico basado en espuma en prosa utilizado en BigBinary.