neeto ui 다운로드 -Neeto neeto ui 소스 코드 다운로드

neeto ui

타사 구성 요소

v3.4.0 ✨

다운로드

Neetoui는 Bigbinary에 건축 된 모든 Neeto 제품에 대한 경험을 주도하는 도서관입니다.

설치

 yarn add @bigbinary/neetoui

응용 프로그램 안에 neetoui 패키지를 설치합니다. 3.0.x 시작한 Neetoui 스타일 시트가 번들에서 분리되었습니다. 스타일을 작동 시키려면 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로 양식 처리를보다 쉽게 처리하기 위해 Neetoui 구성 요소와 Formik 결합을 제공합니다. 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 >
  ) ;
}

Formik

Neetoui Formik은 모든 구성 요소를 지명 된 수출로 수출합니다. 필요한 구성 요소를 개별적으로 가져올 수 있습니다.

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

Neetoui formik에서 사용 가능한 구성 요소 :

입력
라디오
단추
형태
액션 블록
선택하다
스위치
Textarea
확인란
Blocknavigation
treeselect
슬라이더

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 props 객체. Form Component의 소품으로 initialValues , validationSchema , onSubmit 등을 전달할 수 있습니다.
children : children 로서 기능을 Form 구성 요소로 전달할 수 있습니다. 함수는 Formik Props 객체를 인수로 수신합니다. 또는 Form 구성 요소 내부의 children 직접 전달할 수 있습니다.
className :이 소품을 사용하여 양식에 사용자 정의 클래스를 제공 할 수 있습니다.
formProps : props 객체를 형성합니다. className , style 등을 Form 구성 요소에 소품으로 전달할 수 있습니다.
scrollToErrorField : 제출 버튼을 클릭 할 때 스크롤에서 오류 필드가 활성화되어 있는지 여부를 지정합니다. 기본값은 False입니다.

개발

다음 명령을 실행하여 모든 종속성을 설치하십시오.

 yarn

src/components 에 새 구성 요소를 생성하여 src/index.js 에서 내보낼 수 있습니다.

yarn storybook 명령을 실행하면 스토리 북 앱이 시작됩니다. 이 응용 프로그램을 사용하여 변경 사항을 테스트하고 Neetoui 의 스토리 북에서 구성 요소가 어떻게 작동하는지 확인하십시오.

구성 요소와 관련된 테스트가 실행 yarn test 통과하는지 확인하십시오.
콘솔에 경고 나 오류가 있으면 테스트가 실패합니다.
변경 후 실행 후 Neetoui가 건축되고 yarn bundle 로 만들어 졌는지 확인합니다.
스토리 북이 빌드 된 yarn build 졌는지 확인합니다.

stories 폴더의 어떤 것도 Neetoui 와 함께 번들로 제공되지 않습니다.

건축 및 방출.

@bigbinary/neetoui 패키지는 patch , minor 또는 major 레이블과 main 브랜치에 PR을 병합 할 때 NPM에 게시됩니다. patch 레이블은 버그 수정에 사용되며, minor 레이블은 새로운 기능에 사용되며 major 레이블은 변경 사항을 깨기는 데 사용됩니다. GitHub 액션에서 Create and publish releases Workflow를 확인하여 라이브 업데이트를 얻을 수 있습니다.

레이블을 추가하지 않으면 패키지를 수동으로 게시 할 수 있습니다. 먼저 package.json 파일에서 버전 번호를 업데이트하려면 PR을 작성하고 main 브랜치로 병합해야합니다. PR을 병합 한 후 메인 브랜치에서 새로운 Github 릴리스를 만들어야합니다. 새 버전 번호로 새 릴리스가 생성 될 때마다 GitHub 액션은 내장 패키지를 NPM에 자동으로 게시합니다. GitHub 작업에서 Publish to npm 라이브 업데이트를 얻을 수 있습니다.

패키지를 게시하기 전에 yalc 패키지 관리자를 사용하여 로컬에서 일부 NEETO 웹 애플의 기능을 확인해야합니다. YALC의 사용은이 비디오에 설명되어 있습니다 : https://youtu.be/f4zzfnrntq8