{"_id":"@ausuliv/pf4-component-mapper","_rev":"2-47e1e226ab56aa14f0e0e74ee57c9a34","name":"@ausuliv/pf4-component-mapper","dist-tags":{"latest":"3.22.6"},"versions":{"3.22.4":{"name":"@ausuliv/pf4-component-mapper","version":"3.22.4","keywords":["react","forms","javascript"],"license":"Apache-2.0","_id":"@ausuliv/pf4-component-mapper@3.22.4","maintainers":[{"name":"ausuliv","email":"ausulliv@redhat.com"}],"homepage":"https://data-driven-forms.org/","bugs":{"url":"https://github.com/data-driven-forms/react-forms/issues"},"dist":{"shasum":"5c1baaa267e1fbe997ae2b9639ef3f356f058a00","tarball":"https://registry.npmjs.org/@ausuliv/pf4-component-mapper/-/pf4-component-mapper-3.22.4.tgz","fileCount":204,"integrity":"sha512-ogVTyq0wgjWWHadS4sTe65VsVPCX5M1ZVqaJgQG2uhqA3GGq4FXwKJ53gQotv8TNtR+tsPpLmA1y6cBA1nF6mQ==","signatures":[{"sig":"MEUCICYvkBeNxTdM5g0Lzr1PlVwYR4NHlaBc8bqB/wfIEEwBAiEA4v4bx5DUe9hIqmdx9j3N6KWp/YtW/hAShlN60q7J4dU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":371161},"main":"index.js","module":"esm/index.js","gitHead":"31d5e904d2d591ea0a49145b0698bfaec581c104","scripts":{"test":"yarn --cwd ../.. test packages/pf4-component-mapper","build":"yarn build:cjs && yarn build:esm && yarn build:typings && yarn build:packages && yarn build:css","start":"webpack-dev-server --config ./config/webpack.config.js --open --hot","release":"semantic-release","build:cjs":"BABEL_ENV=cjs babel src --out-dir ./ --ignore \"src/tests/*\"","build:css":"node ../../scripts/copy-css.js","build:esm":"BABEL_ENV=esm babel src --out-dir ./esm --ignore \"src/tests/*\"","build:typings":"node ../../scripts/generate-typings.js","build:packages":"node ../../scripts/generate-packages.js"},"typings":"index.d.ts","_npmUser":{"name":"ausuliv","email":"ausulliv@redhat.com"},"repository":{"url":"git+https://github.com/data-driven-forms/react-forms.git","type":"git","directory":"packages/pf4-component-mapper"},"_npmVersion":"8.19.3","description":"Patternfly 4 React component mapper for Data Driven Forms.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"lodash":"^4.17.21","downshift":"^5.4.3","prop-types":"^15.7.2","@data-driven-forms/common":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@patternfly/react-core":"6.0.0-alpha.61","@patternfly/react-icons":"6.0.0-alpha.23"},"peerDependencies":{"react":"^17.0.2 || ^18.0.0","react-dom":"^17.0.2 || ^18.0.0","@patternfly/react-core":"6.0.0-alpha.61","@patternfly/react-icons":"6.0.0-alpha.23","@data-driven-forms/react-form-renderer":"*"},"_npmOperationalInternal":{"tmp":"tmp/pf4-component-mapper_3.22.4_1718392295923_0.8024963015868773","host":"s3://npm-registry-packages"}},"3.22.5":{"name":"@ausuliv/pf4-component-mapper","version":"3.22.5","keywords":["react","forms","javascript"],"license":"Apache-2.0","_id":"@ausuliv/pf4-component-mapper@3.22.5","maintainers":[{"name":"ausuliv","email":"ausulliv@redhat.com"}],"homepage":"https://data-driven-forms.org/","bugs":{"url":"https://github.com/data-driven-forms/react-forms/issues"},"dist":{"shasum":"0291efdb452e393ad0c0a8758c702fa046dcdca8","tarball":"https://registry.npmjs.org/@ausuliv/pf4-component-mapper/-/pf4-component-mapper-3.22.5.tgz","fileCount":205,"integrity":"sha512-RGMAgOgQ5PxygVRL66ck3TNOCGa/afaVkXSdEyooozwwxk9NRtQJrAEW4H+zNH1iT0TCtW+Kk/lVlwO5e6cmVw==","signatures":[{"sig":"MEQCIGs3m2DrVm8H46E9/cEuIX6GRqBOYETGDWJ3aNQbFg2LAiBAZKDjvS/8A6T8RwZGaVJIhoVI0pljcE8GP5P6DjrgZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436497},"main":"index.js","module":"esm/index.js","gitHead":"a340e924baf6194f2cca4ec26b9880c27787c8c0","scripts":{"test":"yarn --cwd ../.. test packages/pf4-component-mapper","build":"yarn build:cjs && yarn build:esm && yarn build:typings && yarn build:packages && yarn build:css","start":"webpack-dev-server --config ./config/webpack.config.js --open --hot","release":"semantic-release","build:cjs":"BABEL_ENV=cjs babel src --out-dir ./ --ignore \"src/tests/*\"","build:css":"node ../../scripts/copy-css.js","build:esm":"BABEL_ENV=esm babel src --out-dir ./esm --ignore \"src/tests/*\"","build:typings":"node ../../scripts/generate-typings.js","build:packages":"node ../../scripts/generate-packages.js"},"typings":"index.d.ts","_npmUser":{"name":"ausuliv","email":"ausulliv@redhat.com"},"repository":{"url":"git+https://github.com/data-driven-forms/react-forms.git","type":"git","directory":"packages/pf4-component-mapper"},"_npmVersion":"8.19.3","description":"Patternfly 4 React component mapper for Data Driven Forms.","directories":{},"_nodeVersion":"16.19.1","dependencies":{"lodash":"^4.17.21","downshift":"^5.4.3","prop-types":"^15.7.2","@data-driven-forms/common":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@patternfly/react-core":"6.0.0-alpha.100","@patternfly/react-icons":"6.0.0-alpha.35"},"peerDependencies":{"react":"^17.0.2 || ^18.0.0","react-dom":"^17.0.2 || ^18.0.0","@patternfly/react-core":"6.0.0-alpha.100","@patternfly/react-icons":"6.0.0-alpha.35","@data-driven-forms/react-form-renderer":"*"},"_npmOperationalInternal":{"tmp":"tmp/pf4-component-mapper_3.22.5_1724183399891_0.005489226969064287","host":"s3://npm-registry-packages"}},"3.22.6":{"name":"@ausuliv/pf4-component-mapper","version":"3.22.6","description":"Patternfly 4 React component mapper for Data Driven Forms.","main":"index.js","module":"esm/index.js","typings":"index.d.ts","license":"Apache-2.0","publishConfig":{"access":"public"},"scripts":{"start":"webpack-dev-server --config ./config/webpack.config.js --open --hot","build":"yarn build:cjs && yarn build:esm && yarn build:typings && yarn build:packages && yarn build:css","build:cjs":"BABEL_ENV=cjs babel src --out-dir ./ --ignore \"src/tests/*\"","build:esm":"BABEL_ENV=esm babel src --out-dir ./esm --ignore \"src/tests/*\"","build:typings":"node ../../scripts/generate-typings.js","build:packages":"node ../../scripts/generate-packages.js","build:css":"node ../../scripts/copy-css.js","release":"semantic-release","test":"yarn --cwd ../.. test packages/pf4-component-mapper"},"homepage":"https://data-driven-forms.org/","bugs":{"url":"https://github.com/data-driven-forms/react-forms/issues"},"repository":{"type":"git","url":"git+https://github.com/data-driven-forms/react-forms.git","directory":"packages/pf4-component-mapper"},"keywords":["react","forms","javascript"],"devDependencies":{"@patternfly/react-core":"6.0.0-prerelease.21","@patternfly/react-icons":"6.0.0-prerelease.7"},"peerDependencies":{"@data-driven-forms/react-form-renderer":"*","@patternfly/react-core":"6.0.0-prerelease.21","@patternfly/react-icons":"6.0.0-prerelease.7","react":"^17.0.2 || ^18.0.0","react-dom":"^17.0.2 || ^18.0.0"},"dependencies":{"@data-driven-forms/common":"*","prop-types":"^15.7.2","downshift":"^5.4.3","lodash":"^4.17.21"},"gitHead":"8174302506f4ff8d18d83798af0dcf4078947214","_id":"@ausuliv/pf4-component-mapper@3.22.6","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-DgNxNjdrQpKaPfRV+Ky2XUCI1jfM5GUj4ZJZJPwvP3WRaHOL2hVRi/w26VjVQAX7v8PCmPYDTS2hklJJXG0W5Q==","shasum":"cecce49c3ba4bd1e3bd417ca17d9467dfdaa9c02","tarball":"https://registry.npmjs.org/@ausuliv/pf4-component-mapper/-/pf4-component-mapper-3.22.6.tgz","fileCount":205,"unpackedSize":436513,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOKEw9BbBl2/sv8xvz/+Vo1DAYR+Jypa5rHpJgC/7BQAiEAvt9Vqh0gaQ7oV8q3UH1jphAoGK1FBZNk15Xb97DN1rE="}]},"_npmUser":{"name":"ausuliv","email":"ausulliv@redhat.com"},"directories":{},"maintainers":[{"name":"ausuliv","email":"ausulliv@redhat.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pf4-component-mapper_3.22.6_1728584209236_0.9803316408127685"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-14T19:11:35.783Z","modified":"2024-10-10T18:16:49.638Z","3.22.4":"2024-06-14T19:11:36.109Z","3.22.5":"2024-08-20T19:50:00.121Z","3.22.6":"2024-10-10T18:16:49.443Z"},"bugs":{"url":"https://github.com/data-driven-forms/react-forms/issues"},"license":"Apache-2.0","homepage":"https://data-driven-forms.org/","keywords":["react","forms","javascript"],"repository":{"type":"git","url":"git+https://github.com/data-driven-forms/react-forms.git","directory":"packages/pf4-component-mapper"},"description":"Patternfly 4 React component mapper for Data Driven Forms.","maintainers":[{"name":"ausuliv","email":"ausulliv@redhat.com"}],"readme":"[![npm version](https://badge.fury.io/js/%40data-driven-forms%2Fpf4-component-mapper.svg)](https://badge.fury.io/js/%40data-driven-forms%2Fpf4-component-mapper)\n[![Tweet](https://img.shields.io/twitter/url/https/github.com/tterb/hyde.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20DataDrivenForms%20React%20library%21%20https%3A%2F%2Fdata-driven-forms.org%2F&hashtags=react,opensource,datadrivenforms)\n[![Twitter Follow](https://img.shields.io/twitter/follow/DataDrivenForms.svg?style=social)](https://twitter.com/DataDrivenForms)\n\n[![Data Driven Form logo](https://raw.githubusercontent.com/data-driven-forms/react-forms/master/images/logo.png)](https://data-driven-forms.org/)\n\nPatternfly 4 component mapper for [Data Driven Forms](https://github.com/data-driven-forms/react-forms).\n\n:book: For more information please visit the [documentation](https://data-driven-forms.org/). :book:\n\n**Table of Contents**\n\n- [More information](#more-information)\n- [Installation](#installation)\n  - [React Form Renderer](#react-form-renderer)\n  - [PatternFly 4 Mapper](#patternfly-4-mapper)\n- [Usage](#usage)\n- [Basic provided components](#basic-provided-components)\n- [ValidateOnMount](#validateonmount)\n- [Useful links](#useful-links)\n- [Contribution](#contribution)\n- [LICENSE](#license)\n\n### More information\n\nFor more information please check the root [repository](https://github.com/data-driven-forms/react-forms) or our [documentation page](https://data-driven-forms.org/).\n\n### Installation\n\nYou need to add React Form Renderer\n\n#### [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)\n\n```console\n$ npm install @data-driven-forms/react-form-renderer -S\n```\n\n```console\n$ yarn add @data-driven-forms/react-form-renderer\n```\n\n#### [PatternFly 4 Mapper](https://data-driven-forms.org/mappers/pf4-component-mapper)\n\n```console\n$ npm install @data-driven-forms/pf4-component-mapper -S\n```\n\n```console\n$ yarn add @data-driven-forms/pf4-component-mapper\n```\n\n\n### Usage\n\nFor using Data Driven Forms in your component you need the renderer and a component mapper, which provides formFields components and layoutFields components.\n\n```jsx\nimport React from 'react';\nimport { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';\nimport { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';\n\nconst schema = {\n  fields: [{\n    component: componentTypes.TEXT_FIELD,\n    name: 'name',\n    label: 'Your name'\n  }]\n}\n\nconst Form = () => (\n  <FormRenderer\n    schema={schema}\n    componentMapper={componentMapper}\n    FormTemplate={FormTemplate}\n    onSubmit={console.log}\n  />\n)\n```\n\n### Basic provided components\n\nData Driven Forms supports all kinds of component, basic set is consisted of:\n\n- [Text input](https://data-driven-forms.org/mappers/text-field?mapper=pf4)\n- [Text area](https://data-driven-forms.org/mappers/textarea?mapper=pf4)\n- [Checkbox](https://data-driven-forms.org/mappers/checkbox?mapper=pf4) ([Multiple checkboxes](https://data-driven-forms.org/mappers/checkbox-multiple?mapper=pf4))\n- [Select (dropdown)](https://data-driven-forms.org/mappers/select?mapper=pf4)\n- [Dual list select](https://data-driven-forms.org/mappers/dual-list-select?mapper=pf4)\n- [Field array](https://data-driven-forms.org/mappers/field-array?mapper=pf4)\n- [Switch](https://data-driven-forms.org/mappers/switch?mapper=pf4)\n- [Radio buttons](https://data-driven-forms.org/mappers/radio?mapper=pf4)\n- [Date picker](https://data-driven-forms.org/mappers/date-picker?mapper=pf4)\n- [Time picker](https://data-driven-forms.org/mappers/time-picker?mapper=pf4)\n- [Tabs](https://data-driven-forms.org/mappers/tabs?mapper=pf4)\n- [Slider](https://data-driven-forms.org/mappers/slider?mapper=pf4)\n- [Sub-form](https://data-driven-forms.org/mappers/sub-form?mapper=pf4)\n- [Plain text](https://data-driven-forms.org/mappers/plain-text?mapper=pf4)\n- [Wizard](https://data-driven-forms.org/mappers/wizard?mapper=pf4)\n\n\n### ValidateOnMount\n\nPF4 mapper provides an option to validate a field when the component is mounted. Just set `validateOnMount` to `true`.\n\n```jsx\n{\n    component: 'text-field',\n    name: 'required-field',\n    validate: [{type: 'required'}],\n    validateOnMount: true\n}\n```\n\nThis field will show the error immediately.\n\n\n### Useful links\n\n- [Data Driven Forms documentation](https://data-driven-forms.org/)\n- [PatternFly 4 Design documentation](https://www.patternfly.org/v4/)\n- NPM\n  - [React Form Renderer](https://www.npmjs.com/package/@data-driven-forms/react-form-renderer)\n  - [PatternFly 4 Mapper](https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper)\n\n### Contribution\n\nWe welcome any community contribution. Don't be afraid to report bug or to create issues and pull-requests! :trophy:\n\n### LICENSE\n\nApache License 2.0","readmeFilename":"README.md"}