neeto ui скачать - neeto ui -код скачать

neeto ui

Сторонние компоненты

v3.4.0 ✨

Скачать

Neetoui - это библиотека, которая управляет опытом во всех продуктах Neeto, построенных в Bigbinary.

Установка

 yarn add @bigbinary/neetoui

Это установило бы пакет neetoui в вашем приложении. Начиная с 3.0.x , neetoui Stylesshipe была отделена от пачка. Чтобы заставить стили работать, импортируйте таблицу стилей Neetoui в основную точку входа scss .

 @import " @bigbinary/neetoui " ;

Зависимости

Neetoui имеет мало зависимостей со сверстниками, которые необходимы для правильного использования Neetoui. Убедитесь, что вы установили все выплаты, упомянутые в Package.json

`react-toastify`

neetoui зависит от react-toastify для тостеров, поэтому стили тостера должны быть импортированы в вашу основную точку входа scss .

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

Также обязательно включите <ToastContainer /> в ваше приложение.

 import React from "react" ;

import { ToastContainer } from "react-toastify" ;

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

`formik`

Чтобы облегчить обработку формы с Neetoui, мы обеспечиваем Formik Swinting с компонентами neetoui. Чтобы узнать о Formik, ссылаться на официальную документацию.

Использование

Neetoui экспортирует все его компонент как названный экспорт. Вы можете индивидуально импортировать необходимые компоненты следующим образом:

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

Если вам нужен доступ к объекту, который содержит ссылки на все компоненты, вы можете сделать импорт подстановочного знака. Таким образом, вы можете отображать динамические компоненты от 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 >
  ) ;
}

Форма

Neetoui Formik экспортирует все свои компоненты в виде названного экспорта. Вы можете индивидуально импортировать необходимые компоненты следующим образом:

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

Доступные компоненты в Neetoui Formik:

Вход
Радио
Кнопка
Форма
Actionblock
Выбирать
Выключатель
Textarea
Флажок
Блокнавигация
Деревья
Слайдер

Вы можете направить папку Formik, чтобы проверить наличие последних компонентов Formik.

Чтобы использовать компоненты Neetoui Formik, вам необходимо обернуть свою форму компонентом 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 > ;

В случае, если вы хотите не передавать children в качестве функции, вы можете использовать следующий синтаксис:

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

Компонент Form принимает следующий реквизит:

formikProps : Formik Reps объект. Вы можете перенести initialValues , validationSchema , в качестве onSubmit в качестве реквизита в компонент Form .
children : Вы можете передать функцию в качестве children в компонент Form . Функция получит объект Formik Reps в качестве аргумента. Или вы можете напрямую передать children внутри компонента Form .
className : Вы можете использовать эту опору для предоставления пользовательского класса для формы.
formProps : Form Props объект. Вы можете передать className , style и т. Д. В качестве реквизита в компонент Form .
scrollToErrorField : Чтобы указать, включено ли в поле «Спровать к ошибке» кнопку «Нажать кнопку« Отправить »или нет. Значение по умолчанию неверно.

Разработка

Установите все зависимости, выполнив следующую команду.

 yarn

Вы можете создавать новые компоненты в src/components и экспортировать их из src/index.js .

Запуск команды yarn storybook запускает приложение сборника рассказов. Используйте это приложение, чтобы проверить изменения и посмотреть, как ваш компонент ведет себя в сборнике рассказов для neetoui

Чтобы увидеть, связаны ли тесты с вашим компонентом пройти yarn test .
Тесты потерпят неудачу, если в консоли будут некоторые предупреждения или ошибки.
Чтобы увидеть, не будет ли Neetoui построить и объединить после изменений, запустите yarn bundle .
Чтобы увидеть, построится ли сборник рассказов, запустите yarn build .

Обратите внимание, что ничто в папке stories не будет связано с Neetoui .

Здание и выпуск.

Пакет @bigbinary/neetoui публикуется в NPM, когда мы объединяем пиар с patch , minor или major ярлыком с main ветвью. Метка patch используется для исправлений ошибок, minor Label используется для новых функций, а major метка используется для нарушения изменений. Вы можете проверить рабочий процесс Create and publish releases в действиях GitHub», чтобы получить живое обновление.

Если вы пропустили, чтобы добавить этикетку, вы можете вручную опубликовать пакет. Для этого вам нужно создать пиар, чтобы обновить номер версии в файле package.json и объединить его в main филиал. После объединения PR вам необходимо создать новый релиз GitHub из Main Branch. Всякий раз, когда новый релиз создается с новым номером версии, действия GitHub автоматически публикуют встроенный пакет в NPM. Вы можете проверить рабочий процесс Publish to npm в GitHub Actions, чтобы получить живое обновление.

Обратите внимание, что перед публикацией пакета вам необходимо проверить функциональность в некоторых веб-приложениях Neeto, используя менеджер пакетов yalc . Использование YALC объяснено в этом видео: https://youtu.be/f4zzfnrntq8

Документация

Прочитайте документы здесь

https://neeto-ui.neeto.com

Другие библиотеки

Neetoicons: Neetoicons - это официальная библиотека иконок от Bigbinary.
Neetoeditor: Neetoeditor -это прозайновый редактор на основе прозаиса, используемый в Bigbinary.

Расширять

Дополнительная информация