react forms
v4.0.0
데이터 중심 양식은 RECT 최종 양식을 기반으로 제공된 많은 기능을 갖춘 양식을 렌더링하고 관리하는 데 사용되는 REAC LIBRAL입니다.
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에서 직접 문서 파일에 액세스 할 수 있습니다.
데이터 구동 양식은 Lerna 및 Yarn 작업 공간을 사용하는 Monorepo이므로 모든 명령을 사용할 수 있습니다.
○ nodejs 16
○ OS (MacOS, Linux)와 같은 Unix
우리는이 순간 Windows에서 개발을 지원하지 않습니다. 그러나 우리는이를 변경하기 위해 모든 PR을 환영 할 것입니다.
yarn installyarn build 모든 패키지는 기본적으로 링크되므로 패키지로 yarn build 실행하면 다른 모든 패키지가 해당 패키지의 최신 버전으로 업데이트됩니다. 패키지는 다른 패키지에서 사용하기 전에 먼저 구축해야합니다.
각 패키지에는 작은 놀이터 package/demo 있어 변경 사항을 테스트 할 수 있습니다.
cd packages/pf3-component-mapper
yarn start문서는 NextJS 프레임 워크를 기반으로 서버 측 렌더링 된 RECT 응용 프로그램입니다.
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을 완성하는 데 도움이됩니다.
Root 폴더에서 yarn build 실행하여 모든 패키지를 작성하십시오. 변경된 패키지에서만이 명령을 실행할 수 있습니다. 모든 패키지는 기본적으로 연결되어 있으므로 먼저 구축해야합니다.
루트 폴더에서 yarn lint 실행하여 코드가 올바르게 형식화되어 있는지 확인하십시오. yarn lint --fix 사용하여 문제를 자동으로 수정할 수 있습니다.
모든 새 코드를 올바르게 테스트해야합니다. 루트 폴더에서 yarn test 실행하여 모든 파일을 테스트하십시오. CodeCoverage 보고서를 확인하여 발견되지 않은 코드 줄을 확인하십시오. 우리는 Jest 및 React Testing Library를 사용하고 있습니다.
새로운 기능을 소개하면 문서 에이 변경 사항을 문서화해야합니다. 이 문서는 react-renderer-demo 패키지에 있으며 NextJS를 기반으로하는 웹 응용 프로그램입니다. 우리는 문서에 대한 테스트를 작성하지 않습니다.
yarn dev 로컬 버전의 문서를 시작합니다.
yarn build 배포를위한 파일을 준비합니다.
yarn serve .
시맨틱 릴리스를 사용하여 새 버전을 자동으로 정리하기 때문에 올바른 커밋 메시지가 중요합니다. 이 메시지는 릴리스 노트에도 사용되므로 다른 사용자는 변경 사항을 확인할 수 있습니다.
내 변경은 새로운 기능을 소개합니다
커밋 메시지를 feat 로 접두사하고 변경중인 패키지를 지정하십시오. 예 : feat(pf4): a new dual list integration . 여러 패키지를 변경하면 feat(common): ... 또는 feat(all): ... 사용할 수 있습니다.
내 변경은 버그 또는 기술 부채를 수정합니다
fix 으로 커밋 메시지를 접두사하십시오. 그렇지 않으면 동일한 규칙이 적용됩니다. 예 : fix(pf4): fixed missed proptype in select .
내 변경은 릴리스 패키지를 변경하지 않습니다
변경 사항이 Fix button on documenation example page 된 패키지 중 하나를 변경하지 않으면 변경 사항을 간단하게 설명 할 수 있습니다. 이것은 문서 리포의 변경에도 적용됩니다.
나의 변화는 깨진 변화를 소개합니다
우리는 변화가 깨지는 것을 피하려고 노력하고 있습니다. 문제를 열고 문제를 논의하십시오. 대체 옵션을 제시하려고 노력할 것입니다.
우리는 모든 공동체 기여를 환영합니다. 버그를보고하거나 문제와 풀 수감을 만드는 것을 두려워하지 마십시오! ?
아파치 라이센스 2.0
