{"_id":"@blackbox-vision/rff-wizard","_rev":"7-edeb8d67678b1afd7c35331d0fa6c336","name":"@blackbox-vision/rff-wizard","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@blackbox-vision/rff-wizard","description":"RFF Wizard Form builder components","version":"0.0.1","license":"MIT","esnext":"dist-src/index.js","main":"dist-node/index.js","module":"dist-web/index.js","types":"dist-types/index.d.ts","pika":true,"sideEffects":false,"keywords":["wizard","final-form","react-final-form"],"homepage":"https://github.com/BlackBoxVision/react-final-form-helpers#readme","bugs":{"url":"https://github.com/BlackBoxVision/react-final-form-helpers/issues"},"repository":{"type":"git","url":"git+https://github.com/BlackBoxVision/react-final-form-helpers.git"},"dependencies":{},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","final-form":"^4.18.5","react-final-form":"^6.3.0"},"devDependencies":{"@babel/core":"^7.6.4","@babel/plugin-proposal-class-properties":"^7.5.5","@babel/plugin-proposal-object-rest-spread":"^7.6.2","@babel/preset-react":"^7.6.3","@babel/preset-typescript":"^7.6.0","@pika/plugin-build-node":"^0.7.1","@pika/plugin-build-types":"^0.7.1","@pika/plugin-build-web":"^0.7.1","@pika/plugin-standard-pkg":"^0.7.1","@types/react":"^16.9.11","final-form":"^4.18.5","react":"^16.11.0","react-final-form":"^6.3.0","rimraf":"^3.0.0"},"_id":"@blackbox-vision/rff-wizard@0.0.1","_nodeVersion":"11.12.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-tbGotCwNe2SVZM+l4tKlYeJ9e6B3grdvuTt1nIPPjh/GZoHPS3H9DlOonCJ3RL7hZJ/KtDhpJ45YD0D0FABNqQ==","shasum":"0138db12164fcef75eaff2ec178256fe86833e4b","tarball":"https://registry.npmjs.org/@blackbox-vision/rff-wizard/-/rff-wizard-0.0.1.tgz","fileCount":12,"unpackedSize":31526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvfwCCRA9TVsSAnZWagAAgywP/A7/NcN7Qzm6BfVQJbVl\nAyWYCOFTRJvn3ojgoZGDroYHho+oaAn1lKEbXp8KEIMrUSYG6YzG3h4OsAfu\nJ5K4eaaEPTvJSu7HxXdHI3u6KsdWlUUoIFoJ+Twdh+bDCoy9t9F5NRL1s2EX\ngKQDFgkvcJIWJlcf9PWolGDD01KdnxBI26613ZZF5FM3AWrf/4CBmtxdmg0k\nXzuMNnYplPBWlK4F/Q6A1N8G9bERIKYSiyaOsVARliimc+t4HrR9ZBPPFYie\nUQrF86ulKFPwWBEqJZvM4MKn6DOAofK9r5Cs+4kj61LjDfApxeXJtgrwaogd\nxOvS3zv91gIb63Do8Cl7hBPSaS6GWsZWaE+MIvPuRPPF9LYcd6Yg8Fqj736N\nw21ltQtXMUvRjA+UAZsvtrXp3eheQix6lURqeXaWmPGj+04uxsYk1QXuxtst\nalpcCQq30oadvqlQmEHNCclZI8Hkcm64N2CIEHCUOI0yIt//MbATVzPw6eJ1\nclLuQZKLU05cc2Gg1cnJGQhyyTb5N0XTYR4SZtTrqLJ9/BinKh6dpvEUHoIW\nreagRi+J7B1C7HpvomPrTEnQfa5Qzby5Cj5feXjTj7rTjLZJoUKrhYdF6bDx\nXc1NEc1VppWPYgyLaVEuZyFnbf0+57Y6znN+gItgBmuVhTxnudiXc82lz8QD\nwbvv\r\n=HZ5R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJkThd4ASvISH8KtJyjgNOW1XUw4Y2PB8+GGTXzG+3AAiEAqDWpUMAqaGRxP1dZl4ZATEBnE4ixfhL3R87SvvBgpfU="}]},"maintainers":[{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"}],"_npmUser":{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rff-wizard_0.0.1_1572731905581_0.43768957995871305"},"_hasShrinkwrap":false},"0.0.2":{"name":"@blackbox-vision/rff-wizard","description":"RFF Wizard Form builder components","version":"0.0.2","license":"MIT","pika":true,"sideEffects":false,"keywords":["wizard","final-form","react-final-form"],"homepage":"https://github.com/BlackBoxVision/react-final-form-helpers#readme","bugs":{"url":"https://github.com/BlackBoxVision/react-final-form-helpers/issues"},"repository":{"type":"git","url":"git+https://github.com/BlackBoxVision/react-final-form-helpers.git"},"dependencies":{},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","final-form":"^4.18.5","react-final-form":"^6.3.0"},"devDependencies":{"@babel/core":"^7.6.4","@babel/plugin-proposal-class-properties":"^7.5.5","@babel/plugin-proposal-object-rest-spread":"^7.6.2","@babel/preset-react":"^7.6.3","@babel/preset-typescript":"^7.6.0","@pika/pack":"^0.5.0","@pika/plugin-build-node":"^0.7.1","@pika/plugin-build-types":"^0.7.1","@pika/plugin-build-web":"^0.7.1","@pika/plugin-standard-pkg":"^0.7.1","@types/react":"^16.9.11","final-form":"^4.18.5","react":"^16.11.0","react-final-form":"^6.3.0","rimraf":"^3.0.0"},"esnext":"dist-src/index.js","main":"dist-node/index.js","module":"dist-web/index.js","types":"dist-types/index.d.ts","_id":"@blackbox-vision/rff-wizard@0.0.2","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-oPjrKb+iSKHFqHnySbEwrzpz+CSGe4cfhRg6PXHrc6PAIup9TYEMNSlFLJpfHkLShlKM52FEOsNAr7qiZEbfpw==","shasum":"4b3f70063feca69254a31021066a1c62036b5aeb","tarball":"https://registry.npmjs.org/@blackbox-vision/rff-wizard/-/rff-wizard-0.0.2.tgz","fileCount":12,"unpackedSize":32072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvthiCRA9TVsSAnZWagAAbHIP/jPu+5Ju36NACBIvUS1a\neNmqFcn1Hge4L1YAF22XjtUCmuEWi+KayUazjLVloXx0P5dY3xrXFS0t8HwP\namPwVrNA/S5ug+utUXm/5594W+MtwtDgRyY0rJuhF0d0diMy2G3uvHXgxe+2\nOrWjmzT0lgKonJZEZoTYd8hSFstVmhvLIhCTYWkYAvu14KqMaJ2HtVvr0jsf\ngBN75/iDXfhgX8q9nsCCdWYgm5eVs6BRtlE8t/Qx5D0w5rEanyXYxZLPaCTM\nu7yrG2kOeDFx05s/PQWn6Pn3XVbv5wFPhgS7Me7UBGx0KzJA//9qNKsv3ZVq\ncGCW5HZxVdzq55AMZwUzW+32WA6ihfLDTwiFPjngqvQH4VOyjLPG5d4DI74V\nTAszzBtJdwz2A0XejjwyXmNzwgtCLphhzvmRTWcBNDy6Qz2H7AiDHdso77pN\n8ygeZyHp+bCafDP90/OkgvbcFfKJLeNV/6iiWqITWr/+dtr2u8HXpCybYy56\nhDRW4mX9u8EemzGlHkr6ktpDhzxGntX+4TnfYoedtVGxAprGgm82sl6mQg1m\nAlJ1bFPCpOAANvh/e191FcOnrVduNk3GStzJNf6vGhLHLaSEEz5s9q+ohRqU\nEB2sZki6JvCH2lZVLIuwFz7lV+xj+p5JhQjnNVzXBlryspBpF6eGozilyZnU\niFq+\r\n=Nj9l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBVJ89kiqQ+hA6681Eaql7dbMy0MLdytvqK3YAx+VJ3eAiBceEg9NHe07S1LKCsGOgVmYFja2A+F0JrJ8PXeaLjYow=="}]},"maintainers":[{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"}],"_npmUser":{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rff-wizard_0.0.2_1572788322136_0.6016681742631915"},"_hasShrinkwrap":false},"0.1.0":{"name":"@blackbox-vision/rff-wizard","description":"RFF Wizard Form builder components","version":"0.1.0","license":"MIT","pika":true,"sideEffects":false,"keywords":["wizard","final-form","react-final-form"],"homepage":"https://github.com/BlackBoxVision/react-final-form-helpers#readme","bugs":{"url":"https://github.com/BlackBoxVision/react-final-form-helpers/issues"},"repository":{"type":"git","url":"git+https://github.com/BlackBoxVision/react-final-form-helpers.git"},"dependencies":{},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","final-form":"^4.18.5","react-final-form":"^6.3.0"},"devDependencies":{"@babel/core":"^7.11.4","@babel/plugin-proposal-class-properties":"^7.10.4","@babel/plugin-proposal-object-rest-spread":"^7.11.0","@babel/preset-react":"^7.10.4","@babel/preset-typescript":"^7.10.4","@pika/pack":"^0.5.0","@pika/plugin-build-node":"^0.9.2","@pika/plugin-build-types":"^0.9.2","@pika/plugin-build-web":"^0.9.2","@pika/plugin-standard-pkg":"^0.9.2","@types/react":"^16.9.48","final-form":"^4.20.1","react":"^16.13.1","react-final-form":"^6.5.1","rimraf":"^3.0.2","typescript":"^3.9.7"},"esnext":"dist-src/index.js","main":"dist-node/index.js","module":"dist-web/index.js","types":"dist-types/index.d.ts","_id":"@blackbox-vision/rff-wizard@0.1.0","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-iZLOa2zlXfrYoaXVmsXmSiR0w/ke40ZsRJntNT33tgKvDLBvtxJLQ4LfSl3Ckeo8wC4qGPFhbDxn1Krp66wp1w==","shasum":"19a4302b6edba6074cbc79fa4274cd2f36df3e52","tarball":"https://registry.npmjs.org/@blackbox-vision/rff-wizard/-/rff-wizard-0.1.0.tgz","fileCount":12,"unpackedSize":32189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2BjxCRA9TVsSAnZWagAAwKoQAJQhcLVv/sR+msnPadxG\nYmUNG3svoirQFYo/JFSr77epadQANkRySeQa/mLK0lEq1kzrxJIegTcdDVqi\nTGV7O8cf56c45qUIvq9dqVp5uIY2/A11m5ynKM0No+mJn37sqXXj4p7mmr7f\nXC2XHouUJFo+yhJ+MDY1nPy810dytWDeeZ2taO2BB+OAYTribkhKrN6+4f/c\ngPFpWs1Uxg05huJJxDrcCnY9JqlxKpWWvNcI74GAMLRwG/6orHPz2ybxul+1\nDU64Cmv7ekY9abJp/YuH9eOvv0nT8KFzVkEqQFFGRp+sxcJwG8KOXN5SbBiN\n3SewTuc8J23mVcMs3ZkXzd1AH5egseZAP2Zmhpq9lV1RAeO+5bP65N7RfnO8\nlAqjqbBbQSEDE5zl1MigJ/cI4hIJz1MtnlnvrVAkgoCeooK3U3N0HALXQO+v\ngvfnDti4YcPfwcrfz2SdZmCE9iV1HQBtS3ax95xkYdAB/SjKb9P5XgIDqpbI\nU5vJ9SvKjgJ6ITJxMaRfssjb8P+udVnl+0IEE3KtjI6utTM1VW4rfdzoGZc4\nyCAo691+dAkcvRDCAmnpy6ifW8HKEhnE2V9lkwxJ6wvB58FuU7jQGxsMWgWr\n2GWKnRn68NnDGFtPIQubkR1OX78PzggjkRd07w3ox7yrRVivslhC1uRWlrpu\nuglI\r\n=b0Ay\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrePeOf10ysPW2qj+9ynwgJcIPPDD7LLZ3eIT+FJQpFAiBgyhRs9BDsUkKxp/b/aST2DEf8uuDcVgPtjJ/AdXIdow=="}]},"maintainers":[{"email":"jonatan.salas@blackbox-vision.tech","name":"jonatansalas"},{"email":"manuel.tuero@blackbox-vision.tech","name":"manutuero"}],"_npmUser":{"name":"jonatansalas","email":"jonatan.salas@blackbox-vision.tech"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rff-wizard_0.1.0_1598756359334_0.5904614618100319"},"_hasShrinkwrap":false}},"time":{"created":"2019-11-02T21:58:25.385Z","0.0.1":"2019-11-02T21:58:25.687Z","modified":"2022-04-04T19:19:56.871Z","0.0.2":"2019-11-03T13:38:42.228Z","0.1.0":"2020-08-30T02:59:19.456Z"},"maintainers":[{"email":"jonatan.salas@blackbox-vision.tech","name":"jonatansalas"},{"email":"manuel.tuero@blackbox-vision.tech","name":"manutuero"}],"description":"RFF Wizard Form builder components","homepage":"https://github.com/BlackBoxVision/react-final-form-helpers#readme","keywords":["wizard","final-form","react-final-form"],"repository":{"type":"git","url":"git+https://github.com/BlackBoxVision/react-final-form-helpers.git"},"bugs":{"url":"https://github.com/BlackBoxVision/react-final-form-helpers/issues"},"license":"MIT","readme":"# RFF Wizard [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Frff-wizard.svg)](https://badge.fury.io/js/%40blackbox-vision%2Frff-wizard) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)\n\nReact Final Form Wizard Pattern\n\n## Table of contents\n\n- [Use Case](#use-case)\n- [Compatibility](#compatibility)\n- [Installation](#installation)\n  - [NPM](#npm)\n  - [YARN](#yarn)\n- [Example Usages](#example-usages)\n- [Component APIs](#component-apis)\n  - [WizardForm](#wizardform)\n  - [WizardPage](#wizardpage)\n- [Issues](#issues)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Use Case\n\nYou're working with `react-final-form` and you need to implement a Wizard Form.\n\n## Compatibility\n\nSince this package uses `hooks` under the hood, you need at least a minimum React version of 16.8.0.\n\n## Installation\n\n### YARN\n\n```javascript\nyarn add @blackbox-vision/rff-wizard\n```\n\n### NPM\n\n```javascript\nnpm install --save @blackbox-vision/rff-wizard\n```\n\n## Example Usages\n\nAfter reading and performing the previous steps, you should be able to import the library and use it like in this example:\n\n1. Create a `FormLayout` component:\n\n```javascript\nimport React from 'react';\n\nconst MyFormLayout = ({\n  handleSubmit,\n  activeStep,\n  isLastPage,\n  submitting,\n  children,\n  onNext,\n  onBack,\n}) => (\n  <form onSubmit={handleSubmit}>\n    <h1>My Form</h1>\n    {children}\n    <div className=\"buttons\">\n      {activeStep > 0 && (\n        <button type=\"button\" onClick={onBack}>\n          « Previous\n        </button>\n      )}\n      {!isLastPage && <button onClick={onNext}>Next »</button>}\n      {isLastPage && (\n        <button type=\"submit\" disabled={submitting}>\n          Submit\n        </button>\n      )}\n    </div>\n  </form>\n);\n\nMyFormLayout.displayName = 'MyFormLayout';\n\nexport default MyFormLayout;\n```\n\n2. Create a custom `Form`:\n\n```javascript\nimport React from 'react';\nimport { Form, Field } from 'react-final-form';\nimport { WizardForm, WizardPage } from '@blackbox-vision/rff-wizard';\n\nimport MyFormLayout from './MyFormLayout';\n\nconst MyWizardForm = props => (\n  <WizardForm layout={MyFormLayout} onSubmit={values => alert(values)}>\n    <WizardPage>\n      <Field\n        type=\"text\"\n        name=\"firstname\"\n        component=\"input\"\n        placeholder=\"Firstname\"\n      />\n      <Field\n        type=\"text\"\n        name=\"lastname\"\n        component=\"input\"\n        placeholder=\"Lastname\"\n      />\n    </WizardPage>\n    <WizardPage\n      validate={values => {\n        const errors = {};\n\n        if (!values.password) {\n          errors.password = 'Password is required';\n        }\n\n        return errors;\n      }}\n    >\n      <Field name=\"email\" type=\"email\" component=\"input\" placeholder=\"Email\" />\n      <Field\n        name=\"password\"\n        type=\"password\"\n        component=\"input\"\n        placeholder=\"Password\"\n      />\n    </WizardPage>\n  </WizardForm>\n);\n\nMyWizardForm.displayName = 'MyForm';\n\nexport default MyWizardForm;\n```\n\n## Component APIs\n\n### WizardForm\n\nThe `WizardForm` component has the following props:\n\n| Properties  | Types        | Default Value | Description                                 |\n| ----------- | ------------ | ------------- | ------------------------------------------- |\n| initialStep | number       | 0             | The initial step for the form               |\n| layout      | ReactElement | -             | The Layout component to wrap the WizardForm |\n\nAlso, `WizardForm` inherits all `Form` props from `react-final-form`.\n\n### WizardPage\n\nThe `WizardPage` component has the following props:\n\n| Properties | Types    | Default Value | Description                                                               |\n| ---------- | -------- | ------------- | ------------------------------------------------------------------------- |\n| validate   | function | -             | A function that gives the form values and performs validation over fields |\n\n## Issues\n\nPlease, open an [issue](https://github.com/BlackBoxVision/react-final-form-helpers/issues) following one of the issues templates. We will do our best to fix them.\n\n## Contributing\n\nIf you want to contribute to this project see [contributing](https://github.com/BlackBoxVision/react-final-form-helpers/blob/master/CONTRIBUTING.md) for more information.\n\n## License\n\nDistributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/react-final-form-helpers/blob/master/LICENSE) for more information.\n","readmeFilename":"README.md"}