neeto ui

Neetoui é a biblioteca que impulsiona a experiência em todos os produtos da Neeto construídos na BigBinary.

Instalação

 yarn add @bigbinary/neetoui

Isso instalaria o pacote neetoui dentro do seu aplicativo. Iniciando 3.0.x , a folha de estilo Neetoui foi separada do pacote. Para que os estilos funcionem, importe a folha de estilo Neetoui para o seu principal ponto de entrada scss .

 @import " @bigbinary/neetoui " ;

Dependências

O Neetoui possui poucas dependências de pares necessárias para usar o Neetoui corretamente. Certifique -se de instalar todas as dependências do PeerDendências mencionadas no pacote.json

react-toastify

O NEETOUI depende do react-toastify para as torradeiras, para que os estilos para a torradeira devem ser importados para o seu principal ponto de entrada scss .

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

Também inclua <ToastContainer /> em seu aplicativo.

 import React from "react" ;

import { ToastContainer } from "react-toastify" ;

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

formik

Para facilitar o manuseio de formulários com o Neetoui, fornecemos a ligação do Formik com os componentes Neetoui. Para saber sobre Formik, ref, a documentação oficial.

Uso

Neetoui exporta todo o seu componente como exportações nomeadas. Você pode importar individualmente os componentes necessários da seguinte maneira:

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

Se você precisar de acesso a um objeto que contém referências a todos os componentes, você pode fazer uma importação curinga. Dessa forma, você pode renderizar componentes dinâmicos da 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

O Neetoui Formik exporta todo o seu componente como exportações nomeadas. Você pode importar individualmente os componentes necessários da seguinte maneira:

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

Componentes disponíveis em Neetoui Formik:

• Entrada
• Rádio
• Botão
• Forma
• ActionBlock
• Selecione
• Trocar
• Textarea
• Caixa de seleção
• BlockNavigation
• TreesElect
• Slider

Você pode consultar a pasta Formik para verificar os componentes Formik mais recentes.

Para usar os componentes do Formik Neetoui, você precisa embrulhar seu formulário com o 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 > ;

Caso você deseje não passar children como uma função, você pode usar a seguinte sintaxe:

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

O componente Form aceita os seguintes adereços:

• formikProps : Formik Props Object. Você pode passar initialValues , validationSchema , onSubmit etc. como adereços para o componente Form .
• children : Você pode passar uma função quando children para o componente Form . A função receberá o objeto Formik Props como um argumento. Ou você pode passar diretamente nas children dentro do componente Form .
• className : você pode usar este suporte para fornecer uma classe personalizada para o formulário.
• formProps : fort props objeto. Você pode passar className , style etc. como adereços para o componente Form .
• scrollToErrorField : Para especificar se o campo Roll para o erro ao clicar no botão Enviar está ativado ou não. O valor padrão é falso.

---

Desenvolvimento

Instale todas as dependências executando o seguinte comando.

 yarn

Você pode criar novos componentes no src/components e exportá -los do src/index.js .

Executar o comando do yarn storybook inicia um aplicativo de livro de histórias. Use este aplicativo para testar as alterações e ver como seu componente se comporta no livro de histórias para neetoui

• Para ver se os testes associados ao seus componentes passam no yarn test .

  Os testes falharão se houver alguns avisos ou erros no console.

• Para ver se o Neetoui é construído e incluído após as mudanças, execute yarn bundle .
• Para ver se o livro de histórias é construído yarn build .

Observe que nada na pasta stories será incluído com Neetoui .

Construção e liberação.

O pacote @bigbinary/neetoui é publicado no NPM quando mesclamos um PR com patch , minor ou major rótulo para a filial main . A etiqueta patch é usada para correções de bugs, o rótulo minor é usado para novos recursos e o rótulo major é usado para quebrar alterações. Você pode verificar o fluxo de trabalho Create and publish releases em ações do GitHub para obter uma atualização ao vivo.

Caso você tenha perdido adicionar o rótulo, poderá publicar manualmente o pacote. Por isso, você precisa criar um PR para atualizar o número da versão no arquivo package.json e mesclá -lo para a filial main . Depois de mesclar o PR, você precisa criar uma nova liberação do GitHub a partir da filial principal. Sempre que uma nova versão é criada com um novo número de versão, as ações do GitHub publicam automaticamente o pacote construído no NPM. Você pode conferir o fluxo de trabalho Publish to npm em ações do GitHub para obter uma atualização ao vivo.

Observe que, antes de publicar o pacote, você precisa verificar a funcionalidade em alguns dos aplicativos da Web do NEETO localmente usando yalc Package Manager. O uso do YALC é explicado neste vídeo: https://youtu.be/f4zzfnrntq8

Documentação

Leia os documentos aqui

https://neeto-ui.neeto.com

Outras bibliotecas

• NEETOICONS: Neetoicons é a biblioteca oficial de ícones da BigBinary.
• NEETEEDITOR: O NEETEEDITOR é um editor de texto rico baseado em prosa-espelho usado na BigBinary.