react forms
v4.0.0
データ駆動型フォームは、Reactの最終フォームに基づいた多くの提供された機能を備えたフォームのレンダリングと管理に使用されるReactライブラリです。
dataデータ駆動型フォームを使用する理由❓
？特徴 ？
詳細については、ドキュメントをご覧ください。
目次
$ npm install @data-driven-forms/react-form-renderer -S $ yarn add @data-driven-forms/react-form-renderer $ npm install @data-driven-forms/mui-component-mapper -S $ yarn add @data-driven-forms/mui-component-mapper$ npm install @data-driven-forms/pf4-component-mapper -S $ yarn add @data-driven-forms/pf4-component-mapper$ npm install @data-driven-forms/blueprint-component-mapper -S $ yarn add @data-driven-forms/blueprint-component-mapper$ npm install @data-driven-forms/suir-component-mapper -S $ yarn add @data-driven-forms/suir-component-mapper$ npm install @data-driven-forms/ant-component-mapper -S $ yarn add @data-driven-forms/ant-component-mapper$ npm install @data-driven-forms/carbon-component-mapper -S $ yarn add @data-driven-forms/carbon-component-mapperマッパーのコンポーネントライブラリは、外部依存関係です。それらとそれらのスタイルをバンドルにインストールしてください。
データ駆動型フォームのマッパーサポートには、次のコンポーネントが含まれています。
他のコンポーネントは、フォームレンダラーを使用してマッパーとレンダラーに追加できます。既存のコンポーネントもオーバーライデンすることができます。
コンポーネント内のデータ駆動型フォームには、コンポーネントマッパーとフォームテンプレートを提供するレンダラーとコンポーネントマッパーが必要です。
import React from 'react' ;
import { FormRenderer , componentTypes } from '@data-driven-forms/react-form-renderer' ;
import { componentMapper , FormTemplate } from '@data-driven-forms/pf4-component-mapper' ;
const schema = {
fields : [ {
component : componentTypes . TEXT_FIELD ,
name : 'name' ,
label : 'Your name'
} ]
}
const Form = ( ) => (
< FormRenderer
schema = { schema }
componentMapper = { componentMapper }
FormTemplate = { FormTemplate }
onSubmit = { console . log }
/>
) カスタムマッパーも使用できます。
import React from 'react' ;
import { FormRenderer , componentTypes , useFieldApi } from '@data-driven-forms/react-form-renderer' ;
const TextField = props => {
const { label , input , meta , ... rest } = useFieldApi ( props )
return (
< div >
< label htmlForm = { input . name } > { label } </ label >
< input { ... input } { ... rest } id = { input . name } />
{ meta . error && < p > { meta . error } </ p > }
</ div >
)
}
const componentMapper = {
[ componentTypes . TEXT_FIELD ] : TextField ,
'custom-type' : TextField
}
const schema = {
fields : [ {
component : componentTypes . TEXT_FIELD ,
name : 'name' ,
label : 'Your name'
type : 'search' ,
} ]
}詳細については、このページを確認してください。
マッパーはyarn generate-templateコマンドを使用して生成することもできます。
ドキュメントサイトを使用してください。問題が発生した場合は、GitHubでドキュメントファイルに直接アクセスできます。
データ駆動型フォームは、レルナと糸のワークスペースを使用するモノレポであるため、すべてのコマンドも使用できます。
○nodejs 16
○unix like os（macos、linux）
現時点では、Windowsでの開発をサポートしていません。ただし、これを変更するためにPRを歓迎します。
yarn installyarn buildすべてのパッケージはデフォルトでリンクされているため、パッケージでyarn build実行すると、他のすべてのパッケージがそのパッケージの最新バージョンに更新されます。他のパッケージで使用する前に、パッケージを最初に構築する必要があります。
各パッケージには小さな遊び場package/demoあり、変更をテストできます。
cd packages/pf3-component-mapper
yarn startドキュメントは、NextJSフレームワークに基づいて、サーバー側のレンダリングReactアプリケーションです。
cd packages/react-renderer-demo
yarn devyarn lerna clean
rm -rf node_modulesビルドファイルをクリーンにするには、次のコマンドを使用します。（このスクリプトは、各ビルドの前に自動的に実行されます。）
yarn clean-buildテストは、コアフォルダーまたは特定のパッケージから実行できます。
yarn test
yarn test --watchAll packages/pf4-component-mapper
# or
cd packages/pf4-component-mapper
yarn test PRを開く場合は、フォローチェックリストをフォローしてください。 PRを完成させるのに役立ちます。
ルートフォルダーでyarn build実行して、すべてのパッケージを構築します。このコマンドは、変更されたパッケージでのみ実行できます。すべてのパッケージはデフォルトでリンクされているため、最初にそれらを構築する必要があります。
ルートフォルダーでyarn lintを実行して、コードが正しくフォーマットされているかどうかを確認します。 yarn lint --fix使用して、問題を自動的に修正できます。
すべての新しいコードを適切にテストする必要があります。ルートフォルダーでyarn test実行して、すべてのファイルをテストします。 CodeCoverageレポートをチェックして、コードの覆われていない行を表示します。 JestおよびReact Testing Libraryを使用しています。
新しい機能を紹介する場合は、この変更をドキュメントに文書化する必要があります。ドキュメントはreact-renderer-demoパッケージにあり、NextJSに基づくWebアプリケーションです。ドキュメントのテストは書きません。
yarn devドキュメントのローカルバージョンを開始します。
yarn build展開用のファイルを準備します。
yarn serveローカルエミュレーターで実行されているWebアプリケーションをエミュレートします。
セマンティックリリースを使用して新しいバージョンを自動的にリリースするため、正しいコミットメッセージが重要です。これらのメッセージはリリースノートでも使用されているため、他のユーザーが変更されているものを確認できます。
私の変更は新しい機能を紹介します
コミットメッセージをfeatでプレフィックスし、変更されているパッケージを指定します。例： feat(pf4): a new dual list integration 。複数のパッケージを変更すると、 feat(common): ...またはfeat(all): ...使用できます。
私の変更により、バグまたは技術的な負債が修正されます
Commitメッセージをfixしてプレフィックスします。それ以外の場合、同じルールが適用されます。例： fix(pf4): fixed missed proptype in select 。
私の変更は、リリースされたパッケージを変更しません
変更がリリースされたパッケージのいずれかを変更しない場合は、変更を簡単に説明できます。例： Fix button on documenation example page 。これは、ドキュメントリポジトリの変更にも適用されます。
私の変化は壊れた変化をもたらします
私たちは、変化を破ることを避けようとしています。問題を開いて、問題について話し合い、代替オプションを考え出そうとします。
コミュニティの貢献を歓迎します。バグを報告したり、問題やプルレクエストを作成したりすることを恐れないでください！ ？
Apacheライセンス2.0
