neeto uiダウンロードneeto uiソースコードのダウンロード

neeto ui

サードパーティ製コンポーネント

v3.4.0 ✨

ダウンロード

Neetouiは、Bigbinaryで構築されたすべてのNeeto製品のエクスペリエンスを促進するライブラリです。

インストール

 yarn add @bigbinary/neetoui

これにより、アプリケーション内にneetouiパッケージがインストールされます。 3.0.xを開始するNeetoui StyleSheetは、バンドルから分離されています。スタイルを機能させるには、Neetoui StyleSheetをメインscssエントリポイントにインポートしてください。

 @import " @bigbinary/neetoui " ;

依存関係

Neetouiには、Neetouiを適切に使用するために必要なピア依存関係はほとんどありません。 package.jsonに記載されているすべてのピア依存関係を必ずインストールしてください

`react-toastify`

NeetouiはToastersのreact-toastifyに依存するため、Toasterのスタイルはメイン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で利用可能なコンポーネント：

入力
無線
ボタン
形状
ActionBlock
選択します
スイッチ
Textarea
チェックボックス
ブロックナビゲーション
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 Object。 initialValues 、 validationSchema 、 onSubmitなどをFormコンポーネントの小道具として渡すことができます。
children ： childrenとしての関数をFormコンポーネントに渡すことができます。関数は、引数としてFormik Propsオブジェクトを受信します。または、 Formコンポーネント内のchildrenを直接渡すことができます。
className ：この小道具を使用して、フォームにカスタムクラスを提供できます。
formProps ：Form 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パッケージは、PRをminor patchまたはmajorラベルとmainブランチにマージすると、NPMに公開されます。 patchラベルはバグ修正に使用され、 minorラベルは新機能に使用され、 majorラベルは変更に使用されます。 GitHubアクションでCreate and publish releasesワークフローをチェックアウトして、ライブアップデートを取得できます。

ラベルの追加を逃した場合は、パッケージを手動で公開できます。最初に、 package.jsonファイルのバージョン番号を更新し、 mainブランチにマージするためにPRを作成する必要があります。 PRをマージした後、メインブランチから新しいGitHubリリースを作成する必要があります。新しいバージョン番号を使用して新しいリリースが作成されるたびに、GitHubアクションは、構築されたパッケージをNPMに自動的に公開します。 GitHubアクションでPublish to npmチェックアウトして、ライブアップデートを取得できます。

パッケージを公開する前に、 yalcパッケージマネージャーを使用してローカルにNEETO Webアプリの一部の機能を確認する必要があることに注意してください。 YALCの使用については、このビデオで説明されています：https：//youtu.be/f4zzfnrntq8